如何实现视差滚动
运行机制
视差效果允许改变图片相对于其他对象的位置。您可以通过自定义HTML代码设置页面实现不凡的滚动效果，让网站更富吸引力。您可以使用现有解决方案或添加自有代码。
如何获取
使用现有解决方案
- 在发布商帐户中打开您的项目。
- 在侧边栏中单击建站器。
- 单击打开建站器。
- 在自定义代码区块插入以下代码：
Copy
- html
<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var script = document.createElement('script');
script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
script.addEventListener('load', function() {
$('.img-holder').imageScroll({
holderClass: 'sb-image-holder',
speed: 0.5
});
});
document.getElementsByTagName('body')[0].appendChild(script);
</script>
- 要对图片应用视差效果，请将该图片的链接放在
data-image属性中。 - 单击预览查看更改。
观看本说明的视频教程：
添加自有代码
- 在建站器中，单击添加区块，然后选择自定义代码。
- 在区块中插入自己的代码。
本文对您的有帮助吗？
感谢您的反馈！
我们会查看您的留言并运用它改进用户体验。有用链接
上次更新时间: 2024年1月22日发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。
