如何实现页面视差滚动效果

运行机制

视差效果允许改变图片相对于其他对象的位置。您可以通过自定义HTML代码设置页面实现不凡的滚动效果,让网站更富吸引力。您可以使用现有解决方案添加自有代码

如何获取

使用现有解决方案

  1. 前往发布商帐户 > 建站器
  2. 自定义代码区块插入以下代码:

Copy
Full screen
Small screen
<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>

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

  1. 要对图片应用视差效果,请将该图片的链接放在data-image属性中。
  2. 单击预览查看更改。

观看本说明的视频教程:


添加自有代码

  1. 在建站器中,单击添加区块,然后选择自定义代码

  1. 在区块中插入自己的代码。

本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
为此页面评分
为此页面评分
我们还有其他可改进之处吗?

不想回答

感谢您的反馈!

有用链接

上次更新时间: 2021年7月20日

发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!