简单的背景视差滚动 与 动画结合

以下案例主要是结合现在比较流行的视差滚动以及滑动触发动画事件来实现。

<section class="article section1" id="article1">
<div class="title" id="title1">这是存放标题的地方</div>
<div class="content" id="content1">这是存放neiront的地方这是存放neiront的地方</div>
</section>
<section class="article section2" id="article1">
<div class="title" id="title2">这是存放标题的地方</div>
<div class="content" id="content2">这是存放neiront的地方这是存放neiront的地方</div>
</section>
<section class="article section3" id="article1">
<div class="title" id="title3">这是存放标题的地方</div>
<div class="content" id="content3">这是存放neiront的地方这是存放neiront的地方</div>
</section>

<style>
* { margin:0; padding:0; }
.article { width:1000px;padding:280px;background-repeat:no-repeat; background-attachment:fixed; margin:0 auto; background-position:center center;}
.section1 { background-image:url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg); }
.section2 { background-image:url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg); }
.section3 { background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg); }
.title {position:relative; top:-300px; font-size:18px; font-weight:700; color:red; height:50px; opacity:0;}
.content {position:relative; top:200px; left:1200px; font-size:24px; font-weight:700; color:orange; opacity:0; }
.title-anim{ transition:all 3s; -webkit-transition:all 3s; top:100px; opacity:1;}
.content-anim{ transition:all 3s; -webkit-transition:all 3s; left:100px; opacity:1;}
</style>

<script>
var articleHeight = document.getElementById("article1").clientHeight;
var title1 = document.getElementById("title1");
title2 = document.getElementById("title2");
title3 = document.getElementById("title3");
var content1 = document.getElementById("content1");
content2 = document.getElementById("content2");
content3 = document.getElementById("content3");
window.addEventListener("scroll",scrollHandler);
function scrollHandler(e){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 0 && scrollTop < articleHeight){
title1.classList.add("title-anim");
content1.classList.add("content-anim");
}else if(scrollTop>=articleHeight && scrollTop<articleHeight*2){
title2.classList.add("title-anim");
content2.classList.add("content-anim");
}else{
title3.classList.add("title-anim");
content3.classList.add("content-anim");
}
}
</script>