基于需求,要借鉴这个网站的动画效果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),以此计算出当前图片集合需要的偏移量,最后通过transform、translateY属性来实现这个偏移的效果。
$(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