51Testing软件测试论坛

标题: stellar视差插件 [打印本页]
作者: 悠悠小仙仙    时间: 2019-1-29 15:51
标题: stellar视差插件
视差滚动指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。主要核心就是前景和背景以不同速度移动，从而创造出3D效果。利用background-attachment属性实现。stellar.js是一个jQuery插件，能很容易地给网站添加视差滚动效果。以下介绍stellar的简单使用：

1.引入js包
  1. <script src="path/to/jquery/jquery.min.js"></script>
  2. <script src="path/to/jquery.stellar.min.js"></script>
复制代码

2.引用HTML和css样式
  1. <div class="content" id="content1">
  2.     <p>TEXT HERE</p>
  3. </div>
  4. <div class="content" id="content2">
  5.     <p>TEXT HERE</p>
  6. </div>
  7. <div class="content" id="content3" data-stellar-background-ratio="0.5">
  8.     <p>TEXT HERE</p>
  9. </div>
  10. <div class="content" id="content4" data-stellar-background-ratio="0.5">
  11.     <p>TEXT HERE</p>
  12. </div>
  13. <div class="content" id="content5" data-stellar-background-ratio="0.5">
  14.     <p>TEXT HERE</p>
  15. </div>
  16. <div class="content" id="content6" data-stellar-background-ratio="0.5">
  17.     <p>TEXT HERE</p>
  18. </div>
  19. //css样式中设置content背景等
复制代码

3.js 调用函数
  1. $.stellar({
  2.     horizontalScrolling: false,
  3.     responsive: true
  4. });
复制代码


4.详细参数
[attach]121448[/attach]

5.实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         html,body{
  8.             height: 100%;
  9.         }
  10.         .content{
  11.             width: 100%;
  12.             height: 100%;
  13.         }
  14.         .content2{
  15.             background: url(images/2.jpg) 0 0/100% 100% no-repeat;
  16.             /*背景图像相对于窗体固定*/
  17.             background-attachment: fixed;
  18.         }
  19.         .content4{
  20.             background: url(images/4.jpg) 0 0/100% 100% no-repeat;
  21.             background-attachment: fixed;
  22.         }
  23.         /*.yezi{
  24.             position: fixed;
  25.             top: 50px;
  26.             right: 10px;
  27.         }*/
  28.     </style>
  29. </head>
  30. <body>
  31.     <!-- data-stellar-ratio 元素针对页面滚动的速度比率 -->
  32.     <!-- <img src="images/big-01.png" alt="" class="yezi" data-stellar-ratio="2"> -->
  33.     <div class="content content1">111</div>
  34.     <!-- data-stellar-background-ratio 设置元素背景的滚动速率 -->
  35.     <div class="content content2" data-stellar-background-ratio="5"></div>
  36.     <div class="content content3">333</div>
  37.     <div class="content content4" data-stellar-background-ratio="0.5"></div>

  39.     <script type="text/javascript" src="jquery.min.js"></script>
  40.     <!-- 引入视差滚动插件stellar -->
  41.     <script type="text/javascript" src="jquery.stellar.min.js"></script>
  42.     <script type="text/javascript">
  43.         $(function(){
  44.             $.stellar({
  45.                 // 设置视差效果方向
  46.                 horizontalScrolling:false,
  47.                 // load或者resize事件触发时是否刷新页面
  48.                 responsive:true
  49.             })
  50.         })
  51.     </script>
  52. </body>
  53. </html>
复制代码







欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2