Fulvaz PlayGroud

Fulvaz PlayGroud

我只是个混github连击的

实现向下滚动文章逐渐显示动画

2016-06-09

其实基本参考文末链接文章做的, 只是那篇文章实在写得太简略, 我将文章扩展开

效果见http://fulvaz.github.io/ (只支持最新版本的chrome浏览 : P)

思路

我们需要实现向下滚屏时, 文章逐渐显示出来, 那么就有几点需要完成:

  1. 滚动到文章位置播放动画
  2. 判断滚动到文章位置, 即文章此时可见
  3. 播放动画
  4. 补充: 不要重复播放动画

干活!

判断文章是否显示了

判断方法:

1
element.getBoundingClientRect().top < window.innerHeight);

getBoundingClientRect()可以获取该元素与可视区域上下左右的距离, 即元素不可见的时候, 依然会有数值, 一图胜千言:

getBoundingClientRect说明

即element上边框和可是区域上边框的距离即是top, 至于element在可视区域上方或者下方时的值, 大家可以自己试验

我们需要的是, 当element刚出现的时候就播放动画, 那么只要top的值小于window.innerHeight时, 我们就可以说element出现了, 那么就播放动画.

播放动画

动画我使用css3的animation属性完成

首先需要找一段动画, 我提供一段, 把这段动画放到css里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

播放动画的方法很简单, 新建一个类如下, 添加了这个类的元素都会播放动画

1
2
3
.animated {
	animation: 1s fadeInDown;
}

利用这个原理, 在js中, 当判断到element已经出现, 就添加animated类

顺便解决了下面的问题

只播放一次动画

同一个class不能添加两次, 动画只能播一次

那些元素会播放动画?

class为reveal-detect的元素

完整js代码

对, 就只有这么多

有趣的是:.reveal-detect:not(.animated) 获取不含有animated类, 但含有reveal-detect类的元素

1
2
3
4
5
6
7
8
9
window.addEventListener('scroll', () => {
			var revealDetect = document.querySelectorAll('.reveal-detect:not(.animated)');
			revealDetect = [].slice.call(revealDetect);  // may improve some performance? 
			for(let i=0; i<revealDetect.length; i++) {
			if(revealDetect[i].getBoundingClientRect().top < window.innerHeight) {
			revealDetect[i].classList.add('animated');
		}
	}
});

你也可以…

直接使用我的代码 https://github.com/fulvaz/TriggerAnimationOnScroll

参考文献

http://blog.webbb.be/trigger-css-animation-scroll/