当前位置：首页 > news >正文

每日前端宝藏库 | fullPage.js [特殊字符]✨

news 2025/9/17 7:09:35

🌌 “一屏一世界，滑动即旅程。” —— 全屏滚动时代的视觉诗篇 📖💫

🎯 一句话介绍

fullPage.js 是一个 专为全屏滚动页面设计 的 JavaScript 库 🚀，只需几行代码，就能让你的网站实现 整屏切换、平滑滚动、导航指示、键盘控制 等酷炫交互，轻松打造 电影级视觉体验！🎬💖

🎨 适合：产品展示页、作品集、活动专题、品牌官网……
🎯 总之：要酷，更要沉浸！

🤔 为什么你需要它？

传统方案 ❌	fullPage.js ✅
手动监听 scroll 事件，逻辑复杂 😵	一行代码，自动处理滚动逻辑 ✅
滚动不精准，容易卡在半屏 🤐	强制整屏对齐，丝滑精准 ⚡
移动端兼容差 📱	支持触摸滑动、手势操作 ✋
缺少导航与状态反馈 🔍	自带侧边/顶部导航点 📍
动画效果单调 🎞️	支持 CSS3 动画、回调钩子，自由扩展 🧩

🚀 快速上手：3 步起飞！

Step 1️⃣：安装它！

npm install fullpage.js
# 或 yarn
yarn add fullpage.js

💡 也支持 CDN 引入（适合快速原型）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.js"></script>

Step 2️⃣：HTML 结构准备 🏗️

<div id="fullpage"><div class="section">Section 1</div><div class="section">Section 2</div><div class="section">Section 3</div><div class="section">Section 4</div>
</div>

✅ 每个 .section 就是一屏内容！🎯

Step 3️⃣：初始化 fullPage.js！✨

import fullpage from 'fullpage.js';new fullpage('#fullpage', {autoScrolling: true,navigation: true,                    // 📍 显示右侧圆点导航navigationTooltips: ['首页', '产品', '案例', '联系'],anchors: ['home', 'product', 'case', 'contact'],scrollBar: false,licenseKey: 'OPEN-SOURCE-GPLV3',     // 🆓 开源项目免费使用afterLoad: function(origin, destination, direction){console.log(`进入第 ${destination.index + 1} 屏`);}
});

🎉 效果：滑动/滚动鼠标，页面整屏切换！ ⏭️

💻 在线测试沙盒 🧪

👉 动手试试全屏滚动的魅力吧！✨

<!-- 模拟 HTML -->
<div id="fullpage"><div class="section" style="background:#f2f2f2; display:flex; align-items:center; justify-content:center; font-size:3em;">第一屏</div><div class="section" style="background:#4BBFC3; color:white; display:flex; align-items:center; justify-content:center; font-size:3em;">第二屏</div><div class="section" style="background:#7BAABE; color:white; display:flex; align-items:center; justify-content:center; font-size:3em;">第三屏</div><div class="section" style="background:#ccddff; display:flex; align-items:center; justify-content:center; font-size:3em;">第四屏</div>
</div><script>
// 模拟初始化
new fullpage('#fullpage', {autoScrolling: true,navigation: true,navigationTooltips: ['首页', '设计', '开发', '联系'],loopBottom: true,licenseKey: 'OPEN-SOURCE-GPLV3'
});
</script>

🔗 在线测试：

StackBlitz - fullPage.js 沙盒

🎨 核心特性一览 🌟

特性	说明	示例配置
`navigation: true`	显示右侧导航点 📍	✔️
`anchors: []`	锚点链接，支持 `#section1` 跳转 🔗	`['home', 'about']`
`autoScrolling: true`	自动整屏滚动 ⚡	✔️
`scrollBar: true`	显示滚动条，保留原生体验 📏	✔️
`sectionsColor: []`	每屏自定义背景色 🎨	`['#f2f2f2', '#4BBFC3']`
`keyboardScrolling: true`	支持键盘上下键控制 ⌨️	✔️
`responsiveWidth: 768`	屏幕小于 768px 时退出全屏模式 📱	✔️

🧩 高级玩法 🎮

1️⃣ 水平滑块（横向轮播）

new fullpage('#fullpage', {sections: [{// 第一屏内含多个横向 sectionslides: [{ src: 'slide1.html' },{ src: 'slide2.html' }]}]
});

✅ 实现 “屏中屏”横向滑动，适合产品细节展示！📱➡️

2️⃣ 回调函数控制动画

afterLoad: function(origin, destination) {const section = destination.item;anime({targets: section.querySelector('.title'),translateY: [50, 0],opacity: [0, 1],duration: 1000,easing: 'easeOutExpo'});
}

✅ 进入页面时，标题“飞入”效果！🚀

📊 适用场景 🎯

🎨 产品发布会页面 🚀
🖼️ 设计师/开发者作品集 💼
📢 品牌活动专题页 🎉
🏢 企业官网首页 🏢
🎮 交互式故事叙述 📚

🏁 总结：fullPage.js 是你的“全屏导演”！🎬💫

评分	内容
🚀 易用性	⭐⭐⭐⭐⭐
🎨 视觉冲击力	⭐⭐⭐⭐⭐
📦 体积	⭐⭐⭐☆☆
📱 移动端体验	⭐⭐⭐⭐☆
💡 推荐指数	🔥🔥🔥🔥🔥