fullPage与easing实现分屏

h5实现动画的分屏购物网站

最终效果图
导入库
  • 导库

    • <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
        	<script type="text/javascript" src="js/jquery.min.js"></script>
        	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        	<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
      
  • 定义页面

    <div id="fullpage">
    		<div class="section section1">
    			<img src="images/t1wsqsfgnaxxxmjxp6-470-50.png" class="fly updown" alt="">
    			<img src="images/t1xccqfflgxxxild.png" class="shirt01 shirtupdown" alt="">
    			<img src="images/t1iakufbxxxxctz4tl-824-274.png" class="goods" alt="">
    		</div>
    		<div class="section section2">第二屏</div>
    		<div class="section section3">第三屏</div>
    		<div class="section section4">第四屏</div>
    		<div class="section section5">第五屏</div>
    		<div class="section section6">第六屏</div>
    		<div class="section section7">第七屏</div>
    		<div class="section section8">第八屏</div>
    	</div>
    
  • 初始化fullPage

    $(function() {
    	// $('#fullpage').fullpage();//fullPage内部可接收对象
    	$('#fullpage').fullpage({
    		navigation:true,
    	});
    });
    
实现第一屏
  • js代码实现第一屏效果

    .section1{
    	background: #fadd67 url(../images/t1fpyqfltdxxaiulhh-990-600.png) no-repeat center bottom;
    }
    .fly{
    	position: absolute;
    	right: 20%;
    	top: 10%;
    }
    .shirt01{
    	position: absolute;
    	left: 50%;
    	margin-left: -200px;
    	bottom: 335px;
    }
    .goods{
    	position: absolute;
    	left: 50%;
    	margin-left: -400px;
    	bottom: 150px;
    }
    /*动画组m,css3动画,参考w3c文档*/
    .updown{
    	animation: fly 3s linear infinite;
    }
    .shirtupdown{
    	animation: shirt01 2.5s linear infinite;
    }
    @keyframes fly{
    	0%{
    		top: 10%;
    	}
    	50%{
    		top: 20%;
    	}
    	100%{
    		top: 10%;
    	}
    }
    @keyframes shirt01{
    	50%{
    		bottom: 360px;
    	}
    	100%{
    		bottom: 335px;
    	}
    }
    
实现第二屏
  • html代码

    <div class="section section2">
    			<div class="computer">
    				<div class="search">
    					<img src="images/search-words.png" alt="" class="search-words">
    				</div>
    				<img src="images/search-02-1.png" class="search-02-1" alt="">
    				<img src="images/goods-441-218.png" class="goods-02" alt="">
    			</div>
    			<img src="images/words-01-361-25.png" class="words-01" alt="">
    			<img src="images/words-02.png" class="words-02" alt="">
    		</div>
    
  • css样式和动画

    .section2{
    	background: #84a2d4 url(../images/t1zdgpfi8exxca6rfn-2000-600.png) no-repeat center bottom;
        z-index: 2;
    }
    .computer{
    	width: 990px;
    	height: 500px;
    	position: absolute;
    	left: 50%;
    	/*margin-left: 495px;*/
    	transform: translate(-50%);
    	/*background-color:rgba(0,0,0,.3);*/
    	bottom: 0;
    }
    .search{
    	width: 222px;
    	height: 45px;
    	background: url(../images/search.png) no-repeat;
    	position: absolute;
    	right: -30px;
    	bottom: 300px;
    	display: none;
    }
    .search img{
    	position: absolute;
    	right: 32px;
    	top: 5px;
    	opacity: 0;  /*因为做淡入淡出的效果所以用透明度,不用diplay*/
    }
    .search-02-1{
    	position: absolute;
    	bottom: 300px;
    	right: 370px;
    	display: none;
    }
    .goods-02{
    	height: 100px;
    	position: absolute;
    	bottom: 217px;
    	right: 270px;
    	display: none;
    }
    .words-01,.words-02{
    	position: absolute;
    	left: 50%;
    	bottom: 550px;
    	transform: translateX(-50%);
    }
    .words-02{
    	opacity: 0;
    }
    
  • fullPage定义动画执行

    $('#fullpage').fullpage({
    		navigation:true,
    		afterLoad:function(anchorLink,index) {
    			if(index==2){
    				$('.search').show().animate({"right":370},1500,function () {
    					$(".search-words").animate({"opacity":1},500,function() {
    						$('.search').hide();
    						$('.search-02-1').show().animate({"height":30,"right":250,"bottom":452},1000);
    						$(".goods-02").show().animate({"height":218},1000);
    						$(".words-02").animate({"opacity":1},500);
    					});
    				});
    			}
    		}
    	});
    
