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

Question

如果有人记得圆柱形 Mac Pro 的 Apple 产品页面，该网站有一个功能，当您继续向下滚动时，Mac Pro 的每一层都会滑落。

我一直在到处寻找有关如何编码此动态页面的可能指示，但我没有成功。

Answer 1

You can create the animation with CSS class and @keyframes rule, then add the class to your element once it reaches the scroll threshold you set in the conditional within a scroll event listener. 下面不是 Apples animation 的精确复制品，但它将说明如何使用香草 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>