jQuery实现带滚动导航效果的全屏滚动相册实例

  1. 准备工作:
    本实例需要用到jQuery、fullpage.js和TweenMax.js,所以在开始之前要确保已经引入了这些库文件。
<head>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullPage.min.js"></script>
    <script src="//cdn.bootcss.com/gsap/1.20.4/TweenMax.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullPage.min.css">
</head>
  1. 创建导航栏:
    创建一个包含所有页面锚点的导航栏,使用fullpage.js进行滚动切换。
<body>
    <div class="navbar">
        <ul>
            <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
            <li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
            <li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
            <li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
            <li data-menuanchor="page5"><a href="#page5">Page 5</a></li>
        </ul>
    </div>
    <div id="fullpage">
        <div class="section page1" data-anchor="page1">Page 1</div>
        <div class="section page2" data-anchor="page2">Page 2</div>
        <div class="section page3" data-anchor="page3">Page 3</div>
        <div class="section page4" data-anchor="page4">Page 4</div>
        <div class="section page5" data-anchor="page5">Page 5</div>
    </div>
</body>

<script>
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['page1', 'page2', 'page3', 'page4', 'page5']
        });
    });
</script>
  1. 导航效果:
    添加样式和交互效果,实现导航菜单的滑动效果。使用TweenMax.js库为导航添加动画。
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    background-color: rgba(0,0,0,0.7);
    transition: background-color 0.5s ease;
}

.navbar.active {
    background-color: rgba(0,0,0,0.4);
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.navbar ul li {
    display: inline-block;
    margin-right: 30px;
    padding: 0 10px;
    cursor: pointer;
}

.navbar ul li.active {
    color: #fff;
    border-bottom: 2px solid #fff;
}

.navbar ul li a {
    color: #fff;
    text-decoration: none;
}

.navbar ul li a:hover {
    color: #ED6B64;
}

.navbar .line {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 3px;
    width: 50px;
    background-color: #ED6B64;
    transform: translateX(-50%);
}

.navbar ul li.active .line {
    width: 100%;
    transition: width 0.5s ease;
}

.navbar ul li:hover .line {
    width: 100%;
    transition: width 0.5s ease;
}

.active .line {
    width: 100%;
}
$(document).ready(function() {
    var $sections = $('.section');
    var $nav = $('.navbar ul');

    $(window).on('scroll', function() {
        var cur_pos = $(this).scrollTop();

        $sections.each(function() {
            var top = $(this).offset().top - 100;
            var bottom = top + $(this).outerHeight();

            if (cur_pos >= top && cur_pos <= bottom) {
                $nav.find('li').removeClass('active');
                $sections.removeClass('active');

                $(this).addClass('active');
                $nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');
            }
        });
    });

    $nav.on('click', 'a', function(e) {
        e.preventDefault();
        var id = $(this).attr('href');

        $('html, body').animate({
            scrollTop: $(id).offset().top - 50
        }, 500);
    });

    var $line = $('<div>', { class: 'line' });

    $line.appendTo($nav);

    var active_nav = $nav.find('li.active');

    $line.css({
        'left': active_nav.position().left,
        'width': active_nav.outerWidth()
    });

    $nav.find('li').hover(function() {
        $line.css({
            'left': $(this).position().left,
            'width': $(this).outerWidth()
        });
    }, function() {
        $line.css({
            'left': active_nav.position().left,
            'width': active_nav.outerWidth()
        });
    });

    TweenMax.to('.navbar', 0.5, {
        backgroundColor: 'rgba(0,0,0,0.4)'
    });

    TweenMax.staggerFrom('.navbar li', 0.5, {
        opacity: 0,
        y: 30,
        delay: 0.2,
        ease: Power3.easeOut
    }, 0.1);
});

至此,就完成了带滚动导航效果的全屏滚动相册实例,效果如下:https://codepen.io/miccjiang/pen/RmgMPv

示例1:可以通过修改css中的相关样式调整导航菜单的外观,例如背景颜色、字体颜色等。示例代码如下:

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    /* 修改 */
    background-color: rgba(255,255,255,0.7);
    transition: background-color 0.5s ease;
}

.navbar.active {
    /* 修改 */
    background-color: rgba(255,255,255,0.4);
}

.navbar ul li a {
    /* 修改 */
    color: #ED6B64;
    text-decoration: none;
}

.navbar ul li a:hover {
    /* 修改 */
    color: #333;
}

示例2:可以在滚动到某个页面时添加不同的动画效果。例如,在滚动到第2页时,页面中的图片逐渐从下方移入;在滚动到第3页时,页面中的文字逐渐透明。示例代码如下:

