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

Vue3 配合 fullPage.js 打造高效全屏滚动网页

article 2025/4/2 20:53:44

引言

在现代网页设计中，整屏滚动（Full-page Scrolling）已成为展示内容的一种流行方式。通过将内容分成若干个全屏页面，并配合流畅的过渡动画，可以为用户带来身临其境的浏览体验。本文将介绍如何使用 fullPage.js 插件来创建一个专业的整屏滚动网站。

 效果预览

        

插件介绍

fullPage.js 是一个简单易用且功能强大的 JavaScript 库

        官方网站：中文文档 fullPage.js

主要特点：

  • 支持全屏滚动
  • 添加幻灯片
  • 延迟加载
  • 自动播放
  • 响应式设计
  • 丰富的回调函数

基础设置

1. 引入必要文件

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css">

<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script>

2. HTML 结构 

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <!-- 更多section... -->
</div>

3. 初始化配置

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    navigation: true,
    navigationPosition: 'right',
    scrollingSpeed: 700,
    afterLoad: function(origin, destination, direction) {
        // 页面加载后的回调
    }
});

内容设计与实现

1. 动画系统设计

.animate {
    opacity: 0;
    transition: all 1s ease;
}

.animate.fade-up {
    transform: translateY(50px);
}

.animate.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

2. 内容模块划分

  1. Hero 区域
  2. 数据统计
  3. 产品展示
  4. 服务流程
  5. 客户评价
  6. 联系方式

3. 动画控制

const animatedSections = new Set();

// 在 afterLoad 回调中控制动画
afterLoad: function(origin, destination, direction) {
    const currentSection = destination.item;
    const sectionIndex = destination.index;

    if (!animatedSections.has(sectionIndex)) {
        const animateElements = currentSection.querySelectorAll('.animate');
        
        animateElements.forEach((el, index) => {
            setTimeout(() => {
                el.classList.add('active');
            }, index * 200);
        });

        animatedSections.add(sectionIndex);
    }
}

实现建议

  1. 性能优化
    • 图片延迟加载
    • 合理使用动画
    • 控制页面大小
  2. 响应式设计
    • 使用弹性布局
    • 适配不同设备
    • 移动端优化
  3. 用户体验
    • 添加导航提示
    • 控制滚动速度
    • 优化过渡效果
  4. 内容组织
    • 逻辑性强
    • 层次分明
    • 重点突出
  5. 动画效果
    • 适度使用
    • 确保流畅
    • 避免过度

常见问题解决

  1. 滚动卡顿
    1. 减少页面元素
    2. 优化动画效果
    3. 调整滚动速度
  2. 移动端适配
    1. 使用响应式设计
    2. 调整内容布局
    3. 优化触摸事件
  3. 内容溢出
    1. 控制内容量
    2. 使用滚动容器
    3. 优化布局结构

总结

fullPage.js 为我们提供了一个强大的工具来创建整屏滚动网站。通过合理的内容组织、精心的动画设计和细致的用户体验优化，我们可以打造出既专业又吸引人的网站。关键点在于：

  1. 合理规划内容结构
  2. 设计适当的动画效果
  3. 注重用户体验优化
  4. 确保性能和响应式
  5. 保持代码的可维护性

