parallax插件视差效果实现

旧城等待， 2022-04-15 05:44 336阅读 0赞

效果图：

![20181122113332713.gif][]

首先引入需要的文件，parallax依赖于jQuery，parallax下载地址[https://cdn.bootcss.com/parallax/2.1.3/jquery.parallax.js][https_cdn.bootcss.com_parallax_2.1.3_jquery.parallax.js]，

使用时可以参考此处的文档[https://blog.csdn.net/qq\_26383604/article/details/72637068][https_blog.csdn.net_qq_26383604_article_details_72637068]

<script src="js/jquery.3.3.1.js" type="text/javascript"></script>

<script src="js/jquery.parallax.js" type="text/javascript"></script>

css部分：

<style type="text/css">  
        \*\{  
            margin: 0px;  
            padding: 0px;  
        \}  
        .layer\{  
            /\*position: absolute;    \*/          
        \}  
        .layer2\{  
            margin-left: 200px;  
            margin-top: 100px;  
        \}  
        .layer3\{  
            margin-left: 500px;  
            margin-top: 300px;  
        \}  
        .layer4\{  
            margin-top: 400px;  
            margin-left: 1000px;  
        \}  
        .layer5\{  
            margin-top: 500px;  
        \}  
        .layer6\{  
            margin-top: 500px;  
            margin-left: 1000px;  
        \}  
    </style>

html部分：

<ul id="scene">

<li class="layer layer1" data-depth="0.00"><img src="img/background.jpg"></li>  
          <li class="layer layer2" data-depth="0.20"><img src="img/board-birds.png"></li>  
          <li class="layer layer3" data-depth="0.40"><img src="img/board-cloud-1.png"></li>  
          <li class="layer layer4" data-depth="0.10"><img src="img/lighthouse.png"></li>  
          <li class="layer layer6" data-depth="1.00"><img src="img/light-purple.png"></li>  
        </ul>

js部分：

<script type="text/javascript">  
            $('\#scene').parallax(\{  
              calibrateX: false,  
              calibrateY: true,  
              invertX: false,  
              invertY: true,  
              limitX: false,  
              limitY: false,  
              scalarX: 10,  
              scalarY: 8,  
              frictionX: 0.2,  
              frictionY: 0.1,  
              originX: 0.0,  
              originY: 1.0  
            \});                 
        </script>

[20181122113332713.gif]: /images/20220415/1d1b6d14d7a5464b91e1b66b1c50e307.png
[https_cdn.bootcss.com_parallax_2.1.3_jquery.parallax.js]: https://cdn.bootcss.com/parallax/2.1.3/jquery.parallax.js
[https_blog.csdn.net_qq_26383604_article_details_72637068]: https://blog.csdn.net/qq_26383604/article/details/72637068

发表评论取消回复

表情：

评论列表（有 0 条评论，336人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5页面滚动视差效果特,34个网页视差滚动插件和视差特效教程分享

34个网页视差滚动插件和视差特效教程分享 Sponsor![10a45d2d0c23f68c6aa68c87bb9e706a.png][] 视差滚动这个设计趋势从去年开始一

小咪咪/ 2022年10月06日 04:46/ 0 赞/ 259 阅读

相关视差滚动Parallax

参考资料: 1.[https://www.youtube.com/watch?v=STwoa-9jxi0][https_www.youtube.com_watch_v_ST

怼烎@/ 2022年09月23日 13:52/ 0 赞/ 204 阅读

相关 swiper.js插件实现图片滚动效果

swiper.js插件实现图片滚动效果 1、页面初始化效果： ![Center][] 2、Html如下 <!DOCTYPE html> <ht

偏执的太偏执、/ 2022年06月05日 04:54/ 0 赞/ 423 阅读

相关 parallax插件视差效果实现

效果图： ![20181122113332713.gif][] 首先引入需要的文件，parallax依赖于jQuery，parallax下载地址[https://cdn.b

旧城等待，/ 2022年04月15日 05:44/ 0 赞/ 337 阅读

相关 stellar.js 视差滚动插件

视差滚动插件视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术主要核心就是前景和

「爱情、让人受尽委屈。」/ 2022年04月01日 15:23/ 0 赞/ 213 阅读

相关视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项

忘是亡心i/ 2021年12月20日 02:59/ 0 赞/ 332 阅读

相关视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项

逃离我推掉我的手/ 2021年12月20日 02:57/ 0 赞/ 263 阅读

相关视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项

迈不过友情╰/ 2021年12月20日 02:55/ 0 赞/ 383 阅读

相关视差滚动(Parallax Scrolling)效果的原理和实现

[视差滚动(Parallax Scrolling)效果的原理和实现][Parallax Scrolling] 视差滚动（Parallax Scrolling）是指让多层背景以

素颜马尾好姑娘i/ 2021年10月23日 14:28/ 0 赞/ 360 阅读

相关使用jqzoom插件实现图片放大镜效果

jqzoom插件实现图片放大镜效果。 ![1333548315_2346.png][] 图1.1jqzoom插件实现图片放大镜效果 1、引入jqurty和jqzoo

一时失言乱红尘/ 2021年09月12日 08:42/ 0 赞/ 729 阅读