Infinite Float Up Effect With JavaScript And CSS3 – Floating.js

Floating.js is a lightweight JavaScript library which makes use of CSS3 @keyframes animations to float a number of things up on your webpage.

How to use it:

To get started, just include the floating.js script on the webpage and you’re ready to go.

<script src="floating.js"></script>

Initialize the Floating.js and specify any content you want to float up.

floating({
  content: "test"
});

All possible config options.

floating({
  // the character or string to float
  content: "test",
  // the number of items
  number: 3,
  // the amount of seconds it takes to float up
  duration: 10,
  // the number of times you want the animation to repeat
  repeat: 'infinite'
});

Changelog:

08/29/2018

• fix(animation): undo off-by-one error in iteration