fullPage.js和CSS3实现全屏滚动效果

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了fullPage.js和CSS3实现全屏滚动效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

总共有四屏的内容

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

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

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

第一步：

下载好jquery和fullpage插件，fullpage中包含css和js并引入。

第二步：

用html建立好元素：

<div class="jb51code">
<pre class="brush:xhtml;">
<div class = "main">

<div class="section page1">
<img src="./images/page1.png">

<div class="section page4"&gt;
<div class = "list"&gt;
  <img src = "./images/page4_1.png"&gt;
  <img src = "./images/page4_2.png"&gt;
  <img src = "./images/page4_3.png"&gt;
</div>
  <img class = "text" src = "./images/page4_4.png"&gt;
  <img class = "bg" src = "./images/page4_5.png"&gt;
dioBox"> dio id = "audio" autoplay loop src= "./music/music.mp3">

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

第三步：

利用fullpage的js实现每一屏的背景颜色 ，并使用js实现音乐的暂停播放

//2.控制音频的播放 var au<a href="/tag/dio/" target="_blank" class="keywords">dio</a><a href="/tag/Box/" target="_blank" class="keywords">Box</a> = document.getElementById('au<a href="/tag/dio/" target="_blank" class="keywords">dio</a><a href="/tag/Box/" target="_blank" class="keywords">Box</a>'); var au<a href="/tag/dio/" target="_blank" class="keywords">dio</a> = document.getElementById("au<a href="/tag/dio/" target="_blank" class="keywords">dio</a>"); au<a href="/tag/dio/" target="_blank" class="keywords">dio</a><a href="/tag/Box/" target="_blank" class="keywords">Box</a>.onclick = function(){ if(au<a href="/tag/dio/" target="_blank" class="keywords">dio</a>.paused){ au<a href="/tag/dio/" target="_blank" class="keywords">dio</a>.play(); } else { au<a href="/tag/dio/" target="_blank" class="keywords">dio</a>.pause(); }

}

第四步：

利用css进行布局：

//设置背景音乐的图标

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%;
}

/从第二屏开始都包含一个class=list的元素块，设置其距离左侧的距离/
[class *= "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来改变透明度，实现淡入的效果；

加上供应商前缀，持续时间为1.5s*/ -moz-transition: opacity 1.5s; -webkit-transition: opacity 1.5s; }

/当第一页显示的时候触发,当第一页时就会自动加上active类/
.page1.active img{
opacity: 1;
}

3.实现第二屏的动画：

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

图片都处于向下移动到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控制水平方向。首先初始状态让三张图片都重叠在最左侧，当触发动画时依次铺开，仿照第二屏的例子，很容易写出来‘

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

.page .list img:nth-child(3){
/向左移动了500px刚好与第一个重叠/
transform:translateX(-500px);
}

/设置触发时的动画，让所有的img归位/
.page3.active .list img{
transform:translateX(0px);
}

5.设置第五屏的动画。

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

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

次数*/ }

.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的参数的了解，可以查一下手册，熟悉一下就可以了。

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

附上源代码：

fullpage 实现全屏滚动

<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%;
}

[class *= "page"] .list{
margin-left: 5%;
}

[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%;
}

/第一屏图片的动画
思路:通过改变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);
}

/设置第四页的动画/
/*.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);
}*/

.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);}
}

<div class = "main">

<div class="section page1">
<img src="./images/page1.png">

  <img class = "text" src = "./images/page2_4.png"&gt;
  <img class = "bg" src = "./images/page2_5.png"&gt;
<div class="section page4"&gt;
<div class = "list"&gt;
  <img src = "./images/page4_1.png"&gt;
  <img src = "./images/page4_2.png"&gt;
  <img src = "./images/page4_3.png"&gt;
</div>
  <img class = "text" src = "./images/page4_4.png"&gt;
  <img class = "bg" src = "./images/page4_5.png"&gt;
dioBox"> dio id = "audio" autoplay loop src= "./music/music.mp3">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

CSS3全屏滚动

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作