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

首先说一下fullpage，它是一个jquery的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。 总共有四屏的内容 当鼠标每次上下滑动时就会一整屏的切换。 第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。 这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。 第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置。 第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置。 第四屏的三个图片是当页面显示时从中间到两边展开到正确的位置。 第一步：下载好 在本文中，我们将探讨如何使用fullPage.js和CSS3来创建引人注目的全屏滚动效果。fullPage.js是一款基于jQuery的插件，它允许用户通过简单的向上或向下滚动鼠标来浏览网页的不同“屏幕”，每个屏幕都占据整个浏览器视口。这种效果常用于创建现代、互动式的网页设计，为用户提供流畅的浏览体验。 你需要下载并引入jQuery库以及fullPage.js插件的CSS和JS文件。在HTML文件中，确保正确地链接这些资源，例如： ```html <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结构，定义各个屏幕（section）和屏幕内的内容。在这个例子中，我们有四个屏幕（section），每个屏幕都包含不同的图片布局。例如： ```html <div class="main"> <div class="section page1"> <img src="./images/page1.png"> </div> <!-- 其他section --> </div> ``` 为了让全屏滚动效果生效，我们需要调用fullPage.js的API。在JavaScript中设置每个屏幕的颜色，并配置音乐播放功能： ```javascript $(document).ready(function() { $(".main").fullpage({ sectionsColor: ['#1bbc9b', '#1bbc9b', '#1bbc9b', '#1bbc9b'] }); var audioBox = document.getElementById('audioBox'); var audio = document.getElementById("audio"); audioBox.onclick = function() { if (audio.paused) { audio.play(); } else { audio.pause(); } }; }); ``` 然后，利用CSS3来实现屏幕之间的过渡动画。例如，可以利用`transition`属性来平滑地改变元素的样式，以及使用`transform`属性来控制元素的位移、旋转等效果。在不同的屏幕中，你可以通过`nth-child`选择器来分别定义不同图片的动画效果： ```css /* 假设.list内的图片 */ .list img { opacity: 0; transition: opacity 0.5s ease-in-out; } /* 对于第二屏 */ .section.page2 .list img:nth-child(1) { animation: slideUp 1s ease-in-out forwards; } .section.page2 .list img:nth-child(2), .section.page2 .list img:nth-child(3) { animation: slideUp 1s 0.5s ease-in-out forwards; } /* 对于第三屏 */ .section.page3 .list img:nth-child(1), .section.page3 .list img:nth-child(2), .section.page3 .list img:nth-child(3) { animation: slideLeft 1s 0.5s ease-in-out forwards; } /* 对于第四屏 */ .section.page4 .list img:nth-child(1) { animation: slideFromMiddle 1s 0.5s ease-in-out forwards; } .section.page4 .list img:nth-child(2), .section.page4 .list img:nth-child(3) { animation: slideFromMiddle 1s 1s ease-in-out forwards; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slideLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideFromMiddle { from { transform: translateX(50%); } to { transform: translateX(0); } } ``` 以上代码展示了如何使用fullPage.js和CSS3实现全屏滚动效果，同时结合动画让屏幕间的切换更富动态感。通过调整CSS3的动画时间和延迟，你可以定制适合项目需求的各种过渡效果。此外，还可以利用Webkit前缀支持旧版浏览器。这种技术在现代网页设计中非常常见，能够提升用户体验，使网站更加吸引人。