ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

fullPage与easing实现分屏

2019-09-14 13:42:54  阅读：328  来源： 互联网

标签：left bottom fullPage 50% easing position animate 分屏 absolute


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代码下载

标签：left,bottom,fullPage,50%,easing,position,animate,分屏,absolute
来源： https://blog.csdn.net/u013165496/article/details/100825995

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有