使用fullPage的插件添加视差效果

时间:2019-08-08 18:46:37

标签: html css parallax fullpage.js

我正尝试在使用垂直幻灯片创建的页面上添加视差效果。

这是我到目前为止的内容:enter image description here

这就是我要重新创建的内容。您会注意到叠加文字和背景图片上的视差效果很小

enter image description here

我的HTML结构如下:

这是每个部分的代码,嵌套在div中,其中idfullpage

        <div class="section">
            <div class="fp-bg">
                <div class="img1-container">
                    <div class="overlay">
                        <div class="content">
                            <h3 class="title">Mountain</h3>
                            <h1 class="caption">In the wild There is no healthcare</h1>
                            <p class="description">Healthcare is "Oh, I broke my leg!" A lion comes and eats you. You're dead. Well, I'm not dead. I'm the lion. You're dead.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

这是fullpage选项对象的设置:

    <script>
        new fullpage('#fullpage', {
            licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
            navigation: true,
            navigationPosition: 'right',
            easingcss3: 'cubic-bezier(.825,0,.5,1)',
            parallax: true,
            parallaxOptions: {
                    type: 'reveal',
                    percentage: 100,
                    property: 'translate'
            }
        });
    </script>

艾米,我在这里想念什么吗?

1 个答案:

答案 0 :(得分:0)

您可以利用parallax extension for fullpage.js来满足您的需求。

您可以在docs页面上阅读有关如何使用它的更多信息: https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax