先说全版。 它是一个jquery插件。 用于上下滑动键盘，也可手动切换上一屏或下一屏。 确实是一些高端疗效的好插件。 。 首先给大家展示一下基本的疗效图。
总共有四个屏幕
鼠标每次上下滑动，整个屏幕都会切换。
第一个屏幕使用一张图片，其他三个屏幕由右侧三张图片和两侧两张图片组成。
三个屏幕右侧的图片有着不同的展开形式，所以更加的眼花缭乱。
页面显示时，第二屏上的三张图片从下到上的位置是正确的。
页面显示时，第三屏上的三张图片从左到右展开到正确的位置。
页面显示时css3 左右滑动效果，第四屏的三幅图像从中间向两侧展开至正确位置。
第1步：下载jquery和fullpage插件。 fullpage包含css和js并导入它们。
第 2 步：使用 html 构建元素：
包含四个内容屏幕和一个用于播放音乐的音频元素。
第三步：用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布局：
82f09bb013f5b29766b0b0579b81af7d
*{
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=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类，因此通过使用该类确定当前页面时即可触发动画。
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是衡量属性值的变化
翻译Y翻译
/*动画的完成时间为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、设置第五屏的动画。
第五屏的动画是右边的三张图片先叠加在中间的图片上css3 左右滑动效果，触发后又回到原来的位置。
①. 根据之前的思路，可以借助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的动画：关键帧
.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);}
}
对于关键帧参数的了解，可以查看指南并熟悉一下。
通过前面的代码，一个炫丽的全屏滚动页面就完成了！
附上源码：
fullpage 实现全屏滚动 *{ 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);} }$(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(); } } });
以上就是本文的全部内容。 希望对您的学习有所帮助，也希望您多多支持脚本之家。
发表评论