具有視差滾動效果的一頁滾動js

Question

我有一個單頁網站，在那里我使用了 onepagescroll.js 插件。 但我需要像這樣制作具有視差效果的滾動https://www.cssscript.com/demo/fullpage-scrolling-framework-vanilla-javascript-wall-js/

這就是它正常滾動的方式： https : //ihatetomatoes.net/demos/one-page-scroll-animations/

Answer 1

如何 -視差滾動

了解如何使用 CSS 創建“ parallax ”滾動效果https://www.w3schools.com/howto/howto_css_parallax.asp

例子

 .parallax { /* The image used */ background:blue; /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

 <p>Scroll Up and Down this page to see the parallax scrolling effect.</p> <div class="parallax"></div> <div style="height:1000px;background-color:red;font-size:36px"> Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect. </div>