CSS利用粘稠布局,实现屏幕滑动动画酷炫效果

1,462 阅读1分钟

基于需求,要借鉴这个网站的动画效果www.thomasbosc.com/en,看起来挺难的,但是其实实现起来很简单。

点这里查看演示代码

1. 让内容始终浮动在区域的顶部

实现当屏幕滚动到一个区域时,该区域的内容始终浮动在顶部,当随着屏幕的滚动区域隐藏,浮动的内容也跟着隐藏。这里的实现方式是把需要做动画的这一个模块的高度设置的很大,内容利用position: sticky始终固定在该模块的顶部来实现。

.screen-2 {
  height: 500vh;
  position: relative;
  background-color: #0b0b0d;
  .s2-content {
    position: sticky;
    max-width: 1600px;
    height: 100vh;
    margin: 0 auto;
    top: 0;
  }
}

实现效果如下:

2. 实现屏幕滑动动画

接下来就是重点了,想要实现随着屏幕的滑动,让图片动起来就需要下面这一段js脚本,注释已经详细说明了每一个变量是用来干嘛的。

实现思路

大体的思路就是,计算出在screen2屏幕滑动的距离和在screen2屏幕从开始到结束滑动的总距离的比(offsetY / scrollDistance),再乘以图片集合需要一在Y轴移动的总距离(vSHeight - screenHeight),以此计算出当前图片集合需要的偏移量,最后通过transformtranslateY属性来实现这个偏移的效果。

$(function() {
      var $body = $(document),
      screenHeight = $(window).height(); // window可视区高度
      
      function handleScroll () {
        var scrollTop = $body.scrollTop(), // 当前滚动条滚动了的距离
        offsetY = scrollTop - $(".screen-2").offset().top, // 当前滚动条滚动的距离和模块offsetY的偏移量
        scrollDistance = 4 * screenHeight; // 从.screen-2现实完全到消失,滚动条所需要滚动的距离
        vSHeight = $('.vertical-swiper__left').height(); // 需要做动画的图片集的高度
        // offsetY / scrollDistance 可以计算出滚动距离的比例
        var vSOffsetY = offsetY / scrollDistance * (vSHeight - screenHeight); // 计算出当前需要偏移的距离

        $('.vertical-swiper__left').css('transform', 'translateY(' + vSOffsetY + 'px'  + ')');
        vSOffsetY = -vSOffsetY;
        $('.vertical-swiper__right').css('transform', 'translateY(' + vSOffsetY + 'px'  + ')')
      }
      
      $body.scroll(handleScroll);
});

最终效果如下

是不是有内味儿了,hhh