通过本文的实践，相信你已经掌握了使用 fullPage.js 创建整屏滚动网站的基本技能。记住，好的网站不仅要看起来漂亮，更要注重实用性和用户体验。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整屏滚动展示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .section {
            color: #333;
            background: #fff;
        }

        /* 通用动画类 */
        .animate {
            opacity: 0;
            transition: all 1s ease;
        }

        .animate.fade-up {
            transform: translateY(50px);
        }

        .animate.fade-left {
            transform: translateX(-50px);
        }

        .animate.fade-right {
            transform: translateX(50px);
        }

        .animate.fade-scale {
            transform: scale(0.8);
        }

        /* 激活动画 */
        .animate.active {
            opacity: 1;
            transform: translate(0) scale(1);
        }

        /* 第一屏：Hero区域 */
        #section1 {
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

        .hero-content {
            text-align: center;
            color: #fff;
            padding: 0 20px;
        }

        .hero-content h1 {
            font-size: 4em;
            margin-bottom: 20px;
        }

        .hero-content p {
            font-size: 1.5em;
            margin-bottom: 30px;
        }

        /* 第二屏：产品特性 */
        .features-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            padding: 0 10%;
        }

        .feature-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            text-align: center;
            flex: 1;
        }

        /* 第三屏：关于我们 */
        .about-container {
            display: flex;
            align-items: center;
            gap: 50px;
            padding: 0 10%;
        }

        .about-image {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
        }

        .about-image img {
            width: 100%;
            height: auto;
        }

        .about-content {
            flex: 1;
        }

        /* 第四屏：团队展示 */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            padding: 0 10%;
        }

        .team-member {
            text-align: center;
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .team-member img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-bottom: 15px;
        }

        /* 新增：数据统计区域样式 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            padding: 0 10%;
            text-align: center;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }

        .stat-number {
            font-size: 3em;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        /* 新增：产品展示区域样式 */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            padding: 0 10%;
        }

        .product-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .product-info {
            padding: 20px;
        }

        /* 新增：服务流程样式 */
        .process-timeline {
            display: flex;
            justify-content: space-between;
            padding: 0 10%;
            position: relative;
        }

        .process-step {
            flex: 1;
            text-align: center;
            position: relative;
            padding: 20px;
        }

        .step-number {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 1.5em;
        }

        /* 新增：客户评价样式 */
        .testimonials-container {
            display: flex;
            gap: 30px;
            padding: 0 10%;
        }

        .testimonial-card {
            flex: 1;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .client-info {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }

        .client-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
        }

        /* 新增：联系我们样式 */
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            padding: 0 10%;
        }

        .contact-form {
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-top: 5px;
        }

        /* 新增：合作伙伴样式 */
        .partners-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            padding: 0 10%;
        }

        .partner-logo {
            background: white;
            padding: 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div id="fullpage">
        <!-- 第一屏：Hero区域 -->
        <div class="section" id="section1">
            <div class="hero-content">
                <h1 class="animate fade-up">创新科技</h1>
                <p class="animate fade-up">引领未来发展的先驱者</p>
                <button class="animate fade-up">了解更多</button>
            </div>
        </div>

        <!-- 新增：数据统计屏 -->
        <div class="section" id="section2">
            <h2 class="section-title animate fade-up">我们的成就</h2>
            <div class="stats-container">
                <div class="stat-item animate fade-up">
                    <div class="stat-number">1000+</div>
                    <div class="stat-label">服务客户</div>
                </div>
                <div class="stat-item animate fade-up">
                    <div class="stat-number">50+</div>
                    <div class="stat-label">合作伙伴</div>
                </div>
                <div class="stat-item animate fade-up">
                    <div class="stat-number">200+</div>
                    <div class="stat-label">完成项目</div>
                </div>
                <div class="stat-item animate fade-up">
                    <div class="stat-number">98%</div>
                    <div class="stat-label">客户满意度</div>
                </div>
            </div>
        </div>

        <!-- 新增：产品展示屏 -->
        <div class="section" id="section3">
            <h2 class="section-title animate fade-up">产品展示</h2>
            <div class="products-grid">
                <div class="product-card animate fade-left">
                    <img src="https://picsum.photos/400/200" class="product-image" alt="产品1">
                    <div class="product-info">
                        <h3>智能产品 A</h3>
                        <p>革命性的智能解决方案，为您提供极致体验</p>
                    </div>
                </div>
                <div class="product-card animate fade-up">
                    <img src="https://picsum.photos/401/200" class="product-image" alt="产品2">
                    <div class="product-info">
                        <h3>智能产品 B</h3>
                        <p>引领行业标准的创新科技产品</p>
                    </div>
                </div>
                <div class="product-card animate fade-right">
                    <img src="https://picsum.photos/402/200" class="product-image" alt="产品3">
                    <div class="product-info">
                        <h3>智能产品 C</h3>
                        <p>为企业定制的专业级解决方案</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增：服务流程屏 -->
        <div class="section" id="section4">
            <h2 class="section-title animate fade-up">服务流程</h2>
            <div class="process-timeline">
                <div class="process-step animate fade-up">
                    <div class="step-number">1</div>
                    <h3>需求分析</h3>
                    <p>深入了解客户需求，制定个性化方案</p>
                </div>
                <div class="process-step animate fade-up">
                    <div class="step-number">2</div>
                    <h3>方案设计</h3>
                    <p>专业团队设计最优解决方案</p>
                </div>
                <div class="process-step animate fade-up">
                    <div class="step-number">3</div>
                    <h3>开发实施</h3>
                    <p>高效执行，确保项目质量</p>
                </div>
                <div class="process-step animate fade-up">
                    <div class="step-number">4</div>
                    <h3>售后服务</h3>
                    <p>持续支持，及时响应</p>
                </div>
            </div>
        </div>

        <!-- 新增：客户评价屏 -->
        <div class="section" id="section5">
            <h2 class="section-title animate fade-up">客户评价</h2>
            <div class="testimonials-container">
                <div class="testimonial-card animate fade-left">
                    <p>"使用他们的产品后，我们的工作效率提升了30%以上。"</p>
                    <div class="client-info">
                        <img src="https://picsum.photos/60/60" class="client-avatar" alt="客户1">
                        <div>
                            <h4>前端切图仔001</h4>
                            <p>科技公司 CEO</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card animate fade-up">
                    <p>"专业的团队，优质的服务，是值得信赖的长期合作伙伴。"</p>
                    <div class="client-info">
                        <img src="https://picsum.photos/61/61" class="client-avatar" alt="客户2">
                        <div>
                            <h4>前端切图仔001</h4>
                            <p>互联网公司 CTO</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card animate fade-right">
                    <p>"他们的创新解决方案帮助我们解决了长期困扰的问题。"</p>
                    <div class="client-info">
                        <img src="https://picsum.photos/62/62" class="client-avatar" alt="客户3">
                        <div>
                            <h4>前端切图仔001</h4>
                            <p>制造业 总监</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增：联系我们屏 -->
        <div class="section" id="section6">
            <div class="contact-container">
                <div class="contact-info animate fade-left">
                    <h2>联系我们</h2>
                    <p>地址：北京市*******</p>
                    <p>电话：010-12345678</p>
                    <p>邮箱：contact@example.com</p>
                </div>
                <div class="contact-form animate fade-right">
                    <h3>发送消息</h3>
                    <div class="form-group">
                        <input type="text" placeholder="您的姓名">
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="您的邮箱">
                    </div>
                    <div class="form-group">
                        <textarea placeholder="您的留言" rows="4"></textarea>
                    </div>
                    <button class="submit-btn">发送</button>
                </div>
            </div>
        </div>

        <!-- 新增：合作伙伴屏 -->
        <div class="section" id="section7">
            <h2 class="section-title animate fade-up">合作伙伴</h2>
            <div class="partners-grid">
                <div class="partner-logo animate fade-scale">
                    <img src="https://picsum.photos/100/50" alt="合作伙伴1">
                </div>
                <div class="partner-logo animate fade-scale">
                    <img src="https://picsum.photos/101/50" alt="合作伙伴2">
                </div>
                <div class="partner-logo animate fade-scale">
                    <img src="https://picsum.photos/102/50" alt="合作伙伴3">
                </div>
                <div class="partner-logo animate fade-scale">
                    <img src="https://picsum.photos/103/50" alt="合作伙伴4">
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script>
    <script>
        // 记录已经执行过动画的部分
        const animatedSections = new Set();

        new fullpage('#fullpage', {
            autoScrolling: true,
            scrollHorizontally: true,
            navigation: true,
            navigationPosition: 'right',
            scrollingSpeed: 700,

            // 滚动到新页面后触发动画
            afterLoad: function(origin, destination, direction) {
                const currentSection = destination.item;
                const sectionIndex = destination.index;

                // 如果该部分没有执行过动画
                if (!animatedSections.has(sectionIndex)) {
                    // 获取当前部分的所有需要动画的元素
                    const animateElements = currentSection.querySelectorAll('.animate');
                    
                    // 为每个元素添加动画类
                    animateElements.forEach((el, index) => {
                        // 添加延迟，实现错落动画效果
                        setTimeout(() => {
                            el.classList.add('active');
                        }, index * 200);
                    });

                    // 记录该部分已执行动画
                    animatedSections.add(sectionIndex);
                }
            }
        });
    </script>
</body>
</html>


http://www.kler.cn/a/614311.html

相关文章：

  • spring security认证流程分析
  • 对内核fork进程中写时复制的理解记录
  • 【Linux笔记】进程间通信——匿名管道||进程池
  • 智能仪表板DevExpress Dashboard v24.2新版亮点：支持.NET 9
  • 管理Visual Studio配置文件（使用Azure DevOps开发，免费GIT托管）
  • OpenAI API - 快速入门开发
  • 使用Python的pytesseract进行网站模拟登录的脚本，主要针对古诗文网（gushiwen.cn）的登录功能。
  • 图论问题集合
  • 加载MiniLM-L12-v2模型及知识库，调用Deepseek进行问答
  • 【Hysteria】部署+测试
  • 虚拟机docker配置ES
  • Docker：ERROR [internal] load metadata for docker.io/library/java:8-alpine问题解决
  • UDS故障码(DTC)SAE格式和HEX相互转换公式
  • B3647 【模板】Floyd
  • ubuntu 安装mysql
  • 【计算机网络】网络原理
  • 智能路由系统-信息泄露漏洞挖掘
  • 第30周Java分布式入门 ThreadLocal
  • Tomcat深度解析：Java Web服务的核心引擎
  • Qwen-0.5b linux部署