Simple jQuery Plugin For CSS3 Text Animations - Curvy Text

File Size: 5.15 KB
Views Total: 2190
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Plugin For CSS3 Text Animations - Curvy Text

Curvy Text is a configurable jQuery text animation plugin which animates the text character by character or word by word using CSS3 transforms and animations. Inspired by the jQuery textillate plugin.

How to use it:

1. Load the jQuery library (slim build is recommended) and the curvy text plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/curvy-text.js"></script>

2. Call the function on the text wrapping element and specify the CSS animation you want to use.

$('.element').curvy({ 
  in : {
    effect: 'curveIn'
  }
});

3. Apply your own CSS animation to the text.

@keyframes 
curveIn {  0% {
 opacity: 0;
 transform: matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);
}
 33% {
 opacity: 0.5;
 transform: matrix(-1, 0.1, -0.1, -1.1, -100, 50);
 transform: rotateX(90deg);
}

to {
  opacity: 1;
  -webkit-transform: none;
  transform: none
}
}

.curveIn {
  -webkit-animation-name: curveIn;
  animation-name: curveIn;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

4. By default, the plugin will animate the text character by character when init. You can change the animation type to 'word' in the JavaScript as this:

$('.element').curvy({ 
  in : {
    effect: 'curveIn'
  },
  type: 'word'
});

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