全屏滚动的网页实现 - 基于 fullPage.js

前言

在一些网站中,你可能会看到一种特别的设计,那就是全屏滚动。当你滚动鼠标滚轮时,网页内容会以全屏的形式切换,带来非常酷炫的视觉效果。在本文中,我们将详解如何使用jQuery插件fullPage.js来实现全屏滚动的效果。

引入需要的库和插件

首先,我们需要引入 jQuery 和 fullPage.js 插件。在这段代码中,它们通过 <script> 标签从 CDN 链接中引入。我们还引入了一个可选的 jquery.easings.min.js 插件,这是为了在使用非 CSS3 的情况下提供更多的缓动效果。另一个引入的 scrolloverflow.min.js 插件则是在需要使用 scrollOverflow:true 选项时必须的。

xml 复制代码
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.js"></script>

初始化 fullPage.js

在页面加载完成后,我们调用 jQuery 的 $(function () {}) 方法,这是一个在 DOM 加载完毕后运行的函数。在这个函数中,我们调用 $("#root").fullpage() 来初始化 fullPage.js。

xml 复制代码
<script>
  $(function () {
    $("#root").fullpage();
    // 调用此方法进行初始化
  });
</script>

这行代码的作用是将 id 为 "root" 的元素(在这个例子中是一个 <div>)转化为全屏滚动的容器。

创建内容区域

接下来,我们在 HTML 中创建了四个 <div> 元素,它们都有一个共同的类名 "section"。这些 <div> 的内容会被 fullPage.js 识别为不同的全屏滚动区域。

xml 复制代码
<div id="root">
  <div class="section">
    <h3>第一屏</h3>
  </div>
  <div class="section">
    <h3>第二屏</h3>
  </div>
  <div class="section">
    <h3>第三屏</h3>
  </div>
  <div class="section">
    <h3>第四屏</h3>
  </div>
</div>

定制样式

最后,我们通过 CSS 定制了这些全屏滚动区域的样式。".section" 类使得每个区域都有相同的宽度和高度,而对 "#root>div:nth-child(n)" 的样式定义则给每个区域设置了不同的背景颜色。

xml 复制代码
<style>
  .section {
    height: 100vh;
    width: 100vw;
  }
  #root>div:nth-child(1){
      background-color: rgb(0, 200, 255);
  }

  #root>div:nth-child(2){
      background-color: rgb(155, 90, 90);
  }

  #root>div:nth-child(3){
      background-color: rgb(54, 17, 17);
  }
  #root>div:nth-child(4){
      background-color: rgb(197, 172, 172);
  }
</style>

到这里,我们的全屏滚动网站就创建完成了。只需在浏览器中打开这个 HTML 文件,然后滚动鼠标滚轮,就可以看到全屏滚动的效果啦~如果有误请指正

相关推荐
Java~~13 分钟前
山东大学软件学院项目实训-基于大模型的模拟面试系统-前端美化滚动条问题
前端
掘金安东尼24 分钟前
🧭 前端周刊第411期(2025年4月21日–27日)
前端·javascript·面试
喝养乐多长不高33 分钟前
详细PostMan的安装和基本使用方法
java·服务器·前端·网络协议·测试工具·https·postman
阿珊和她的猫1 小时前
React 与 Vue 的区别:你会选择哪个框架呢
前端·vue.js·react.js
尖椒土豆sss1 小时前
Nuxt3框架入门:第一个简单demo
前端·nuxt.js
浪裡遊1 小时前
前端高频面试题day2
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
Vue3 首款 3D 数字孪生编辑器 正式开源!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 78 期 - React Compiler RC、Trae MCP、pnpm 10.9...
前端·javascript·trae
神秘代码行者1 小时前
使用Hash和HTML5的History API实现前端路由
前端·html5