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