<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>fullPage.js — iPhone 5C演示_dowebok</title>
<link rel="stylesheet" href="http://www.dowebok.com/demo/2014/77/css/jquery.fullPage.css">
<style>
body{color:#333;font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif}
h1{font-size:5em;font-family:arial,helvetica;margin:0;padding:0}
h2{font-size:2em;margin:0 0 18px 0;font-family:arial,helvetica}
img{-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out}
.section{text-align:center;overflow:hidden}
.wrap{width:1180px;height:100%;margin-left:auto;margin-right:auto;position:relative}
.box{text-align:left;color:#808080;font-size:1.2em;line-height:1.6em}
#section0{padding:60px 0}
#section0 img{height:100%;margin:40px 0 0 0}
#section1 img{position:absolute;left:40px;top:100px}
#section1 .box{position:absolute;top:50%;left:50%;margin-top:-192px;margin-left:89px;width:395px;z-index:1}
#section1 .imgsContainer{display:block;position:absolute;z-index:1;top:42%;left:58%;margin-top:-325px;margin-left:-747px;width:800px;height:696px}
#section1 img{height:100%}
@media all and (min-width:620px) and (max-width:800px){#section1 .imgsContainer{margin-top:-278px;margin-left:-685px;width:647px;height:563px}
}@media all and (max-width:620px){#section1 .imgsContainer{margin-top:-208px;margin-left:-516px;width:534px;height:464px}
}#iphone2{z-index:10}
#iphone2.active{-webkit-transform:translate3d(-134px,0px,0px);-moz-transform:translate3d(-134px,0px,0px);-ms-transform:translate3d(-134px,0px,0px);transform:translate3d(-134px,0px,0px)}
#iphone3{z-index:12}
#iphone3.active{-webkit-transform:translate3d(213px,0px,0px);-moz-transform:translate3d(213px,0px,0px);-ms-transform:translate3d(213px,0px,0px);transform:translate3d(213px,0px,0px)}
#iphone4{z-index:11;left:140px}
#iphone4.active{-webkit-transform:translate3d(548px,0px,0px);-moz-transform:translate3d(548px,0px,0px);-ms-transform:translate3d(548px,0px,0px);transform:translate3d(548px,0px,0px)}
#section2 img{position:absolute}
#section2 .imgsContainer,#staticImg .imgsContainer,#section3 .imgsContainer{position:absolute;z-index:1;left:50%;display:block;margin-top:-288px;margin-left:-636px;width:0;height:0;-webkit-transition:all 1.2s ease-in-out;-moz-transition:all 1.2s ease-in-out;-o-transition:all 1.2s ease-in-out;transition:all 1.2s ease-in-out}
#section2.moveUp .imgsContainer{top:50%}
#section2.moveDown .imgsContainer,#staticImg .imgsContainer{top:90%}
#section2.active .imgsContainer{top:50%}
#section2 .box{top:22%;left:42%;position:absolute;width:582px}
#iphone-yellow{top:-35px;left:-222px}
#iphone-red{top:-194px;left:106px}
#iphone-blue{top:320px;left:448px}
#iphone-green{left:106px;position:absolute}
#staticImg{display:block;position:absolute;z-index:1;top:200%;left:0;width:100%;min-width:980px;height:100%;-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out}
#staticImg.moveDown{top:300%}
#staticImg.moveDown .imgsContainer{top:50%}
#staticImg.moveDown img{top:155px}
#staticImg.active .imgsContainer{top:50%}
#staticImg.active img{top:487px}
#section3 .imgsContainer{top:50%}
#section3 img{top:155px;left:455px;position:absolute}
#section3 .box{text-align:center;margin:10% 0 0 0}
#infoMenu.whiteLinks li:nth-child(1) a,#infoMenu.whiteLinks li:nth-child(2) a,#infoMenu.whiteLinks li:nth-child(3) a{color:#fff}
#infoMenu{font-family:arial,helvetica}
.fullPage-tooltip{color:#AAA}
#fullPage-nav span,.fullPage-slidesNav span{border-color:#AAA}
#fullPage-nav li .active span,.fullPage-slidesNav .active span{background:#AAA}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="http://cdn.staticfile.org/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://www.dowebok.com/demo/2014/77/js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
'verticalCentered': false,
'anchors': ['page1', 'page2', 'page3', 'page4'],
'css3': true,
'slidesColor': ['#F0F2F4', '#fff', '#fff', '#fff'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
'afterLoad': function(anchorLink, index){
if(index == 2){
$('#iphone3, #iphone2, #iphone4').addClass('active');
}
$('#infoMenu').toggleClass('whiteLinks', index ==4);
},
'onLeave': function(index, direction){
if (index == 3 && direction == 'down'){
$('.section').eq(index -1).removeClass('moveDown').addClass('moveUp');
}
else if(index == 3 && direction == 'up'){
$('.section').eq(index -1).removeClass('moveUp').addClass('moveDown');
}
$('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up'));
$('#staticImg').toggleClass('moveDown', index == 3 && direction == 'down');
},
afterRender: function(){
$('#infoMenu').appendTo('body');
$('#githubLink, .twitter-share-button').appendTo('body');
}
});
});
</script>
</head>
<body>
<div id="staticImg">
<div class="imgsContainer">
<img src="http://idowebok.u.qiniudn.com/77/iphone-green.png" alt="iphone" id="iphone-green" />
</div>
</div>
<div class="section " id="section0">
<h1>fullPage.js — iPhone 5C演示</h1>
<img src="http://idowebok.u.qiniudn.com/77/iphone1.jpg" alt="iphone" />
</div>
<div class="section" id="section1">
<div class="wrap">
<div class="imgsContainer">
<img src="http://idowebok.u.qiniudn.com/77/iphone2.png" alt="iphone" id="iphone2" />
<img src="http://idowebok.u.qiniudn.com/77/iphone3.png" alt="iphone" id="iphone3" />
<img src="http://idowebok.u.qiniudn.com/77/iphone4.png" alt="iphone" id="iphone4" />
</div>
<div class="box">
<h2>A powerful plugin</h2>
<strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.
</div>
</div>
</div>
<div class="section moveDown" id="section2">
<div class="wrap">
<div class="imgsContainer">
<img src="http://idowebok.u.qiniudn.com/77/iphone-yellow.png" alt="iphone" id="iphone-yellow" />
<img src="http://idowebok.u.qiniudn.com/77/iphone-red.png" alt="iphone" id="iphone-red" />
<img src="http://idowebok.u.qiniudn.com/77/iphone-blue.png" alt="iphone" id="iphone-blue" />
</div>
<div class="box">
<h2>Amazing stuff</h2>
Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable.
</div>
</div>
</div>
<div class="section moveDown" id="section3">
<div class="wrap">
<div class="box">
<h2>Just a demo</h2>
This is, of course, just a demo. I didn't want to spend much time on it.
Don't expect it to work perfectly in all kind of screens.
It has been designed to work on 1180px width or over on modern browsers with CSS3.
</div>
</div>
<div class="imgsContainer">
<img src="http://idowebok.u.qiniudn.com/77/iphone-two.png" alt="iphone" id="iphone-two" />
</div>
</div>
<a href="http://www.dowebok.com/" style="display: none;">dowebok</a>
<a href="http://www.dowebok.com/77.html" style="display: none;">jQuery全屏滚动插件fullPage.js</a>
</body>
</html>
html5全屏滚动实例 完美实现全屏滚动带动画
需积分: 50 120 浏览量
2016-01-18
11:01:03
上传
评论 3
收藏 1.54MB ZIP 举报
全屏滚动 full...zip （21个子文件） 
全屏滚动 full.. css 
jquery.fullPage.css 4KB
index5.html 2KB index4.html 1KB images 
2.jpg 398KB 1.jpg 314KB 3.jpg 431KB 4.jpg 365KB index12.html 1KB index.html 4KB js jquery.fullPage.min.js 21KB jquery-1.8.3.min.js 91KB jquery.fullPage.js 57KB .DS_Store 6KB index2.html 1KB index6.html 2KB index7.html 1KB index8.html 7KB index3.html 980B index13.html 2KB index11.html 1KB 说明下载.url 353B资源评论
