javascript - 当用户向下滚动时，如何垂直滑出图像的图层？

您可以使用 CSS 类和 @keyframes 规则创建动画，然后在达到您在滚动事件侦听器中的条件中设置的滚动阈值时将该类添加到您的元素。下面不是 Apple 动画的精确复制品，但是它将说明如何使用香草 JS 和 CSS 补间动画来实现这一点。

我在下面的代码中进一步解释了我是如何做到这一点的......

// get the selector nodes we wish to animate
const images = document.querySelectorAll('#main img');

// create a function and pass in the selector node and the top
// fold position (how far off the top fold you wish to slideOut) as a param
const slideOut = (images, foldPos) => {
  // run each element in the nodeList through a loop
  images.forEach((el) => {
    // add a scroll eventlistener on the window
    window.addEventListener('scroll', () => {
      // define each elements position using the forEach loop
      // el.getBoundingClientRect and get the top position 
      let elPos = el.getBoundingClientRect().top;
      // get the unique ID that was set in the elements we wish to animate
      // we'll use this to get the element selector using its ID
      let elId = el.id;
      // conditional that checks the top position in
      // relation to the top fold of page, this will pass
      // as a parameter in the main function slideOut()
      if (elPos < foldPos) {
        // lets target the id selector of the animated element
        // that has reached the set threshhold
        let slideEl = document.getElementById(el.id);
        // lets add our class to the element so the CSS can
        // do its animation using an @keyframes rule
        // * see the css code `.slideoff` and its `@keyframes` `slideoff` rule
        slideEl.className = 'slideoff';
        // optional, remove element from display using a timeOut()
        // set to work in conjuntion with the CSS animation duration
        setTimeout(() => slideEl.style.display = 'none', 500)
      }
    })
  })
}

// call function and pass in the paramter (nodeList, topFoldThreshold)
slideOut(images, 125)

#main {
  position: relative;
}

p {
  max-width: 50%;
}

#main img {
  width: 50%;
  height: 50%;
}

.slideoff {
  position: relative;
  animation: slideoff 1s ease-in-out;
  left: 50;
  opacity: 0;
  height: 50%;
  width: 50%;
}

@keyframes slideoff {
  0% {
    opacity: 1;
    top: 0;
    left: 0;
  }
  50% {
    opacity: 0;
    top: 500px;
  }
  100% {
    left: 10000px;
  }
}

SCROLL DOWN
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id
  ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec interdum elit. Praesent eu dui mi. Vestibulum facilisis elit in mi convallis, eget consectetur arcu vehicula. Pellentesque ultricies elit tellus, non ultrices erat volutpat at.
  Ut dui dolor, tempor nec porta at, aliquet eget urna. Etiam congue vestibulum ante. In et diam sapien. Suspendisse mattis eros eget ex convallis, nec tempor risus lobortis. Quisque ullamcorper libero arcu, quis ultrices magna aliquet non. Donec et ornare
  eros. Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis
  quis lobortis ut, placerat eget metus.
</p>
<div id="main">
  <img id="first" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Background.jpg">
  <p>Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam
    id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
  </p>
  <img id="second" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Backgrounds.jpg">
  <p>Ut vel mi facilisis, mattis diam sit amet, consectetur elit. Nam mollis vestibulum enim, posuere blandit sem. Quisque euismod odio est, vel maximus metus efficitur quis. Morbi ac dignissim massa, in egestas ex. Proin efficitur feugiat libero nec ornare.
    Duis vel sapien molestie, efficitur lacus et, ullamcorper tortor. Vestibulum sodales viverra porta. Aenean tincidunt velit nisi, non tempus odio vulputate ut. Praesent accumsan urna et turpis pharetra, vitae consequat diam tempor. Vestibulum sed odio
    sem.
  </p>
  <img id="third" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Images.jpg">
  <p>Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
  </p>
  <img id="fourth" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Picture.jpg">
  <p>Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis quis lobortis
    ut, placerat eget metus. Vestibulum neque ante, lobortis id accumsan a, pellentesque quis nisl. Quisque ac ante ut arcu faucibus molestie sit amet ac dui. Fusce elit nisi, ullamcorper eu eros eget, tempus suscipit purus. Aenean sed nibh urna. Vestibulum
    vehicula dapibus ante at viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed purus urna, condimentum sed dictum quis, blandit vel tellus. Sed pretium elit eros, sed congue lectus dictum in. In auctor diam sit amet augue congue
    blandit. Vivamus ut enim in mauris venenatis vulputate. Nulla felis tellus, vestibulum at hendrerit auctor, porta a purus. Aenean ac ante vitae turpis rutrum hendrerit eget nec ante. Phasellus bibendum egestas nisi, ac aliquet mi sollicitudin ac.
    Sed bibendum quam et mi bibendum ultricies. Pellentesque nec ante viverra, dictum turpis ac, sollicitudin dolor. Vestibulum ut interdum neque. Cras aliquet porta dui, sit amet luctus mauris egestas et. Aliquam quis imperdiet sapien, sollicitudin facilisis diam. Fusce at commodo sapien. Nam at erat nisl. Sed placerat risus vel consequat congue. Nam ultricies ultricies suscipit. Nunc ultrices, dui ut blandit porta, lorem sem dapibus diam, vitae porta tellus nisi ac nibh. Cras pulvinar laoreet dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  </p>
  <p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
  </p>

</div>

javascript - 当用户向下滚动时，如何垂直滑出图像的图层？

问题描述

解决方案

推荐阅读