H5C3动画实例，通过基于jQuery的fullpage插件完成

最新推荐文章于 2020-03-25 11:34:04 发布

原创

最新推荐文章于 2020-03-25 11:34:04 发布 · 765 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何利用jQuery的fullpage插件创建H5C3动画。通过黑马程序员的素材，作者重写了代码，强调了在使用fullpage插件时，可以结合jQuery方法和fullpage API进行模块化开发。文章还提到了在控制元素显示隐藏、处理层级变化以及重新执行动画时的注意事项，并提供了相关的HTML、JS和CSS代码示例。

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

要点：

1、素材是黑马程序员的，自己重写了下代码，主要是为了体会下h5c3。

2、环境 :

3、主要是加入了pullpage的插件特有的功能帮助开发，其中基于jQuery开发的插件，其定义的方法一般都是通过$.fn.插件名.方法来调用的。在pullpage中可以使用jQuery所有的方法，同时能跟pullpageAPI联合使用。其进入页面，离开页面，和页面渲染事件发生之后，提供了对应的回调方法，如afterLoad:function(){}可以写出清晰模块的代码。

4、在控制元素的显示和隐藏时，如果使用过渡transform，只能通过控制透明度opacity。而通过jQuery提供的方法可以改变对应元素的display属性来控制显示和隐藏。

5、注意，在两个原来并列层级的元素，在其中一个执行过渡时（最常见的是调整元素居中使用translateX(-50%)），会提高对应元素的层级，让其层级最大而显示出来，在很多动画执行时需要注意。另外如果元素在执行旋转后，在同一组的横纵坐标轴会发生改变。

6、最后重新执行全部动画时，就是将控制动画执行的信号属性，如本例中的leaved和into类名，还有内联样式style的改变，将其还原到改变之前的属性值。

效果：

html代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 	<link rel="stylesheet" type="text/css" href="css/fullpage.css">
 	<link rel="stylesheet" type="text/css" href="css/index.css">
 </head>
 <body>
    <a href="#" class="goto"><img src="image/00-go.png"></a>
    <a href="javascript:;" class="more"><img src="image/00-more.png"></a>
    <!-- 整个宣传页每个页面当中公共的部分，使用固定定位 -->

 	<div class="container">
 	<!-- container设置使用fullpage的整体容器 -->

 		<div class="section section1">
 			<!-- 设置第二个类名，是为了添加指定的背景 -->
 			<div class="content">
 				<!-- 在第一屏中再定义一个容器，用来专门盛放沙发，列表，椅子等主体内容 -->
 				<div class="goods"><img src="image/01-goods.png"></div>
 				<div class="sofa"><img src="image/01-sofa.png"></div>
 				<div class="flag"><img src="image/01-fly.png"></div>
 			</div>
 		</div>
 		<div class="section section2">
 			<div class="content">
 				<!-- 盛放输入框，沙发等 -->
 				<div class="goods"><img src="image/02-goods.png"></div>
 				<div class="sofa"><img src="image/02-sofa.png"></div>
 				<div class="input">
 					<img class="search" src="image/02-search.png">
 					<!-- 搜索框 -->
 					<img class="key" src="image/02-key.png">
 					<!-- 关键字 -->
 				</div>
 				<div class="text">
 					<img class="text1" src="image/02-text1.png">
 					<!-- 广告字做动画之前的图片文字 -->
 					<img class="text2" src="image/02-text2.png">
 					<!-- 广告字做完之后的文字效果 -->
 				</div>
 			</div>
 		</div>
 		<div class="section section3">
 			<div class="content">
 				<div class="sofa"><img src="image/02-sofa.png"></div>
 				<!-- 下面也需要沙发，不能一直用第二屏的沙发进行切换 -->
 				<!-- 因为因为定位距离太长，并且如果不是第二屏执行动画会出错 -->
 				<div class="change">
 					<img src="image/03-change01.gif">
 					<img src="image/03-change02.gif">
 				</div>
 				<div class="cart">
 					<img src="image/03-cart01.gif">
 					<img src="image/03-cart02.gif">
 				</div>
 			</div>
 		</div>
 		<div class="section section4">
 			<div class="content">
 				<div class="cloud"><img src="image/04-cloud.png"></div>
 				<div class="text">
 					<img src="image/04-text01.png">
 					<img src="image/04-text02.png">
 				</div>
 				<div class="cart"><img src="image/04-cart.png"></div>
 				<div class="sofa"><img src="image/02-sofa.png"></div>
 				<div class="address">
 					<img src="image/04-address01.png">