【web】视差滚动

最新推荐文章于 2022-11-23 19:45:29 发布

韭浪

最新推荐文章于 2022-11-23 19:45:29 发布

阅读量275

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_43326122/article/details/108798873

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述

无插件

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
  .parallax {
    height: 550px;
    background-attachment: fixed;
    background-size: cover;
    /* background-repeat: no-repeat; */
    border: 2px solid #red;
  }
</style>

<script type="text/javascript">
  $(document).ready(function () {
    // 遍历包含“data-type”的元素，读取并设置Y偏移量、X位置、滚动速度等参数
    $('[data-type]').each(function () {
      $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
      $(this).data('speed', $(this).attr('data-speed'));
    });
    // 遍历符合 section[data-type="background"] 选择器的元素
    $('section[data-type="background"]').each(function () {
      // 存储一起基础变量
      var $self = $(this);
      offsetCoords = $self.offset();
      topOffset = offsetCoords.top;
      // 刷新后还没调用滚动事件时，图片位置的初始化
      $self.css({ backgroundPosition: '50% ' + $self.data('offsetY') + 'px'});
      // 当窗口滚动时
      $(window).scroll(function () {
        // 通过计算滚动条高度和窗口高度判断当前元素是否在视野中
        if (
          ((topOffset + $self.height()) > $(window).scrollTop()) &&
          ($(window).scrollTop() + $(window).height()) > (topOffset)
        ) {
          // 以设定的速度滚动背景
          // 因为我们是向上滚动，所以背景的yPos是负值
          var yPos = -($(window).scrollTop() / $self.data('speed'));
          // 如果此元素有一个Y偏移，将其添加上
          if ($self.data('offsetY')) {
            yPos += $self.data('offsetY');
          }
          // 最终的背景位置
          var coords = '50% ' + yPos + 'px';
          // 滚动背景
          $self.css({ backgroundPosition: coords });
        }; // in view
      }); // window scroll
    }); // each data-type
  }); // document ready
</script>
<body>
<div style="position: fixed; left:0px; top:0px; background-color: #12b7f5; opacity: 0.7; height: 70px;width: 100%"></div>
<div style="opacity: 0; height: 70px;width: 100%"></div>

<section class="parallax" data-type="background" data-speed='8' data-offsetY='70 px' style="background-image:url(https://sqimg.qq.com/qq_product_operations/im/2015/bg1_1600.jpg);">
</section>

<div style="height: 500px; width: 100%;background-color: #fff; border: 2px solid yellow"><h1>此处有图</h1></div>

<section class="parallax" data-type="background" data-speed='8' data-offsetY='135 px' style="background-image:url(https://sqimg.qq.com/qq_product_operations/im/2015/bg2_1600.jpg);">
</section>

<div style="height: 500px; width: 100%;background-color: #fff; border: 2px solid yellow"><h1>此处有图</h1></div>

<section class="parallax" data-type="background" data-speed='8' data-offsetY='200 px' style="background-image:url(https://sqimg.qq.com/qq_product_operations/im/2015/bg3_1600.jpg);">
</section>

<div style="height: 500px; width: 100%;background-color: #fff; border: 2px solid yellow"><h1>此处有图</h1></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

参数说明

data-offsetY: 在边框和屏幕上边相切时，图片能刚好显示完整
在这里插入图片描述
过小：

过大：

data-speed：8 背景滚动是页面滚动的1/8

data-offsetY和data-speed需要一起调整

stellar.js插件

js下载链接

导入后js调用$.stellar({})，标签加入data-stellar-background-ratio="0.5"就能实现视差滚动

更详细的说明看这篇

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://sqimg.qq.com/qq_product_operations/jslib/stellar.js"></script>

<style type="text/css">
  .activebg {
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center 70px;
    background-repeat: no-repeat;
    border: 2px solid red;
  }
</style>
<script type="text/javascript">
  $(function(){
    $.stellar({
      horizontalScrolling: false,
      responsive: true
    });
  })
</script>

<div style="position: fixed; left:0px; top:0px; background-color: #12b7f5; opacity: 0.7; height: 70px;width: 100%"></div>
<div style="opacity: 0; height: 70px;width: 100%"></div>

<div class="activebg" data-stellar-background-ratio="0.5" style="background-image:url(https://sqimg.qq.com/qq_product_operations/im/2015/bg1_1600.jpg);">
</div>
<div style="height: 500px; width: 100%;background-color: #fff; border: 2px solid yellow"><h1>此处有图</h1></div>

<div class="activebg" data-stellar-background-ratio="0.5" style="background-image:url(https://sqimg.qq.com/qq_product_operations/im/2015/bg2_1600.jpg);">
</div>
<div style="height: 500px; width: 100%;background-color: #fff; border: 2px solid yellow"><h1>此处有图</h1></div>
<div class="activebg" data-stellar-background-ratio="0.5" style="background-image:url(https://sqimg.qq.com/qq_product_operations/im/2015/bg3_1600.jpg);">
</div>
<div style="height: 500px; width: 100%;background-color: #fff; border: 2px solid yellow"><h1>此处有图</h1></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

韭浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【web】视差滚动

效果无插件<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><style type="text/css"> .parallax { height: 550px; background-attachment: fixed; background-size: cover; /* background-repeat: no-rep
复制链接

扫一扫