报名工具小程序_fullPage.js和CSS3完成全屏滚动效果

2021-01-12 11:34

fullPage.js和CSS3实现全屏滚动效果       这篇文章主要为大家详细介绍了fullPage.js和CSS3实现全屏滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

首先说一下fullpage,它是一个jquery的插件,用来实现鼠标向上向下滑动,就会自动切换到上一屏或者下一屏,对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。

总共有四屏的内容

当鼠标每次上下滑动时就会一整屏的切换。

第一屏是用一个图片,其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。

这三屏左侧的图片展开方式不同,所以就更有炫酷的效果。
第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置。
第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置。
第四屏的三个图片是当页面显示时从中间到两边展开到正确的位置。

第一步:下载好jquery和fullpage插件,fullpage中包含css和js并引入。

 script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js" /script 
 link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css" 
 script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js" /script 

第二步:用html建立好元素:

 div class = "main" 
 div 
 img src="./images/page1.png" 
 /div 
 div 
 div class = "list" 
 img src = "./images/page2_1.png" 
 img src = "./images/page2_2.png" 
 img src = "./images/page2_3.png" 
 /div 
 img class = "text" src = "./images/page2_4.png" 
 img class = "bg" src = "./images/page2_5.png" 
 /div 
 div 
 div class = "list" 
 img src = "./images/page3_1.png" 
 img src = "./images/page3_2.png" 
 img src = "./images/page3_3.png" 
 /div 
 img class = "text" src = "./images/page3_4.png" 
 img class = "bg" src = "./images/page3_5.png" 
 /div 
 div 
 div class = "list" 
 img src = "./images/page4_1.png" 
 img src = "./images/page4_2.png" 
 img src = "./images/page4_3.png" 
 /div 
 img class = "text" src = "./images/page4_4.png" 
 img class = "bg" src = "./images/page4_5.png" 
 /div 
 /div 
 div id = "audioBox" 
 audio id = "audio" autoplay loop src= "./music/music.mp3" /audio 
 /div 

包含了四屏的内容和一个audio元素,用于播放音乐。

第三步:利用fullpage的js实现每一屏的背景颜色 ,并使用js实现音乐的暂停播放

