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

Category: Animation , Javascript | August 29, 2018
Author:Haroenv
Views Total:2,303 views
Official Page:Go to website
Last Update:August 29, 2018
License:MIT

Preview:

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

Description:

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

You Might Be Interested In:


Leave a Reply