实现第三屏
  • html代码

    <div class="section section3">
    			<div class="main">
    				<div class="select">
    					<img src="images/img-01.gif" class="img" alt="">
    					<img src="images/img-01-a.gif" class="img img-01-a" alt="">
    					<img src="images/btn-01.gif" class="btn" alt="">
    					<img src="images/btn-01-a.gif" class="btn btn-01-a" alt="">
    				</div>
    				<img src="images/shirt-02-207-166.png" class="shirt03" alt="">
    				<img src="images/t1f.png" class="t1f" alt="">
    			</div>
    		</div>
    
  • css样式

    .section3 {
        background: #ef674d;
        z-index: 1;
    }
    .main{
    	position: absolute;
    	width: 700px;
    	height: 500px;
    	background: url(../images/main.png) no-repeat center center;
    	left: 50%;
    	transform: translateX(-50%);
    	bottom: 50px;
    }
    .select{
    	width: 300px;
    	height: 250px;
    	position: absolute;
    	bottom: 0;
    	right: 8px;
    	/*background-color: pink;*/
    }
    .shirt03,.t1f{
    	position: absolute;
    	left: 115px;
    	bottom: 200px;
    	display: none;
    }
    .select>.btn{
    	position: absolute;
    	bottom: 10px;
    }
    .img{
    	position: absolute;
    	top: 0;
    }
    /*.btn{
    	position: absolute;
    	bottom: 10px;
    }*/
    .img-01-a,.btn-01-a{
    	opacity: 0;
    }
    
  • fullPage实现

    //刚开始屏幕滚动就出发的函数onleave
    		onLeave:function(index,nextIndex,direction) {
    			if(index==2&&nextIndex==3&&flag){
    				$(".shirt02").show().animate({"bottom":-(k-250),"width":207,"left":260},2000,function() {
    					// body...
    					$(".img-01-a").animate({"opacity":1},500,function() {
    						$(".btn-01-a").animate({"opacity":1});
    					})
    				});
    				$(".cover").show();
    			}
    
实现第四屏
  • html代码

    <div class="section section4">
    			<img src="images/cloud.png" class="cloud cloud-back1" alt="">
    			<img src="images/words-04" alt="" class="word">
    			<img src="images/words-04-a" alt="" class="word words-04-a">
    			<div class="car">
    				<img src="images/t1f.png" class="car-img" alt="">
    				<img src="images/car.png" alt="">
    			</div>
    			<div class="note">
    				<img src="images/t1sqosfx8bxxa9wx_i-173-47.png" class="note-img" alt="">
    				<img src="images/t1.png" alt="">
    			</div>
    		</div>
    
  • css代码

    .section4 {
        background: #fed url(../images/t1iresfnxaxxca6rfn-2000-600.png) no-repeat center bottom;
    }
    .cloud{
    	position: absolute;
    	left: 50%;
    	bottom: 550px;
    }
    .cloud-back1{
    	animation: cloud 60s linear infinite;
    }
    @keyframes cloud{
    	50%{
    		left: -10%;
    	}
    	100%{
    		left: 50%;
    	}
    }
    .word{
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	bottom: 500px;
    }
    .words-04-a{
    	opacity: 0;
    }
    .car{
    	width: 500px;
    	position: absolute;
    	/*background-color: pink;*/
    	bottom: 50px;
    	left: 50%;
    	transform: translateX(-50%);
    }
    .car-img{
    	position: absolute;
    	bottom: 200px;
    	left: 50%;
    	z-index: -1;
    	display: none;
    	transform: translateX(-50%);
    }
    .note{
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	bottom: 180px;
    	display: none;
    }
    .note-img{
    	position: absolute;
    	top: 60px;
    	left: 60px;
    	opacity: 0;
    }
    
  • fullPage实现

    onLeave:function(index,nextIndex,direction) {
    			if(index==2&&nextIndex==3&&flag){
    				$(".shirt02").show().animate({"bottom":-(k-250),"width":207,"left":260},2000,function() {
    					// body...
    					$(".img-01-a").animate({"opacity":1},500,function() {
    						$(".btn-01-a").animate({"opacity":1});
    					})
    				});
    				$(".cover").show();
    			}
    			if(index==3&&nextIndex==4){
    				$(".shirt02").hide();
    				$('.t1f').show().animate({"bottom":-((k-250)+50),"left":260},2000,function() {
    					// body...
    					$(this).hide();
    					$(".car-img").show();
    					$(".car").animate({"left":"150%"},3000,"easeInElastic",function() {
    						// body...
    						$(".note").show();
    						$(".note-img,.words-04-a").animate({"opacity":1},1000);
    					});
    				});
    			}
    		},
    	});
    
