How To Get Text To Animate In To The Center As You Scroll Down The Page In Css

Making elements appear based on their scroll position is a very popular design choice when edifice web pages merely it unremarkably involves using a plugin or library.

In this tutorial yous'll learn how to implement blitheness on scroll using vanilla JavaScript and CSS. The master advantage of using a custom implementation (equally opposed to a library) is that it allows us to optimize our functions for accessibility and performance.

Scrolling Animation Demo

Here's an example of how animating elements on scroll works:

Our implementation relies on CSS for animations and JavaScript to handle triggering the necessary styles. We'll start past creating the layout.

1. Define the Page Construction

We'll create the layout of our page using HTML then assign a common class proper name to the elements we desire to animate on scroll. This class name is what we'll be targeting in JavaScript.

In the demo above, the elements were assigned the grade name js-scroll and then the HTML looks something similar this:

<header>   <!--this is where the content of the header goes--> </header> <section grade="scroll-container">     <div grade="scroll-element js-scroll">     </div>     <div course="gyre-explanation">       This blitheness fades in from the height.     </div> </section>

2. Styling With CSS

CSS does a lot of the heavy-lifting equally it determines the mode of blitheness of each chemical element. In this case, we'll be animating the elements with the class name scrolled.

This is an example of a simple fade-in animation:

.js-scroll {   opacity: 0;   transition: opacity 500ms; }  .js-scroll.scrolled {   opacity: 1; }

With this code, whatever js-scroll chemical element on the page is hidden with an opacity of 0 until the class name scrolled is applied to it.

3. Targeting Elements With JavaScript

Once nosotros accept our layout and styles, we're going to create the JavaScript functions to assign the class name to the elements when they scroll into view. We're also going to fade out the elements in JavaScript instead of CSS, every bit we want the elements to be visible in the event a browser does not have JavaScript enabled.

We'll break downward the logic like this:

1. Go all js-whorl elements on the page
2. Fade out elements
3. Detect when the chemical element is within the viewport
4. Assign the scrolled class name to the element if it is in view.

Target Elements on The Page

We'll target all the js-scroll elements on the page using the document.querySelectorAll() method. It should look like this:

const scrollElements = document.querySelectorAll(".js-coil");

Fade Out Elements

First, nosotros demand to remove the opacity:0 for .js-scroll in our CSS. So nosotros include this line in our JavaScript:

scrollElements.forEach((el) => {   el.style.opacity = 0 })

This allows the elements to take their default styling if JavaScript is disabled in the browser.

Detecting When an Element Is in View

We can find when an element is in view of the user by determining if the distance of the chemical element from the meridian of the page is less than the height of the visible part of the folio.

In JavaScript, we use the getBoundingClientRect().top method to get an element's altitude from the top of the page, and window.innerHeight or document.documentElement.clientHeight to get the height of the viewport.

Source: Chemical element.getBoundingClientRect() - Web APIs | MDN

We'll create an elementInView role using the above logic:

const elementInView = (el) => {   const elementTop = el.getBoundingClientRect().top;    return (     elementTop <= (window.innerHeight || certificate.documentElement.clientHeight)   ); };

We can modify this function to observe when the element has scrolled x pixels into the page, or detect when a percentage of the page has been scrolled.

const elementInView = (el, scrollOffset = 0) => {   const elementTop = el.getBoundingClientRect().top;    render (     elementTop <=      ((window.innerHeight || document.documentElement.clientHeight) - scrollOffset)   ); };

In this case, the office returns true if the element has scrolled by the scrollOffset amount into the page. Modifying the logic gives us a unlike function for targeting elements based on percentage scroll.

const elementInView = (el, percentageScroll = 100) => {   const elementTop = el.getBoundingClientRect().top;    return (     elementTop <=      ((window.innerHeight || document.documentElement.clientHeight) * (percentageScroll/100))   ); };

An added benefit of a custom implementation is that we can define the logic to arrange our specific needs.

Note: it's possible to utilise the Intersection Observer API to achieve the same upshot, however, at the fourth dimension of writing this article, Intersection Observer is not supported in Internet Explorer so information technology doesn't fit our neb of "works on all browsers".

Assign Class Name to Element

Now that we're able to detect if our chemical element has scrolled into the page, we'll need to define a function to handle displaying the chemical element–in this case we're displaying the element by assigning the scrolled class name.

const displayScrollElement = (chemical element) => {   element.classList.add together("scrolled"); };

We'll then combine our logic with the brandish role and use the forEach method to call the function on all js-scroll elements.

const handleScrollAnimation = () => {   scrollElements.forEach((el) => {     if (elementInView(el, 100)) {       displayScrollElement(el);     }   }) }

An optional feature is to reset the element to its default country when it's no longer in view. We can practise that past defining a hideScrollElement office and including it in an else statement to our higher up office:

const hideScrollElement = (chemical element) => {   chemical element.classList.remove("scrolled"); };  const handleScrollAnimation = () => {   scrollElements.forEach((el) => {     if (elementInView(el, 100)) {       displayScrollElement(el);     } else {       hideScrollElement(el);     }   }) }

Finally, we'll pass the in a higher place method into a scroll event listener on the window and then it runs whenever the user scrolls.

window.addEventListener('scroll', () => {   handleScrollAnimation(); })

And viola, we've implemented all the functions we need to breathing on scroll.

We can see how the logic works in this demo:

The complete code looks similar this. JavaScript:

