Press "Enter" to skip to content

Switch Text With Smooth Animations | jQuery Animated Headlines

jquery animated headlines is a jQuery plugin for creating cool headlines by switching between text using smooth transition effects powered by CSS3.

animated headline plugin, elementor animated headline free, headline animation css, how to make animated headline in html, elementor animated headline delay

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *