🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Floating js is a animated float a number of things up on a page (hearts, flowers, emojis, words …).

Animation Core Java Script

Documentation

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


You May Also Like