Sequential Fading JQuery Text Animation | Code For Developers

Sequential Fading jQuery Text Animation

This code animates text using jQuery, creating a seamless, captivating effect with elegant fades, enhancing user engagement and enriching web design.

Introducing Sequential Fading jQuery Text Animation – where words come alive on your website. With smooth fades and elegant transitions, your text captures attention effortlessly. Elevate your web design, engage visitors, and make a lasting impact. Explore the magic of subtle animation today!

Sequential Fading Text October 8, 2023

Here is the HTML

<div class="intro_text">
    <h1>
      <span>Here jQuery Text Animation 1</span>
      <span>Here jQuery Text Animation 2</span>
      <span>Here jQuery Text Animation 3</span>
    </h1>
  </div>

jQuery code for functionality

Script.js
(function ($) {
  "use strict";

  jQuery(document).ready(function ($) {
    //text animation code.mukto.info
    const spans = document.querySelectorAll('.intro_text h1 span');
    let index = 0;

    function fadeInNextSpan() {
      spans[index].style.display = 'inline';
      spans[index].style.opacity = 0;
      const fadeInEffect = setInterval(function () {
        if (spans[index].style.opacity < 1) {
          spans[index].style.opacity = parseFloat(spans[index].style.opacity) + 0.02;
        } else {
          clearInterval(fadeInEffect);
          setTimeout(fadeOutCurrentSpan, 5000); // Visible time of 5 seconds
        }
      }, 10); // Fading in over 1 second

    }

    function fadeOutCurrentSpan() {
      const fadeOutEffect = setInterval(function () {
        if (spans[index].style.opacity > 0) {
          spans[index].style.opacity = parseFloat(spans[index].style.opacity) - 0.02;
        } else {
          clearInterval(fadeOutEffect);
          spans[index].style.display = 'none';
          index = (index + 1) % spans.length;
          setTimeout(fadeInNextSpan, 10); // Gap between texts showing (1 seconds)
        }
      }, 10);
    }

    fadeInNextSpan(); // Start the animation loop

  });

}(jQuery));

We need a little CSS to hide all other text except 1st one

style.css
.intro_text h1 span{
  display: none;
}
.intro_text h1 span:first-child{
  display: block;
}

Use your creativity to customize your own way. Enjoy!

Previous Code

Customizing WooCommerce Order Numbers with Prefix and Year Suffix

Customize WooCommerce order numbers your way, whet ...

Next Code

WooCommerce Custom Order Dropdown Based on Payment Method

WooCommerce admin order page custom drop-down base ...

Leave a Reply

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

If you find it useful

Buy me a coffee

ACF

Elementor

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

WP Plugin Development

Jquery Replace specific text in all element

...

Random slide order in slick sider

Change slick carousel slide order randomly ...

Sticky Menu Show when scrolling up

Header bar only show when scrolling up with simple ...

Jquery Custom Tab

...

Animated jQuery Counter Up with the Intersection Observer API

Learn how to create a simple counter animation usi ...

top