This time I will share jQuery Plugin and tutorial about CSS3 Animated Headline Rotator Plugin With jQuery – animatedHeadline, hope it will help you in programming stack.
animatedHeadline is a jQuery plugin that makes it easier to rotate through a group of words/sentences/phrase within your text using CSS3 animations, transforms and transitions. Suitable for building an inline text rotator for your interactive headlines and slogans.
- ‘rotate-1’
- ‘rotate-2’
- ‘rotate-3’
- ‘type’
- ‘loading-bar’
- ‘slide’
- ‘clip’
- ‘zoom’
- ‘scale’
- ‘push’
Basic usage:
1. Load the required jquery.animatedheadline.css in the document that will provide the CSS3 based animations for the headline rotator.
1 |
<link rel="stylesheet" href="jquery.animatedheadline.css"> |
2. Add text strings you want to rotate through as this:
01 |
<div class="container"> |
02 |
<h1 class="ah-headline"> |
03 |
<span>My favorite programming language is</span> |
04 |
<span class="ah-words-wrapper"> |
05 |
<b class="is-visible">JavaScript</b> |
3. Load jQuery library and the JavaScript file jquery.animatedheadline.js at the end of the document.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.animatedheadline.min.js"></script> |
4. Initialize the plugin to create a text rotator with default settings.
1 |
$('.container').animatedHeadline(); |
5. Config the transition effect with the following options.
01 |
$('.container').animatedHeadline({ |
02 |
animationType: "rotate-1", |
04 |
barAnimationDelay: 3800, |
07 |
typeLettersDelay: 150, |
08 |
selectionDuration: 500, |
09 |
typeAnimationDelay: 1300, |
11 |
revealAnimationDelay: 1500 |
This awesome jQuery plugin is developed by GeoffSelby. For more Advanced Usages, please check the demo page or visit the official website.
