Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Question

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Here is a cool typing text effect created using HTML, CSS, and JavaScript. Check out the code below:

(function($) {
  var s,
    spanizeLetters = {
      settings: {
        letters: $('.js-spanize'),
      },
      init: function() {
        s = this.settings;
        this.bindEvents();
      },
      bindEvents: function() {
        s.letters.html(function(i, el) {
          var spanizer = $.trim(el).split("");
          return '<span>' + spanizer.join('</span><span>') + '</span>';
        });
      },
    };
  spanizeLetters.init();
})(jQuery);

CSS styling code goes here...

HTML markup code goes here...

The issue I'm facing is that the animation starts as soon as the page loads, rather than when the user scrolls to that specific section. I want the typing effect to begin only when the user scrolls to that part of the page. Can someone guide me on how to achieve this? I'm new to coding and would appreciate any help!

javascript html css

Answer 1

Answer №1

Enhance your web development workflow by leveraging the Intersection Observer API to dynamically apply classes to elements as they enter the viewport. Dive into a detailed example with explanations to deepen your understanding of this innovative feature. Keep scrolling to see it in action.

function onIntersection(entry) {
  entry.forEach(el => {
    if (el.isIntersecting) {
      el.target.classList.add("start");
    }
  });
}

// Initialize a new instance of Intersection Observer
let observer = new IntersectionObserver(onIntersection);

// Target all elements with the "js-spanize" class
let elements = document.querySelectorAll(".js-spanize");

for (let elm of elements) {
  observer.observe(elm);
}

Answer 2

Enhance your web development workflow by leveraging the Intersection Observer API to dynamically apply classes to elements as they enter the viewport. Dive into a detailed example with explanations to deepen your understanding of this innovative feature. Keep scrolling to see it in action.

function onIntersection(entry) {
  entry.forEach(el => {
    if (el.isIntersecting) {
      el.target.classList.add("start");
    }
  });
}

// Initialize a new instance of Intersection Observer
let observer = new IntersectionObserver(onIntersection);

// Target all elements with the "js-spanize" class
let elements = document.querySelectorAll(".js-spanize");

for (let elm of elements) {
  observer.observe(elm);
}

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Answer №1

Similar questions

Is it possible to generate a PagedListPager without the need to invoke a function?

Prevent Dehydration issue while using context values in Next Js

Enter a socket.IO chat room upon accessing an Express route

Stop const expressions from being widened by type annotation

Quirks and nuances when using p5's pixel fill function

JavaScript - memory heap exhausted

Steps to dynamically populate a datatable with JSON data by triggering a click event in jQuery

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

Leveraging jQuery and Ajax for retrieving information from a JSON document

Exploring modifications in axis for Google charts timeline

Learn how to dynamically update a user's profile picture in the navbar when clicked using Angular

Angular sing ng-view to load images from a file

Most effective method to verify if mutation observer meets specific criteria

What is the reason behind Selenium not utilizing JavaScript?

Exploring elements in Javascript

Guide on using jQuery to replace the applied css of an aspx control

How can TypeScript rules be incorporated into a Next.js project without compromising next/core-web-vitals?

The Angular ng-repeat directive is populating a list with items, but the parameters enclosed in double curly braces

send parameter when clicking a link rather than using a hashtag

Setting a cookie within an Angular interceptor