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日

相关文章

  • jQuery 选择器(61种)整理总结

    jQuery 选择器(61种)整理总结 什么是jQuery选择器 在jQuery中,选择器是用来选择HTML元素的一种方法。jQuery允许你使用CSS选择器,DOM元素和自定义的选择器来选择DOM元素。 基本选择器 基本选择器用于选择指定的HTML元素。jQuery提供了以下基本选择器: 1. 元素选择器 元素选择器选取特定类型的元素。语法为: $(ele…

    css 2023年6月10日
    00
  • 移动端网页解决CSS的active伪类无效的方法

    移动端网页解决CSS的active伪类无效的方法主要是使用JS来实现。 方法一:使用touchstart和touchend事件 当移动端用户点击屏幕时,会先触发touchstart事件,当手指从屏幕上离开时会触发touchend事件。我们可以利用这两个事件来实现CSS的:active伪类的效果。 <button id="testBtn&quo…

    css 2023年6月10日
    00
  • CSS3实现DIV圆角效果完整代码

    下面我将详细讲解“CSS3实现DIV圆角效果完整代码”的完整攻略。 一、什么是DIV圆角效果? DIV圆角效果是指将DIV元素的角落部分变为圆形或半圆形的效果。在网页设计中,DIV圆角效果常常被用作页面的美化和排版,能够使网页看起来更加优雅和舒适。 二、CSS3实现DIV圆角效果的完整代码 在CSS3中,我们可以使用border-radius属性来实现DIV…

    css 2023年6月10日
    00
  • Bootstrap图片轮播组件Carousel使用方法详解

    Bootstrap图片轮播组件Carousel使用方法详解 Bootstrap是一款目前非常流行的前端开发框架,其中的Carousel(图片轮播)组件可以用于网页展示轮播图或广告图等。接下来详细讲述如何使用Bootstrap中的Carousel组件,包含从起步到实现的完整攻略。 第一步:在HTML文件中引入Bootstrap 首先需要在HTML文件中引入Bo…

    css 2023年6月11日
    00
  • 详解如何自定义CSS滚动条的样式

    自定义 CSS 滚动条样式是前端开发中常用的技巧之一,可以用于美化网页滚动条的外观。以下是关于如何自定义 CSS 滚动条样式的完整攻略。 步骤一:创建 HTML 结构 首先,需要在 HTML 文件中创建一个容器元素,用于包含需要自定义滚动条的内容。以下是一个示例: <div class="scrollbar"> <div…

    css 2023年5月18日
    00
  • JavaScript实现div的鼠标拖拽效果

    对于 “JavaScript实现div的鼠标拖拽效果” 这个问题,我将分为以下几个部分来进行详细讲解: 实现思路 相关API及代码示例 注意事项和遇到的问题及解决方法 1. 实现思路 实现鼠标拖拽的原理是:当鼠标在可拖拽元素上按下时,我们需要记录下相应的鼠标位置以及元素的位置信息,并在后续鼠标移动时进行计算,以实现元素跟随鼠标移动的效果,然后在鼠标抬起时,停…

    css 2023年6月10日
    00
  • phpexcel导出excel的颜色和网页中的颜色显示不一致

    下面是针对“phpexcel导出excel的颜色和网页中的颜色显示不一致”的攻略: 问题描述 PHPExcel 是一个基于 PHP 的电子表格处理库,可以方便地实现导入导出 Excel 文件的功能。在使用 PHPExcel 导出 Excel 文件时,部分开发者可能会遇到颜色在导出后与网页中显示不一致的问题。 解决方法 1. 颜色码规范 首先,需要了解 Exc…

    css 2023年6月9日
    00
  • CSS实现body背景层高于块元素的方法

    将body的背景层设置为高于块元素,可以使用以下两种方法: 方法一:使用伪元素 伪元素可以在body前面添加一层覆盖层,从而实现body背景层高于其他块元素。 首先,需要在CSS中添加以下样式: body { position: relative; z-index: 1; /* 将body的层级设为1,确保该元素在页面中的层级最高 */ } body::be…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部