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

Execute JavaScript code once all the AngularJS template directives are fully loaded

Pop-up box with hyperlink

Incorporating CSS Styles in EJS

implementing jquery for dynamic pop up placement

Front Page Luma Design for Magento Platform

Enhance your SVG progress circle by simply selecting checkboxes

Do the items appear on screen only once you start typing in AngularJS?

Tips for setting a specific height for an HTML table

NodeJS allows for the dynamic import of modules, enabling a flexible

Issues with the functionality of jQuery append and AngularJS ng-if not functioning

How to properly set margins for button components in Material UI

Error encountered in Listings#index with ExecJS RuntimeError

Unable to append Jquery attribute to a div component

Running an Angular-made Chrome extension within an iframe: A guide

What is the best way to update information in a mongoose document using the _id field?

Using JavaScript's regular expressions to identify a code block that commences with a specified pattern

The Checkbox handler in Material-UI component fails to update the state - Version 5.0

Convert a multidimensional array into a string using JavaScript

Utilizing data in mongoose: A beginner's guide

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly