我正尝试在使用垂直幻灯片创建的页面上添加视差效果。
这就是我要重新创建的内容。您会注意到叠加文字和背景图片上的视差效果很小
我的HTML结构如下:
这是每个部分的代码,嵌套在div中,其中id
为fullpage
<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>
艾米,我在这里想念什么吗?
答案 0 :(得分:0)
您可以利用parallax extension for fullpage.js来满足您的需求。
您可以在docs页面上阅读有关如何使用它的更多信息: https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax