Day13 - 图片随屏幕滚动而滑入滑出的效果
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
项目效果
实现页面内伴随着鼠标滚动,到每个图片时图片出现,并伴随着动画出现。
实现思路
- 首先要先获取需要加载动画的元素
- 监听window的滚动事件
scroll
,绑定图片动画的函数 - 在
checkSlide()
函数中,实现滚动到每一个图片的一半位置时,图片从两边飞入的动画效果
基础知识
1. float浮动布局
布局中常用的CSS属性是 float
, float
可用于实现文字环绕图片,如下:
1 | img { |
2. opacity透明度设置
1 | .slide-in { |
1 | .slide-in.active { |
opacity:设置对象的透明度,值在0-1之间。
3. transform位置移动变换
代码解析
1. HTML代码
1 |
|
2. CSS代码
1 | <style> |
3. JS代码逻辑
https://developer.mozilla.org/zh-CN/docs/Web/API/Window
1 | <script> |
- 首先获取触发动画的位置,在滚动到图片一半的位置时触发。
const slideAt = window.innerHeight + window.scrollY - sliderimage.height/2;
window.innerHeight
表示浏览器的内部视图窗口的高度值window.scrollY
表示浏览器当前的在Y轴上滚动的距离(未滚动时值为0),也可通过采用window.scroll(X,Y)
方法,设置页面在X轴和Y轴上面的滚动值
- 再获取图片底部到页面文档顶端的距离,采用
const imageBottom = sliderimage.offsetTop + sliderimage.height;
sliderimage.offsetTop
表示该图片最上面的值,到页面文档顶端的距离,再加上该图片的高度,就是图片底部到页面文档顶端的距离
- 设置两个flag,分别表示图片是否显示了一半和图片是否已经被完全滚动出去了,分别为
const isHalfShown = slideAt > sliderimage.offsetTop;
,const isNotScrolledPast = window.scrollY < imageBottom;
- 只有当图片已经显示了一半并且没有被图片没有被滚动出窗口是,图片才会显示出来,此处的动画处理方式如下:默认时将图片向左或向右移动30%,当图片出现在窗口中时,取消该图片的移动,显示在原位置;再加上
transition: all .5s;
,在图片出现的时候,就会显示出约0.5秒的过渡动画。