【JavaScript】滚动窗口显示动画效果 之 思路

环境

• 任一浏览器
• jQuery1.0+
• css3动画脚本

思路

为了适配不同的浏览器环境，我的思路是：

• 需要三个变量

1. 需要动画的DOM对象顶部位置

   例如：这里有一个id=2demo的DOM对象，它的顶部位置如下获取

var obj_top = $("#2demo").offset().top;

2. 需要动画的DOM对象上一个兄弟节点的外框高度

   例如：上一例的DOM对象，在其前面的兄弟节点id=1demo，它的外框高度如下获取

var obj_height = $("#1demo").outerHeight();

3. 当前浏览器窗口滑动到相对页面顶部的位置

   如下获取

var obj_scrollTop = $(window).scrollTop();

• 需要监听事件

$(window).scroll(function(e){
   
	//do something....
});

• 需要css3动画

1. 准备好想要的效果，这里我假定需要移动的效果

@keyframes move {
   
   from{
   
      transform: translateX(-100%);
      opacity: 0;
   }
   to{
   
      transform: translateX(0