Package Exports

floating.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (floating.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 {string}  content  the character or string to float
 * @param {int}     number   the number of items
 * @param {int}     duration the amount of seconds it takes to float up (default 10s)
 * @param {int}     repeat   the number of times you want the animation to repeat (default: 'infinite')
 */
floating({
  content: "🙋",
  number: 1,
  duration: 3,
  repeat: 1
});

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
  });
  floating({});
</script>

As another option you could do:

import floating from 'floating';

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
});
floating({});

Support

This makes, among others, use of template literals. That means you will either have to have a browser supporting this, or use babel or another transpiler.

License

Apache 2.0