实现第五屏
  • html代码

    <div class="section section5">
    			<img src="images/words-05.png" class="words-05" alt="">
    			<img src="images/card-05.png" class="card-05" alt="">
    			<img src="images/order-05.png" class="order-05" alt="">
    			<img src="images/t1f.png" class="t1f-05" alt="">
    			<div class="overFlow">
    				<img src="images/mouse-05.png" class="mouse" alt="">
    				<img src="images/mouse-05-a.png" class="mouse mouse-05-a" alt="">
    				<img src="images/hand-05.png" class="hand-05" alt="">
    			</div>
    		</div>
    
  • css样式

    .section5 {
        background: #d04759 url(../images/t1yisqfa4exxa3gmkg-2000-1500.png);
        /* overflow: hidden; */
        perspective: 500;
        -webkit-perspective: 500;
        z-index: 1;
    }
    .words-05{
    	position: absolute;
    	left: 20%;
    	top: 10%;
    	opacity: 0;
    }
    .words-05-a{
    	animation: words5 3s forwards;
    	/*animation-fill-mode: forwards;//让动画保持在最后一帧*/
    }
    @keyframes words5{
    	100%{
    		opacity: 1;
    		transform:translateZ(100px) rotateY(360deg);
    	}
    }
    .card-05{
    	position: absolute;
    	left: 20%;
    	bottom: 200px;
    	z-index: 10;
    }
    .order-05{
    	position: absolute;
    	left: 27%;
    	bottom: 270px;
    }
    .t1f-05{
    	position: absolute;
    	bottom: 800px;
    	left: 25%;
    	display: none;
    }
    .mouse{
    	position: absolute;
    	bottom: 200px;
    	right: 20%;
    }
    .mouse-05-a{
    	opacity: 0;
    }
    .hand-05{
    	position: absolute;
    	right: 24%;
    	bottom: -375px;
    }
    .overFlow{
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	overflow: hidden;
    }
    
  • fullPage实现

    if(index==4&&nextIndex==5){
    				$(".hand-05").animate({"bottom":0},2000,function() {
    					// body...
    					$(".mouse-05-a").animate({"opacity":1});
    					$(".t1f-05").show().animate({"bottom":70},1000,function() {
    						// body...
    						$(".order-05").animate({"bottom":390},function() {
    							// body...
    							$(".words-05").addClass("words-05-a");
    						});
    					});
    				});
    			}
    
实现第六屏
  • html代码

    <div class="section section6">
    			<img src="images/box.png" alt="" class="box-06">
    			<img src="images/car-06.png" alt="" class="car-06">
    			<img src="images/cloud-06.png" alt="" class="cloud-06">
    			<img src="images/88.png" alt="" class="pop-06">
    			<img src="images/man.png" alt="" class="boy">
    			<img src="images/women.png" alt="" class="girl">
    			<img src="images/door.png" alt="" class="door">
    			<img src="images/t1kzyqffnexxbcrepj-139-173.png" alt="" class="pop-07">
    			<img src="images/words-06-a.png" alt="" class="words-06-a">
    		</div>
    
  • css样式

    .section6 {
        background: #84d9ed url(../images/t1dvj.fn0gxxb0_fua-2500-600.png) no-repeat 25% 100%;
    }
    .box-06{
    	position: absolute;
    	left: 123px;
    	bottom: 500px;
    	z-index: 50;
    }
    .car-06{
    	position: absolute;
    	bottom: 0;
    	right: 50%;
    	z-index: 60;
    }
    .cloud-06{
    	position: absolute;
    	left: 50%;
    	bottom: 550px;
    	animation: cloud6 30s;
    }
    @keyframes cloud6{
    	50%{
    		left: 10%;
    	}
    }
    .pop-06{
    	position: absolute;
    	bottom: 119px;
    	right: 48%;
    	display: none;
    	z-index: 50;
    }
    .boy{
    	right: 50%;
    	bottom: 0;
    	position: absolute;
    	height: 100px;
    }
    .girl{
    	position: absolute;
    	right: 315px;
    	bottom: 116px;
    	height: 123px;
    	display: none;
    	z-index: 50;
    }
    .door{
    	position: absolute;
    	right: 285px;
    	bottom: 116px;
    	opacity: 0;
    }
    .pop-07{
    	position: absolute;
    	right: 445px;
    	bottom: 400px;
    	z-index: 40;
    	display: none;
    }
    .words-06-a{
    	position: absolute;
    	left: 10%;
    	bottom: 479px;
    	display: none;
    }
    
  • fullPage代码

    if(index==5&&nextIndex==6){
    				$(".t1f-05").animate({"bottom":-(k-500),"left":"40%","width":65},1500,function() {
    					$(".t1f-05").hide();
    				});
    				$(".box-06").animate({"left":"38%"},1500,function() {
    					$(".box-06").animate({"bottom":40},500,function() {
    						$(".box-06").hide();
    						$(".section6").animate({"backgroundPositionX":"100%"},4000,function() {
    							// body...
    							$(".boy").animate({"height":305,"bottom":116},1000,function() {
    								// body...
    								$(this).animate({"right":500},500,function() {
    									$(".door").animate({"opacity":1},200,function() {
    										$(".girl").show().animate({"right":350,"height":305},500,function () {
    											$(".pop-07").show();
    										});
    									});
    								});
    							});
    						});
    						$(".words-06-a").show().animate({"left":"30%"},2000,"easeOutElastic");
    						$(".pop-06").show();
    					});
    				});
    			}
    