//1.fullpage,由于有四屏,其颜色也一样
 $(".main").fullpage({
sectionsColor: ['#1bbc9b','#1bbc9b','#1bbc9b','#1bbc9b']
 //2.控制音频的播放
 var audioBox = document.getElementById('audioBox');
 var audio = document.getElementById("audio");
 audioBox.onclick = function(){
 if(audio.paused){
 audio.play();
 else
 audio.pause();

第四步:利用css进行布局:

 style type="text/css" 
 margin: 0;
 padding:0;
 //设置背景音乐的图标
 #audioBox{
 width: 45px;
 height: 45px;
 position: absolute;
 background: url(./images/music_on.png) no-repeat center;
 border-radius: 22px;
 top: 5%;
 right: 3%;
 cursor: pointer;
 //让每屏超出的都自动隐藏
 .section{
 overflow: hidden;
 /*设置第一屏的图片,因为第一屏也只有一个图片*/
 .page1 img{
 width: 50%;
 margin-left: 30%;
 /*从第二屏开始都包含一个 "page"] .list{
 margin-left: 5%;
 /*让左边的图片的宽度都为240px*/
 [class *= "page"] .list img{
 width: 240px;
 /*利用属性选择器,选出所有页的背景图片*/
 [class *= "page"] .bg{
 position: absolute;
 bottom: 5%;
 right: 5%;
 width: 30%;
 /*利用属性选择器,选择出所有页的文字图片*/
 [class *= "page"] .text{
 position: absolute;
 top: 10%;
 right: 5%;

通过第四步之后基本效果就已经完成了,但最后一点就是还没有给四屏的图片实现动画效果。

第五步:实现动画效果。

1.怎样判断当前滚动到了哪一屏?

因为fullpage会给当前页加一个active的class,所以利用class就可以判断处于当前页的时候触发动画。

2.实现第一屏的动画

第一屏主要是图片的淡入效果。
思路:通过改变opacity属性,结合transition来改变透明度,实现淡入的效果;

.page1 img{
 opacity: 0; /*初始状态为全透明*/
 /*加上供应商前缀,持续时间为1.5s*/
 -moz-transition: opacity 1.5s;
 -webkit-transition: opacity 1.5s;
/*当第一页显示的时候触发,当第一页时就会自动加上active类*/
 .page1.active img{
 opacity: 1;

3.实现第二屏的动画:

第二屏的动画,就是左侧的三个图片在页面显示时,从下到上依次滑进窗口。
核心思路 :使用transform:translateY 和transition配合实现;
transition是检测属性值变化
translateY平移

/*动画的完成时间为1s,初始位置三个图片都处于向下移动到1000像素,即移出屏幕外。*/
 .page2 .list img{
 transition:1s;
 transform: translateY(1000px);
 /*当第二屏触发时,图片回到原始位置*/
 .page2.active .list img{
 transform:translateY(0px);
/*利用结构化伪类找到每一个图片并设置延时,为了使动画更灵活*/
 .page2 .list img:nth-child(1){
 transition-delay: 0.5s;
 .page2 .list img:nth-child(2){
 transition-delay: 0.8s;
 .page2 .list img:nth-child(3){
 transition-delay: 1s;

4.实现第三屏的动画

有了translateY那么第三屏是向左右移动,必然会有translateX控制水平方向。首先初始状态让三张图片都重叠在最左侧,当触发动画时依次铺开,仿照第二屏的例子,很容易写出来‘

.page .list img{ 
/设置动画持续时间为1s,动画开始时延迟0.5s/ 
transition: 1s 0.5s; 

由于本屏的两个图片初始状态的位置都要叠加在最左侧的图片上,所以对于这两个图片分别设置它们的translateX

.page .list img:nth-child(2){ 
/向左移动了250px刚好与第一个重叠/ 
transform:translateX(-250px); 
.page .list img:nth-child(3){ 
/向左移动了500px刚好与第一个重叠/ 
transform:translateX(-500px); 
/设置触发时的动画,让所有的img归位/ 
.page3.active .list img{ 
transform:translateX(0px); 

5.设置第五屏的动画。

第五屏的动画就是左侧的三个图片先重叠在中间的图片上,触发后归位。
①.依照上面的思想利用tanslateX可以实现;

.page4 .list img{
 transition: 1s 0.5s;
 /*设置第一个和第三个的初始位置处于中间的位置上*/
 .page4 .list img:nth-child(1){
 transform:translateX(250px);
 .page4 .list img:nth-child(3){
 transform:translateX(-250px);
 /*触发时归位*/
 .page4.active .list img{
 transform:translateX(0px);

②.除了css3的transition和transform属性,还可以利用css3的动画:keyframes

.page4.active .list img:nth-child(1){
 transform:translateX(0px);
 -webkit-animation: 'flymove1' 1s ease-in 1; /*动画名、持续时间、更细粒度动画,重复次数*/
 .page4.active .list img:nth-child(3){
 transform:translateX(0px);
 -webkit-animation: 'flymove2' 1s ease-in 1;
 @-webkit-keyframes flymove1{
 0%{ transform: translateX(250px);}
 100%{ transform: translateX(0px);}
 @-webkit-keyframes flymove2{
 from{ transform: translateX(-250px);}
 to{ transform: translateX(0px);}

关于keyframes的参数的了解,可以查一下手册,熟悉一下就可以了。

通过上面的代码,一个炫酷的全屏滚动页面就完成了!

附上源代码:

 !DOCTYPE html 
 html 
 head 
 meta charset = "utf-8" / 
 title fullpage 实现全屏滚动 /title 
 script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js" /script 
 link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css" rel="external nofollow" rel="external nofollow" 
 script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js" /script 
 style type="text/css" 
 margin: 0;
 padding:0;
 #audioBox{
 width: 45px;
 height: 45px;
 position: absolute;
 background: url(./images/music_on.png) no-repeat center;
 border-radius: 22px;
 top: 5%;
 right: 3%;
 cursor: pointer;
 .section{
 overflow: hidden;
 /*设置第一屏的图片*/
 .page1 img{
 width: 50%;
 margin-left: 30%;

/*第一屏图片的动画 思路:通过改变opacity属性,结合transition来改变透明度,实现淡入的效果; .page1 img{ opacity: 0;/*初始状态为全透明*/ -moz-transition: opacity 1.5s; -webkit-transition: opacity 1.5s; /*当第一页显示的时候触发*/ .page1.active img{ opacity: 1; /*第二页的动画 核心思路 :使用transform:translateY 和transition配合实现; transition是检测属性值变化 translateY平移 .page2 .list img{ transition:1s; transform: translateY(1000px); .page2.active .list img{ transform:translateY(0px); .page2 .list img:nth-child(1){ transition-delay: 0.5s; .page2 .list img:nth-child(2){ transition-delay: 0.8s; .page2 .list img:nth-child(3){ transition-delay: 1s; /*设置第三页的动画*/ .page3 .list img{ transition: 1s 0.5s; .page3 .list img:nth-child(2){ transform:translateX(-250px); .page3 .list img:nth-child(3){ transform:translateX(-500px); .page3.active .list img{ transform:translateX(0px);
transform:translateX(0px); -webkit-animation: 'flymove1' 1s ease-in 1; /*动画名、持续时间、更细粒度动画,重复次数*/ .page4.active .list img:nth-child(3){ transform:translateX(0px); -webkit-animation: 'flymove2' 1s ease-in 1; @-webkit-keyframes flymove1{ 0%{ transform: translateX(250px);} 100%{ transform: translateX(0px);} @-webkit-keyframes flymove2{ from{ transform: translateX(-250px);} to{ transform: translateX(0px);} /style /head body div class = "main" div img src="./images/page1.png" /div div div class = "list" img src = "./images/page2_1.png" img src = "./images/page2_2.png" img src = "./images/page2_3.png" /div img class = "text" src = "./images/page2_4.png" img class = "bg" src = "./images/page2_5.png" /div div div class = "list" img src = "./images/page3_1.png" img src = "./images/page3_2.png" img src = "./images/page3_3.png" /div img class = "text" src = "./images/page3_4.png" img class = "bg" src = "./images/page3_5.png" /div div div class = "list" img src = "./images/page4_1.png" img src = "./images/page4_2.png" img src = "./images/page4_3.png" /div img class = "text" src = "./images/page4_4.png" img class = "bg" src = "./images/page4_5.png" /div /div div id = "audioBox" audio id = "audio" autoplay loop src= "./music/music.mp3" /audio /div script type="text/javascript" $(function(){ //1.fullpage $(".main").fullpage({ sectionsColor: ['#1bbc9b','#1bbc9b','#1bbc9b','#1bbc9b'] //2.控制音频的播放 var audioBox = document.getElementById('audioBox'); var audio = document.getElementById("audio"); audioBox.onclick = function(){ if(audio.paused){ audio.play(); else audio.pause(); /script /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

020-66889888