web可复用滚动动画

滚动动画

随着h5标准的诞生，页面动画在开发中的重要性日益上升，而随页面滚动，内容出现的动画也是页面中不可或缺的一个动画设计方式，那么使用什么样的方法进行该动画的实现，也是前端开发者必须考虑的问题之一。
预备知识：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
下面为大家提供一种目前主流的滚动动画实现方式，其具体步骤如下：

1.为页面添加必要内容，写在html中，此处使用文本内容进行练习，任意内容使用同样实现：

<p class="text">
    <span class="hidden">一生所获，不如一夜星空。span>
p>
<p class="text ">
    <span class="hidden">愿你走出半生，归来仍是少年。span>
p>
<p class="text">
    <span class="hidden">总是在夜深人静的时候，重复循环这一首听不厌的歌。span>
p>
<p class="text ">
    <span class="hidden">走一步又一步我才发现，绕了个圈走了好几年又回到原点。span>
p>
1
2
3
4
5
6
7
8
9
10
11
12

2.对页面内容进行修饰，保证页面高度和可滚动性，其中动画内容均定义在hideen和show两个class中，因此，最终操作也修改对应内容是否具有名为show的class；此处的hideen和show仅为示例，具体动画可以使用transition