- 准备工作:
本实例需要用到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>
- 创建导航栏:
创建一个包含所有页面锚点的导航栏,使用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>
- 导航效果:
添加样式和交互效果,实现导航菜单的滑动效果。使用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技术站