Skip to content
Branch: gh-pages
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
doc
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

You can’t perform that action at this time.