hovering on one element while scrolling

how to hover on one element when scrolling. If you don’t know how it’s done, please tell me at least what it’s called. There is a similar effect here. link

searched on many forums. Because I don’t know what it’s called, that’s why I couldn’t find it

Answer

If you want to know how it works I leave you my implementation of this feature (not perfect) with some comments

//add event on scroll on the window element and trigger scrollLeftAnimation function
window.addEventListener("scroll", scrollLeftAnimation);

function scrollLeftAnimation() {
    //get each element who have scrollLeftAnimation class
    let scrollLeftAnimationElements = document.querySelectorAll(".scrollLeftAnimation");
    //for each scrollLeftAnimation element, call updateAnimation
    scrollLeftAnimationElements.forEach(SectionElement => updateAnimation(SectionElement));

    function updateAnimation(SectionElement) {
        let ContentElement = SectionElement.querySelector(".animationContent");
        //get the top value of element 
        //for reference see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
        let y = ContentElement.getBoundingClientRect().y;
        //get a pourcent of scrolling
        let pourcent = Math.abs(SectionElement.getBoundingClientRect().y / (SectionElement.clientHeight - ContentElement.clientHeight));
        let ContentOverflowElement = SectionElement.querySelector(".animationContentOverflow");
        //get the scroll left available distance
        let ContentOverflowElementLeftScrollDistance = ContentOverflowElement.scrollWidth - ContentOverflowElement.clientWidth;
        if (y == 0) {
            //if element is sticky then scroll left = (max scroll left available distance) * (pourcent of scrolling)
            ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance * pourcent;
        } else if (y > 0) {
            //if element is bellow, then scroll left = 0
            ContentOverflowElement.scrollLeft = 0;
        } else {
            //if element is above, then scroll left = max scroll left available distance
            ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance;
        }
    }
}

section {
      height: 100vh;
  }

  /*Main CSS*/
  section.scrollLeftAnimation {
      /*The more the ratio between the height of
      .scrollLeftAnimation compared to .animationContent 
      the more it will be necessary to scroll*/
      height: 300vh;
  }

  section.scrollLeftAnimation .animationContent {
      /* using sticky to keep the element inside the window*/
      position: sticky;
      top: 0;
      height: 100vh;
  }

  .animationContent .animationContentOverflow {
      height: 25vh;
      overflow: hidden;
  }


  /*CSS for card element*/
  .animationContent ul {
      margin: 0;
      padding: 0;
      height: 100%;
      white-space: nowrap;
  }

  .card {
      border: 1px solid black;
      height: 100%;
      width: 35vw;
      background-color: gray;
      display: inline-block;
  }

  .card + .card {
      margin-left: 50px;
  }

  .card:first-child {
      margin-left: 25px;
  }

  .card:last-child {
      margin-right: 25px;
  }

<section style="background-color: darkorchid;">Regular section 1</section>
<section class="scrollLeftAnimation" style="background-color: deeppink;">
    <div class="animationContent">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec.</p>
        <div class="animationContentOverflow">
            <ul>
                <li class="card"><a href="#">card 1</a></li>
                <li class="card"><a href="#">card 2</a></li>
                <li class="card"><a href="#">card 3</a></li>
                <li class="card"><a href="#">card 4</a></li>
            </ul>
        </div>
    </div>

</section>
<section style="background-color: violet;">Regular section 4</section>
<section style="background-color: silver;">Regular section 5</section>
<section class="scrollLeftAnimation" style="background-color: peru;">
    <div class="animationContent">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec. Posuere ac ut consequat semper viverra nam libero justo laoreet. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Rhoncus dolor purus non enim praesent elementum facilisis leo. Turpis tincidunt id aliquet risus feugiat in ante metus.</p>
        <div class="animationContentOverflow">
            <ul>
                <li class="card"><a href="#">card 1</a></li>
                <li class="card"><a href="#">card 2</a></li>
                <li class="card"><a href="#">card 3</a></li>
                <li class="card"><a href="#">card 4</a></li>
            </ul>
        </div>
    </div>

</section>
<section style="background-color: orange;">Regular section 7</section>