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
/** * Float a number of things up on a page (hearts, flowers, 👌 ...) * @param * the character or string to float * @param * the number of items * @param * the amount of seconds it takes to float up (default 10s) * @param * the number of times you want the animation to repeat (default:'infinite') * @param * The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction"> * animation-direction</a> of the main animation * @param * The size (in em) of each element. Giving two values in an array will * give a random size between those values. */;
Example
All that was needed to make this example (haroen.me/floating.js) work is this:
As another option you could do:
; ;;;;;;
Support
This makes use of css animations, which aren't supported on every version of IE.
License
Apache 2.0