实现第七屏
  • html代码

    <div class="section section7">
    			<div class="star">
    				
    			</div>
    			<img src="images/good-07.png" alt="" class="good-07">
    		</div>
    
  • css样式

    .section7 {
        background: #8ac060 url(../images/t1wf1tfctaxxa3gmkg-2000-1500.png) no-repeat 50% 100%;
    }
    .star{
    	position: absolute;
    	left: 50%;
    	bottom: 439px;
    	margin-left: -295px;
    	width: 0;
    	height: 20px;
    	background:url(../images/star.png) no-repeat;
    	background-size: 97px;
    }
    .good-07{
    	position: absolute;
    	bottom: 382px;
    	left: 50%;
    	margin-left: -289px;
    	display: none;
    }
    
  • fullPage实现

    if(index==6&&nextIndex==7){
    				setTimeout(function() {
    					$(".star").animate({"width":120},500,function() {
    						$(".good-07").show();						
    					});
    				},2000);
    			}
    
第八屏实现
  • html代码

    <div class="section section8">
    			<a href="#" class="beginShoping">
    				<img src="images/btn-08.png" alt="" >
    				<img src="images/btn-08-a.gif" alt="" class="btn-08-a">
    			</a>
    			<img src="images/again.png" alt="" class="again">
    			<img src="images/hand-08.png" alt="" class="hand-08">
    		</div>
    	</div>
    	<a href="#" class="go">
    		<img src="images/t1ldiffkjfxxxzhxzd-101-101.png" alt="">
    	</a>
    	<a href="javascript:;">
    		<img src="images/next.png" alt="" class="next next-updown">
    	</a>
    
  • css样式

    .section8 {
        background: url(../images/ksgw.png);
    }
    .beginShoping{
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	bottom: 365px;
    }
    .btn-08-a{
    	position: absolute;
    	top: 0;
    	left: 0;
    	display: none;
    }
    .again{
    	position: absolute;
    	bottom: 403px;
    	left: 50%;
    	margin-left: 240px;
    	cursor: pointer;
    }
    .hand-08{
    	position: absolute;
    	bottom: 0;
    	left: 50%;
    }
    /*进入购物中心图标*/
    .go{
    	position: fixed;
    	top: 5%;
    	right: 5%;
    	z-index: 999;
    }
    .next{
    	position: fixed;
    	bottom: 120px;
    	right: 10%;
    	z-index: 999;
    }
    .next-updown{
    	animation: next 1s linear infinite;
    }
    @keyframes next{
    	50%{
    		bottom: 100px;
    	}
    	100%{
    		bottom: 120px;
    	}
    }
    
  • fullPage实现

    $(".beginShoping").hover(function() {
    				$(".btn-08-a").toggle();
    			});
    			$(document).mousemove(function(event) {
    				var x=event.pageX-$(".hand-08").width()/2;
    				var y=event.pageY+10;
    				var minY=k-449;
    				if(y<minY){
    					y=minY;
    				}
    				$(".hand-08").css({"left":x,"top":y});
    			});
    			$(".again").click(function(event) {
    				$.fn.fullpage.moveTo(1);
    				// $("img,.move").attr("style","");
    			});
    		},
    

github代码下载

上一篇:JQuery 高级


下一篇:java day45【JQuery 高级:动画,遍历,事件绑定,案例,插件】