1.首先要获取内容进入屏幕边缘的零界点

可以通过 滚轮移动端距离 + 浏览器窗口大小 > 元素距离页面顶部的距离来进行判断。
监听浏览器滚动事件：

1
2
3
4
5
6
//给页面绑定滑轮滚动事件
if (document.addEventListener) {//firefox
  document.addEventListener('DOMMouseScroll', scrollFun, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFun;
若是移动端还需加上：
1
document.addEventListener('scroll',scrollFun, false);

2.处理滚动事件：

当元素进入浏览器边缘时，对该元素添加一个class，令其具有滑入的特效。因此给需要有滑入特效的元素事先增加自定义的class，以便选中。 

1
2
3
4
function revealOnScroll() {
      var scrolled = $(window).scrollTop();  // 获取滚动条移动的距离，即移动的位移
      scrollFadeUpFun(scrolled, 'fade’); // 选中所有class为fade的元素
  }

3.获取浏览器高度：

1
var windowHeight = document.body.clientHeight;

4.操作元素：

1
2
3
4
5
6
7
8
9
10
function scrollFadeUpFun(scrolled, element) {
  $("." + element).each(function() {
    var $this = $(this),
    fadeOffsetTop = $this.offset().top; // 该元素在dom中距离顶部的距离
    if (windowHeight + scrolled > fadeOffsetTop) {
      // 当 窗口高度 + 滚动的高度 > 元素在dom中距离顶部的距离 即进入浏览器的下边缘时
      $this.addClass('fade_up');
    }
  });
 }

5.html中, 定义需滑入的元素

1
2
3
4
<div class='fade'>
      <p>回顾所来径</p>
      <p>苍苍横翠薇</p>
</div>

6.给元素增加滑入渐变特效，如下所示，即元素的透明度从0.1变为1, 位置从80px还原为0px。

1
2
3
4
5
6
7
8
9
10
11
12
13
元素自身样式
  .fade {
  display: block;
  transform: translateY(80px);
  opacity: 0.1;
  }
  定义滑入样式
  .fade_up {
  transform: translateY(0px);
  -webkit-transition: -webkit-transform .8s ease-out, opacity .8s ease-in;
  transition: transform .8s ease-out, opacity .8s ease-in-out;
  opacity: 1;
  }