Floating.js

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="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