Float a number of things up on a page (hearts, flowers, emojis, words ...)
JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Floating.js

Build Status npm version gzipped size

Let a few elements float infinitely up your page

Usage

  • You can install it via npm install --save floating.js, and browserify it in your page
  • You can download the script and embed it in your page

full documentation

/**
 * Float a number of things up on a page (hearts, flowers, πŸ‘Œ ...)
 * @param {string} [options.content='πŸ‘Œ']
 *   the character or string to float
 * @param {number} [options.number=1]
 *   the number of items
 * @param {number} [options.duration=10]
 *   the amount of seconds it takes to float up (default 10s)
 * @param {number|string} [options.repeat='infinite']
 *   the number of times you want the animation to repeat (default:'infinite')
 * @param {string} [options.direction='normal']
 *   The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction">
 *   animation-direction</a> of the main animation
 * @param {number|array} [options.sizes=2]
 *   The size (in em) of each element. Giving two values in an array will
 *   give a random size between those values.
 */
floating({
  content: "πŸ™‹",
  number: 1,
  duration: 3,
  repeat: 1,
  size: 3
});

Example

All that was needed to make this example (haroen.me/floating.js) work is this:

<script src="https://unpkg.com/floating.js"></script>
<script>
  floating({
    content: "πŸ˜‡",
    number: 3,
    duration: 11
  });
  floating({
    content: "πŸ‘Œ",
    number: 5,
    duration: 8
  });
  floating({
    content: "test",
    number: 3,
    duration: 15
  });
  floating({
    content: "πŸ™‹",
    number: 1,
    duration: 3,
    repeat: 1,
    size: 1
  });
  floating({
    content: '<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Weather-snow.svg">',
    number: 10,
    direction: 'reverse'
    size: [1,10]
  });
  floating({});
</script>

As another option you could do:

import floating from 'floating.js';

floating({
  content: "πŸ˜‡",
  number: 3,
  duration: 11
});
floating({
  content: "πŸ‘Œ",
  number: 5,
  duration: 8
});
floating({
  content: "test",
  number: 3,
  duration: 15
});
floating({
  content: "πŸ™‹",
  number: 1,
  duration: 3,
  repeat: 1,
  size: 1
});
floating({
  content: '<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Weather-snow.svg">',
  number: 10,
  direction: 'reverse'
  size: [1,10]
});
floating({});

Support

This makes use of css animations, which aren't supported on every version of IE.

License

Apache 2.0