const scrollOffset = 100;  const scrollElement = document.querySelector(".js-scroll");  const elementInView = (el, offset = 0) => {   const elementTop = el.getBoundingClientRect().superlative;    return (     elementTop <=      ((window.innerHeight || certificate.documentElement.clientHeight) - offset)   ); };  const displayScrollElement = () => {   scrollElement.classList.add('scrolled'); }  const hideScrollElement = () => {   scrollElement.classList.remove('scrolled'); }  const handleScrollAnimation = () => {   if (elementInView(scrollElement, scrollOffset)) {       displayScrollElement();   } else {     hideScrollElement();   } }  window.addEventListener('scroll', () => {   handleScrollAnimation(); })

CSS:

.js-gyre {   width: 50%;   height: 300px;   background-color: #DADADA;   transition: background-color 500ms; }  .js-roll.scrolled {   background-color: aquamarine; }

iv. More Animations With CSS

Let'south have a expect at the first demo over again:

Nosotros see that the elements appear with different animations. This was washed by assigning different CSS animations to form names. The HTML for this demo looks like this:

<section class="scroll-container">   <div class="scroll-element js-scroll fade-in">   </div>   <div class="scroll-explanation">     This blitheness fades in.   </div> </section> <section form="scroll-container">   <div class="scroll-element js-scroll fade-in-bottom">   </div>   <div grade="scroll-explanation">     This animation slides in to the superlative.   </div> </section> <section form="whorl-container">   <div class="scroll-element js-scroll slide-left">   </div>   <div class="scroll-explanation">     This animation slides in from the left.   </div> </section> <department grade="curlicue-container">   <div class="scroll-element js-scroll slide-right">   </div>   <div form="gyre-caption">     This blitheness slides in from the correct.   </div> </department>

Note: the classes next to the js-scroll class are what nosotros target in CSS to handle the dissimilar animations. In our CSS stylesheet, we'll take:

.scrolled.fade-in {   blitheness: fade-in 1s ease-in-out both; }  .scrolled.fade-in-lesser {   animation: fade-in-bottom 1s ease-in-out both; }  .scrolled.slide-left {   animation: slide-in-left 1s ease-in-out both; }  .scrolled.slide-right {   animation: slide-in-correct 1s ease-in-out both; }  @keyframes slide-in-left {   0% {     transform: translateX(-100px);     opacity: 0;   }   100% {     transform: translateX(0);     opacity: i;   } }  @keyframes slide-in-right {   0% {     transform: translateX(100px);     opacity: 0;   }   100% {     transform: translateX(0);     opacity: i;   } }  @keyframes fade-in-bottom {   0% {     transform: translateY(50px);     opacity: 0;   }   100% {     transform: translateY(0);     opacity: 1;   } }  @keyframes fade-in {   0% {     opacity: 0;   }   100% {     opacity: 1;   } }

We don't demand to make any changes to the JavaScript code since the logic remains the same. This means we tin can take any number of different animations on a page without writing new functions.

five. Increasing Performance with Throttle

Whenever we include a role in a scroll listener, that office is called every time the user scrolls the page. Scrolling a folio of 500px can cause a function to exist called at least 50 times. If nosotros're trying to include a lot of elements on the folio, this can crusade our page to slow down significantly.

Throttle Function to the Rescue

We can reduce the number of times a office is called by using a "throttle function". A throttle function is a higher guild office that calls the part passed into it only once during a specified time interval.

Information technology's specially useful with scrolling events equally we don't demand to notice every pixel scrolled by the user. For instance, if we take a throttle part with a timer of 100ms, the office will only be called once for every 100ms the user scrolls.

A throttle office tin can be implemented in JavaScript  like this:

//initialize throttleTimer every bit false let throttleTimer = imitation;  const throttle = (callback, time) => {     //don't run the function while throttle timer is true     if (throttleTimer) return;          //start gear up throttle timer to true so the function doesn't run     throttleTimer = true;          setTimeout(() => {         //phone call the callback function in the setTimeout and set the throttle timer to fake after the indicated time has passed          callback();         throttleTimer = imitation; 	}, time); }

Nosotros can modify our window on scroll event listener to wait like this

window.addEventListener('scroll', () => {   throttle(handleScrollAnimation, 250); })

At present our handleScrollAnimation part is called every 250ms while the user is scrolling.

Hither'south what the updated demo looks like:

6. Improving Accessibility

Performance isn't the only requirement when implementing a custom feature; we also demand to design for accessibility. Designing for accessibility means taking users' choices and circumstances into consideration. Some users may not want to accept animations at all, and then we need to account for that.

The Reduced Motion Media Query

We tin can do that with the prefers-reduced-movement query and a JavaScript implementation.

"prefers-reduced-motion [...] is used to detect if the user has requested that the system minimize the amount of not-essential move it uses" – MDN

Modifying our code above, the query would look like this in CSS:

@media (prefers-reduced-movement) {   .js-scroll {     opacity: 1;   }   .scrolled {     animation: none !important;   } }

With these lines of code, we ensure that the animated elements are e'er visible and the animation is turned off for all elements.

The prefers-reduced-motion query isn't fully supported across all browsers so we can include a JavaScript fallback:

const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");  window.addEventListener("scroll", () => {   //check if mediaQuery exists and if the value for mediaQuery does not lucifer 'reduce', return the scrollAnimation.   if (mediaQuery && !mediaQuery.matches) {     handleScrollAnimation()   } });

This manner, if the user prefers reduced movement, the handleScrollAnimation part is never called at all.

That's How to Breathing on Coil with JavaScript

We now have a highly performant, fully attainable implementation of the "animate on scroll" feature that works beyond all browsers!

More Practical JavaScript Tutorials

Did you discover this post useful?

Front end Developer

I'm a self-taught front terminate developer and school-taught systems engineer from Lagos, Nigeria. I write the kind of manufactures I'd like to read when trying to learn a new technology or implement a feature.

Source: https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671

Posted by: roddeneaddelartion.blogspot.com

Share this post