haroenv / floating.js

Float a number of things up on a page (hearts, flowers, emojis, words ...)

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

floating.js's Issues

add option to do animation only once

• allow setting of animation-repeat
• remove dom after animation

add option to randomise size

Would be the font-size/width that gets larger with a Math.random() call.

switch to object for options

that way I could change it to something like:

{
  duration: "10s"
  repeat: 3
  //...
}

Can't add links

I've tried to add a link as content: '< a href=" http://www.facebook.com ">FB </ a > and it shows it as a link (blue & underlined) but it's not clickable. When I try to click nothing happens.

add travis

should be just a simple jshint

publish on npm

allow direction

Limit animations to a div element

Is it possibile to reduce the scope of the animations to a div element, and not to the full page?

add option to change movement level

right low the left-right movement is hardcoded, this could be set by the user.