如何制作这种效果（滚动视差）？

Question

example https://toccata.com.ua/示例https://toccata.com.ua/

How to make this effect (parallax on scrolling)?如何制作这种效果（滚动视差）？

 #bg { background-size: cover; background-attachment: scroll; background-position: top center; background-image: url(http://toccata.com.ua/uploads/main-bg.jpg); height: 100vh; width: 100vw; top: 0; position: fixed; z-index: -2; /* элемент на заднем плане под body */} section { background: #fff; } .container { padding: 0 1rem 0 1rem; } .image { background: transparent; } /* в .image больше нет картинки, но сам блок нужен как распорка, занимающая место. */ .image .container { padding: 30vh 1rem 0 1rem; text-shadow: 0 0 3px #000, /* тут просто усилил тень */ 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; } /* html { scroll-snap-type: y mandatory; } */ body { margin: 0; padding: 0; width: 100%; min-height: 100vh; overflow-x: hidden; color: #333333; background-color: transparent; line-height: 1.2; font-weight: normal; font-style: normal; /* <body> должен быть прозрачным */ } h1 { padding: 0; margin: 0; background: #fff; color: #000; position: sticky; top: 0; /* Заголовки сделал прилипающими */ } .image p { color: #fff; } section { height: 100vh; /* Высоту секции поставил по высоте окна, можно поменять */ /* scroll-snap-align: start; Это принудительно останавливает скрол на нужных местах */}

 <section class="image"> <h1>title1</h1> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque in provident enim placeat tenetur repudiandae illum consequatur quaerat adipisci autem! Recusandae amet inventore aut modi, itaque eaque incidunt totam nemo.</p> </div> </section> <div id="bg"></div> <section class="content"> <h1>title2</h1> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque in provident enim placeat tenetur repudiandae illum consequatur quaerat adipisci autem! Recusandae amet inventore aut modi, itaque eaque incidunt totam nemo.</p> </div> </section> <section class="content"> <h1>title3</h1> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque in provident enim placeat tenetur repudiandae illum consequatur quaerat adipisci autem! Recusandae amet inventore aut modi, itaque eaque incidunt totam nemo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque in provident enim placeat tenetur repudiandae illum consequatur quaerat adipisci autem! Recusandae amet inventore aut modi, itaque eaque incidunt totam nemo.</p> </div> </section>

Answer 1

You can use the scroll eventlistener in javascript to detect a scroll in the DOM您可以使用 javascript 中的滚动事件侦听器来检测 DOM 中的滚动

addEventListener("scroll", () => {
  document.querySelector("your css selector").style.setProperty("--scroll", pageYOffset / 10 + "px")
})

Now you can use variable var(--scrol) as a top property to make this effect work现在您可以使用变量var(--scrol)作为顶部属性来使此效果起作用

如何制作这种效果（滚动视差）？

问题描述

1 个解决方案

解决方案1
0 2021-10-21 15:02:14

如何制作这种效果（滚动视差）？

问题描述

1 个解决方案

解决方案1 0 2021-10-21 15:02:14

解决方案1
0 2021-10-21 15:02:14