全屏滚动效果Fullpage（案例）

最新推荐文章于 2024-04-12 09:54:19 发布

Pkuyzh

最新推荐文章于 2024-04-12 09:54:19 发布

阅读量689

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45615602/article/details/102500921

版权

本文详细介绍了如何实现全屏滚动效果Fullpage，包括背景效果、各屏具体效果的实现步骤，如小圆滚动、屏幕状态切换及图片角度调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤

1.引入相关文件

	<!-- css -->
	<!-- 1.1 fullpage 相关css文件 -->
	<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
	<!-- 1.1 自定义相关css文件 -->

	<!-- js -->
	<!-- 先引jq，再引fullpage -->
	<script src="js/jquery.min.js"></script>
	<!-- 动画效果插件 -->
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.fullPage.min.js"></script>
	<!-- 自定义js文件 -->

2.写骨架就按既定规则写骨架

<body>
	<div id="fullpage">
		<div class="section">
			第一屏
		</div>
		<div class="section">
			第二屏
		</div>
		<div class="section">
			第三屏
		</div>
		<div class="section">
			第四屏
		</div>
	</div>
</body>

3.自定义js文件，调用fullpage方法

$(function() {
	$('#fullpage').fullpage({

	});
})

背景效果的实现

分析小圆滚动游离在全屏滚动以外

1.写骨架定义样式

		<div id="bg">
			<div class="row1">
				<div class="orb1"></div>
				<div class="orb2"></div>
				<div class="orb3"></div>
			</div>
			<div class="row2">
				<div class="orb1"></div>
				<div class="orb2"></div>
				<div class="orb3"></div>
			</div>
			<div class="row3">
				<div class="orb1"></div>
				<div class="orb2"></div>
			</div>
		</div>

2.小球动画

#bg{
	width: 1000px;
	height: 1000px;
	position: absolute;
	/* background-color: lightblue; */
	/* 水平垂直居中 */
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: all 2s;
}
/* 结束状态 */
.rotate{
	transform: translate(-50%,-50%) rotate(-60deg) !important;
}

/* 背景小球的样式 */
.row1 .orb1, .row1  .orb2 {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	margin-top: -280px;
	margin-left: -30px;
}
.row1 .orb2 {
	margin-top: -280px;
	margin-left: 500px;
}
.row1  div, 
.row2  div,
.row3  div
{
	/* background:-webkit-linear-gradient(起始位置, 起始颜色， 结束颜色) */
	background:-webkit-linear-gradient(top, #fff, #dedede);
	border-radius: 50%;
}
.row2 .orb1, 
.row2 .orb2, 
.row2 .orb3
{
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin-top: -280px;
	margin-left: -500px;
}
.row2 .orb2 {
	margin-top: -180px;
	margin-left: 500px;
}
.row2 .orb3 {
	margin-top: 50px;
	margin-left: 0px;
}
.row3 .orb1, .row3  .orb2 {
	position: absolute;
	width: 500px;
	height: 500px;
	top: 50%;
	left: 50%;
	margin-top: 0;
	margin-left: 0;
}
.row3  .orb2 {
	margin-top: 100px;
	margin-left: 1000px;
}

第一屏效果实现

在这里插入图片描述

分析指定两个状态初始状态(大，翻转) 结束状态(正常)

大小通过视距实现

1.写两个状态

/* 第一屏开始 */
.section1{
	/* 视距 */
	perspective: 1000px;
}
/* 开始状态 */
.p1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) translateZ(500px) rotateY(-180deg);
	width: 880px;
	height: 320px;
	background: url(../images/skin.gif) no-repeat;
	transition: all 1s;
}

/* 结束状态 */
.comein .p1{
	transform: translate(-50%,-50%) translateZ(0px) rotateY(0deg);
}

/* 第一屏结束 */

2.触发一定条件加上样式可以实现两个状态的切换

//当页面向下滚动时，让图片回到初始状态    分析:删除comein类
			$('.section1').removeClass('comein');
			//当页面回到第一屏时，再加上comein类
			if (nextIndex == 1) {
				$('.section1').addClass('comein');
			}

第二屏效果实现

在这里插入图片描述
分析指定两个状态初始状态(渐渐放大至正常状态) 结束状态(放大离开)
当切换到第二屏时，背景小球也要跟着转动

			//背景发生偏转   当下一屏不是第一屏的时候，背景发生偏转
			if (nextIndex != 1) {
				$('#bg').addClass('rotate');
			} else {
				$('#bg').removeClass('rotate');
			}

			//当下一屏是第二屏的时候， 53图片变大
			if(nextIndex == 2) {
				$('.p2').css('transform', 'translate(-50%, -50%) translateZ(0px) scale(1)');
			} else {
				$('.p2').css('transform', 'translate(-50%, -50%) translateZ(1500px) scale(1)');
			}

第三屏效果实现

在这里插入图片描述
分析调整两张图片的倾斜角度

//当进入第三屏的时候   盒子进入屏幕
			if(nextIndex == 3) {
				$('.p3').css('transform', 'translate(-50%, -50%) translateZ(200px) rotateX(40deg)');
				$('.title3').css('transform', 'translate(-50%, -50%) translateZ(0px) rotateX(0deg)')
			}