HTML+CSS realizes scrolling to the element position to display the loading animation effect

How to add a loading animation every time I scroll to an element?

Element adding initial parameters

Taking the animation in the above picture as an example, add two left and right containers and place the content inside the containers.

Add initial data, with default transparency of 0 and movement of 100px left and right.

//Left container.item-leftContainer {
    opacity: 0;
    transform: translateX(-100px);
  }
  //Right container.item-rightContainer {
    opacity: 0;
    transform: translateX(100px);
  }

Adding animation data

Add animation data in less. Here only to is set. You can also omit the initial parameter setting in step 1 and set from in the animation.

After execution, the transparency changes from 0 to 1, and the two containers move 100px to the middle and return to their original positions.

//Animation @keyframes showLeft {
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  @keyframes showRight {
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  @keyframes hideLeft {
    to {
      opacity: 0;
      transform: translateX(-100px);
    }
  }
  @keyframes hideRight {
    to {
      opacity: 0;
      transform: translateX(100px);
    }
  }

Triggering Animation

Page load/refresh trigger - executed in componentDidMount

Triggered when the page scrolls - add listeners/logouts for page scrolling events in componentDidMount and componentWillUnmount

Verify the difference between the current scroll height and the element's position:

window.pageYOffset (scroll distance) + windowHeight (window height) > leftElement.offsetTop (relative position of element) + parentOffsetTop (relative position of parent element) + 200

• True scroll visual position - window.pageYOffset (scroll distance) + windowHeight (window height)
• The height of the element from the top - leftElement.offsetTop + parentOffsetTop is used here because the parent container uses absolute positioning. If it is a normal layout, use the current position of the element leftElement.offsetTop
• The additional height of 200 is added to optimize the visual experience. The animation is triggered when the height exceeds 200

When the page scrolls to the bottom, the display animation is triggered; when the page scrolls to the top again, the hiding animation is triggered.

componentDidMount() {
        this.checkScrollHeightAndLoadAnimation();
        window.addEventListener('scroll', this.bindHandleScroll);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll = (event) => {
        this.checkScrollHeightAndLoadAnimation();
    }
    checkScrollHeightAndLoadAnimation() {
        const windowHeight = window.innerHeight;
        let parentEelement = document.getElementById("softwareUsingWays-container") as htmlElement;
        const parentOffsetTop = parentEelement.offsetTop;
        let leftElement = (parentEelement.getElementsByClassName("item-leftContainer") as htmlCollectionOf<HTMLElement>)[0];
        if (window.pageYOffset + windowHeight > leftElement.offsetTop + parentOffsetTop + 200) {
            leftElement.style.animation = "showLeft .6s forwards" //Add animation} else {
            leftElement.style.animation = "hideLeft 0s forwards" //Hide animation}
        let rightElement = (parentEelement.getElementsByClassName(".item-rightContainer") as HTMLCollectionOf<HTMLElement>)[0];
        if (window.pageYOffset + windowHeight > rightElement.offsetTop + parentOffsetTop + 200) {
            rightElement.style.animation = "showRight .6s forwards" //Add animation} else {
            rightElement.style.animation = "hideRight 0s forwards" //Hide animation}
    }

This is the end of this article about how to use html+css to scroll to the element position to display the loading animation effect. For more related html loading animation content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!