瞻前思后 如何让文章中的图片随屏幕滚动滑入滑出?我是这样实现的

2,031 阅读21分钟

背景

最近接到一个需求,图片随屏幕滚动而滑入划出。我一想,这不就是动画吗。参考网上的实现(javascript30),终于有了思路。真的应了一个梗。产品有三宝,弹窗,动画加引导;设计有三宝,透明,阴影加圆角;运营有三宝,短信,抽奖加红包;程序员有一宝,这个做不了。

思路

  • 获取肯定要在页面中所有图片的元素
  • 滚动事件监听
  • 尺寸获取及处理
  • 滚动至指定区域的条件判断
  • 滑入滑出动画

第一步

我们先把基本的样式写出来

  <div class="site-wrap">
		    <h1>悄悄的滚动</h1>
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		    <img src="http://unsplash.it/400/400" class="align-left slide-in">
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		    <img src="http://unsplash.it/400/401" class="align-right slide-in">
		
		    <p> 布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		    <img src="http://unsplash.it/200/500" class="align-left slide-in">
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室 <img src="http://unsplash.it/200/200" class="align-right slide-in"> 布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		    <img src="http://unsplash.it/400/400" class="align-right slide-in">
		
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室.</p>
		    <p>布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室布谷鸟工作室</p>
		
		  </div>
		 html {
		      box-sizing: border-box;
		      background:#ffc600;
		      font-family:'helvetica neue';
		      font-size: 20px;
		      font-weight: 200;
		    }
		    body {
		      margin: 0;
		    }
		    *, *:before, *:after {
		      box-sizing: inherit;
		    }
		
		    h1 {
		      margin-top: 0;
		    }
		
		    .site-wrap {
		      max-width: 700px;
		      margin: 100px auto;
		      background:white;
		      padding:40px;
		      text-align: justify;
		    }
		
		    .align-left {
		      float:left;
		      margin-right:20px;
		    }
		
		    .align-right {
		      float:right;
		      margin-left:20px;
		    }
		
		    .slide-in {
		      opacity:0;
		      transition:all .5s;
		    }
		
		    .align-left.slide-in {
		      transform:translateX(-30%) scale(0.95);
		    }
		    .align-right.slide-in {
		      transform:translateX(30%) scale(0.95);
		    }
		
		    .slide-in.active {
		      opacity:1;
		      transform:translateX(0%) scale(1);
		    }

第二步

这个时候我们可以看到效果图,那我们再想想怎么滚动屏幕时候图片渐入渐出呢。 127.0.0.1_8848_%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84javsscirpt_6.html.png

    function debounce(func, wait = 20, immediate = true) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    };

    const sliderImages = document.querySelectorAll('.slide-in');

    function checkSlide(e) {
      sliderImages.forEach(sliderImage => {
        // half way through the image
        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
        // bottom of the image
        const imageBottom = sliderImage.offsetTop + sliderImage.height;
        const isHalfShown = slideInAt > sliderImage.offsetTop;
        const isNotScrolledPast = window.scrollY < imageBottom;
        if (isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        }
      });
    }

    window.addEventListener('scroll', debounce(checkSlide));

思路讲解

  1. 首先我们获取所有涉及到的图片
  const slideImages = document.querySelectorAll('.slide-in');
  1. 滚动事件监听
    function checkSlide(e) {
           console.log(e);
    }

      
   window.addEventListener('scroll', debounce(checkSlide));
   
 针对页面的滚动事件进行监听,可以先打出事件对象来看看。同时在接下来的调试过程中也能利用这打出各个尺寸的值,来帮助我们感受每个尺寸的含义。
 
此外由于每次滚动都触发监听事件,会降低 JavaScript 运行性能,所以用 `debounce` 函数来降低触发的次数。

3. 图片计算

    // 滑动页面的底部距离扣除图片一半的高
    const slideInAt = (window.scrollY + window.innerHeight) - img.height / 2;
    // 图片底部距离顶端的距离
    const imgBottom = img.offsetTop + img.height;
    
    需要利用两个临界点来判断图片是否处在需要显示的区域内,故利用两个值来存取此条件的结果(以保证每次事件监听的结果赋值给常亮后,不会随 `window` 的属性值变化)。
   
    // 已滑过了图片的一半
    const isHalfShow = slideInAt > img.offsetTop;
    // 未完全滑过图片
    const isNotScrollPast = window.scrollY < imgBottom;
  1. 添加动画类名,最后就算完成啦
    if (isHalfShow && isNotScrollPast) {
        img.classList.add('active');
    } else {
        img.classList.remove('active');
    }
    

最后

代码已经贴出来啦,可自行复制到本地浏览。大功告成,发财的小手记得一键三连哦!!!

1.gif

推荐阅读