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

如何 - 视差滚动

了解如何创建＆＃34; parallax＆＃34;使用CSS滚动效果 https://www.w3schools.com/howto/howto_css_parallax.asp

示例

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

单页滚动具有视差滚动效果的js

1 个答案: