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
</div>

3. Active the text floating effect on document ready.

FLOATING_TEXT.float();

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" 
     data-float-duration='0.5' 
     data-float-translate='1'>
  Text goes here
</div>

5. Default variables used for animation manipulations:

// Duration, in seconds (float), of each keyframes
DURATION: 1.0,

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

---

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