jquery animated headlines is a jQuery plugin for creating cool headlines by switching between text using smooth transition effects powered by CSS3.
How to make use of it:
1. Include jQuery library and Animated Headlines plugin files on the page.
<link rel="stylesheet" href="/path/to/jquery.animatedheadline.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.animatedheadline.min.js"></script>
2. Add your addresses to the page.
<div class="selector" style="display: flex; justify-content: center; text-align: center;"> <h1 class="ah-headline" style="text-align: center;"> <span>I Am </span> <span class="ah-words-wrapper"> <b class="is-visible">Sajib</b> <b >Fornt-end Devalopar</b> <b>Web Designer</b> </span> </h1> </div>
3. Configure the plugin in the upper container and select the type of movement:
<script> $(function() { $('.selector').animatedHeadline({ animationType: 'scale' }); }) </script>
4. Configure transition effects:
$('.selector').animatedHeadline({ animationDelay: 2500, barAnimationDelay: 3800, barWaiting: 800, lettersDelay: 50, typeLettersDelay: 150, selectionDuration: 500, typeAnimationDelay: 1300, revealDuration: 600, revealAnimationDelay: 1500 });
Switch Between Text With Smooth Animations, jquery animated headlines Plugin/Github
See Demo And Download
Official Website(SajibSamadder): Click Here
This superior jQuery/javascript plugin is developed by SajibSamadder. For extra Advanced Usage, please go to the official website.