Wave-style Text Effect Using jQuery And CSS3 - floating_text

File Size: 9.12 KB
Views Total: 3427
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Wave-style Text Effect Using jQuery And CSS3 - floating_text

floating_text is a jQuery plugin that lets you create configurable wave-style text animations just like floating in the water. Based on CSS3 transforms/animations/keyframes and a little JavaScript.

How to use it:

1. Include jQuery and the floating text librairy at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/floating_text.js"></script>

2. Wrap the text you want to animate in a DIV container like this. The class 'floating_text' is required. You can add 'run-animation' later, when you want to animate the element.

<div class="floating_text run-animation" id="example">
  Text Goes Here

3. Active the text floating effect on document ready.


4. Config the text floating effect using the data attributes like this (duration: 0.5s/keyframe, translate: 1px/keyframe):

<div class="floating_text run-animation" id="example" 
  Text goes here

5. Default variables used for animation manipulations:

// Duration, in seconds (float), of each keyframes

// Translate value, in pixels (float), of each keyframes

This awesome jQuery plugin is developed by Chnapy. For more Advanced Usages, please check the demo page or visit the official website.