最终效果图：http://www.zhangyingdong.com/#/home/detail?bid=34
主要代码
<body>
<div class="container" id="controller">
<div class="section1" id="sectionController">
<div class="ipadbg" id="ipadbg">
<div style="width: 100%;height: 100%;overflow: hidden;position: relative">
<div id="ipad_cover" class="ipad_cover">
</div>
</div>
</div>
<div id="centerTextA" class="centerText">张莹东的博客</div>
<div class="fast_title" id="fast_title">快速，简单，安全的触控</div>
</div>
<script>
$(function () {
// init
var controller = new ScrollMagic.Controller();
var wipeAnimation = new TimelineMax()
.fromTo("#ipad_cover", 3, {marginTop: "0"}, {marginTop: "-100%", ease: Linear.easing}) // cover to Top
.fromTo("#fast_title",1, {opacity: "0"}, {opacity: "1", ease: Linear.easing}) // text show
.fromTo("#fast_title",2, {top: "650px"}, {marginTop: "500px", ease: Linear.easing}) // text to bottom
.fromTo("#ipadbg",10, {scale: "1"}, {scale: "5", ease: Linear.easing}) // bg to scale
.fromTo("#centerTextA", 2, {fontSize: "16"}, {fontSize: "56", ease: Linear.easing}); // center to
new ScrollMagic.Scene({
triggerElement: "#sectionController",
triggerHook: "onLeave",
duration: "300%"
})
.setPin("#sectionController")
.setTween(wipeAnimation)
.addIndicators()
.addTo(controller);
});
</script>
<div id="pinContainer" style="overflow: hidden">
<section class="panel blue">
<img src="./image/pan1.png" />
</section>
<section class="panel turqoise">
<img src="./image/pan2.png" />
</section>
<section class="panel green">
<img src="./image/pan3.png" />
</section>
<section class="panel bordeaux">
<img src="./image/pan4.png" />
</section>
</div>
<div class="foot">
</div>
<script>
$(function () {
var controller = new ScrollMagic.Controller();
var wipeAnimation = new TimelineMax()
.fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})
.fromTo("section.panel.green", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
.fromTo("section.panel.bordeaux", 1, {y: "-110%"}, {y: "0%", ease: Linear.easeNone})
.fromTo("section.panel.bordeaux", 1, {width: "100%"}, {width: "100%", ease: Linear.easeNone})
.fromTo("#centertext", 2, {fontSize: "16"}, {fontSize: "166", ease: Linear.easing});
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "300%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addIndicators()
.addTo(controller);
});
</script>
</div>
</body>
版权声明：本文为qq_20758853原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。