$(window).on('scroll', function() {
    var cur_pos = $(this).scrollTop();

    $sections.each(function() {
        var top = $(this).offset().top - 100;
        var bottom = top + $(this).outerHeight();

        if (cur_pos >= top && cur_pos <= bottom) {
            $nav.find('li').removeClass('active');
            $sections.removeClass('active');

            $(this).addClass('active');
            $nav.find('a[href="#'+$(this).attr('id')+'"]').parent().addClass('active');

            /* 修改 */
            if ($(this).hasClass('page2')) {
                TweenMax.staggerFrom('.page2 img', 1, {
                    opacity: 0,
                    y: 30,
                    ease: Power3.easeOut
                }, 0.1);   
            } else if ($(this).hasClass('page3')) {
                TweenMax.staggerTo('.page3 h1, .page3 p', 1, {
                    opacity: 0,
                    ease: Power3.easeOut
                }, 0.1);               
            }
        }
    });
});

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery实现带滚动导航效果的全屏滚动相册实例 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 详解CSS故障艺术

    详解CSS故障艺术攻略 简介 《详解CSS故障艺术》一书讲述了许多关于CSS的奇奇怪怪的现象,通过本书的学习,你可以更好地了解CSS,并且可以进行更加灵活且高效的编码。 攻略 熟悉CSS属性 首先,我们需要掌握一些CSS属性。CSS属性是CSS的基础,熟练掌握这些属性可以让你更好地应对各种CSS故障。 例如,display属性可以用来控制元素的显示方式。po…

    css 2023年6月10日
    00
  • VsCode插件整理(小结)

    VsCode插件整理(小结) Visual Studio Code是一款强大的跨平台代码编辑器,拥有丰富的插件生态系统。这些插件可以帮助开发人员更高效地编写代码和管理项目。在这篇文章中,我们将整理一些常用的VsCode插件,包括它们的功能、使用方法和示例。 插件列表 在这里,我们将列举几个常用的VsCode插件,并给出它们的详细介绍。 1. Bracket …

    css 2023年6月9日
    00
  • VSCode开发UNI-APP 配置教程及插件

    VSCode开发UNI-APP 配置教程及插件 简介 UNI-APP 是使用 Vue.js 开发跨平台应用程序的前端解决方案之一,同时也是目前最为流行的跨平台解决方案之一。本教程将介绍如何在 VSCode 中进行 UNI-APP 开发的相关配置,并介绍几款常用插件。 环境准备 在开始配置之前,需要安装 VSCode 并确保在本地安装了 node.js 和 n…

    css 2023年6月9日
    00
  • 浅谈解决space-evenly兼容性问题的两种方法

    浅谈解决space-evenly兼容性问题的两种方法 什么是space-evenly space-evenly是CSS中的一个justify-content属性值,用于对齐元素,使元素在容器中均匀分布,并且元素与容器的边缘之间有相同的间隔。 兼容性问题 虽然space-evenly能够方便地实现元素的均匀分布,但是它的兼容性却存在问题。在IE浏览器中,spa…

    css 2023年6月10日
    00
  • CSS 选择器浅谈

    CSS 选择器浅谈 CSS 选择器是指在样式表中使用的语法,用于选择 HTML 或 XML 文档中的特定元素,并将样式应用于这些元素。在本篇文章中,我们将深入探讨 CSS 选择器的各种类型,以及如何使用它们来选择不同的 HTML 元素。 基础选择器 元素选择器 元素选择器是 CSS 中最简单的选择器之一,也是最常用的。它可以通过元素名称直接选取特定的 HTM…

    css 2023年6月9日
    00
  • 解决margin 外边距合并问题

    解决margin外边距合并问题的方法有以下几种: 1. 使用padding 可以将容器的外边距改为内边距,这样避免了外边距的合并问题。例如: <div class="container"> <div class="box"></div> </div> <style&…

    css 2023年6月9日
    00
  • JavaScript改变HTML元素的样式改变CSS及元素属性

    JavaScript可以用来操作HTML元素,这包括改变元素的样式以及元素的属性。我们可以使用JavaScript来动态地改变网页的展示效果和交互性。下面是改变HTML元素的样式和属性的完整攻略。 改变HTML元素的样式 通过JavaScript设置CSS样式 可以使用JavaScript代码来操控CSS样式,以改变HTML元素的外观和表现。JavaScri…

    css 2023年6月9日
    00
  • Flask FastCGI(处理Web请求)使用方法详解

    Flask是一款轻量级的Web应用框架,可以用于快速开发Web应用。其中,FCGI是一种处理Web请求的协议,它在承载Web服务器和应用程序之间,提供了可靠的通讯机制。 在实际应用中,我们可以使用Flask FastCGI来将Flask应用部署在Web服务器上,然后通过FastCGI协议与Web服务器进行通讯。 本文将介绍Flask FastCGI的使用方法…

    Flask 2023年3月13日
    00
合作推广
合作推广
分享本页
返回顶部