fullPage与easing实现分屏

2024-02-09 16:23:34

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 高级：动画，遍历，事件绑定，案例，插件】