滚动上带有过渡徽标的导航菜单
Nav menu with transition logo on scroll
我正在尝试获取徽标以更改滚动状态。
(示例:www.digitalblb.com)
它应该如何工作;
1. 大Logo原来显示
- 滚动更改为
2. 迷你标志
- 旋转过渡效果为 360'
header.html
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to image_tag("biglogo-160x80.png", alt: "BigLogo"), root_url,class:"menu__biglogo" %>
<%= link_to image_tag("minilogo.png", alt: "MiniLogo"), root_url, class:"menu__minilogo" %>
</div>
CSS
/* 过渡标志*/
.menu__minilogo{
opacity: 1;
visibility: visible;
margin-left: 60px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.menu__biglogo{
width: 220px;
overflow: hidden;
}
JS
$(document).ready(function(){
var logo = $(".navbar-header");
logo.find(".menu__minilogo").hide();
$(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
$(".navbar").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
$(".nav a").css('color', '#0a4f6f');
logo.find(".menu__biglogo").hide();
logo.find(".menu__minilogo").show();
console.log(logo.find(".menu__biglogo"))
} else {
$(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
$(".nav a").css('color', 'white');
logo.find(".menu__minilogo").hide();
logo.find(".menu__biglogo").show();
}
});
});
当前状态。
显示大徽标,滚动时出现迷你徽标,但没有任何旋转过渡。
有时,当点击网站时,徽标会随机堆叠在彼此之上,但在刷新该页面时,它会再次恢复为大徽标(所以这只是加载时的一个小错误)。
任何帮助将不胜感激。谢谢
您正在使用 jQuery 的 .show()
和 .hide()
功能来 show/hide 您的徽标。这行得通,但他们实际做的是将徽标的 display
属性 从 block
切换到 none
和 vice-versa.
display
的问题在于它不是 animatable
。 display:none
和 display:block
之间不能有过渡。它是 on 或 off。
那么你可以做什么:
- 始终显示您的两个徽标
- 编码动画的初始状态
- 当他们有自定义 class(通常是
active
- 但你可以使用任何 class,只要它不冲突与任何东西)。
- 您想要为其设置动画的所有属性都应该是
animatable
(w3schools 在这方面是一个很好的资源)
- 最重要的是
opacity
,因为它将控制徽标的可见性。
- 加载带有 class
active
的大徽标和没有 的小徽标的页面
- 在 scroll/click/mouse-flip-flop/whatever-event 上切换两个徽标上的 class ('active'),从一个徽标中删除并在另一个徽标上添加。因为它们具有
animatable
属性和这些动画的过渡集,所以它们的动画效果很好。
这是一个例子:
$(document).ready(function(){
var navbar = $(".navbar-header");
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$(".navbar").css("background-color", "#fff");
$(".nav a").css('color', '#0a4f6f');
navbar.find(".menu__biglogo").removeClass('active');
navbar.find(".menu__minilogo").addClass('active');
} else {
$(".navbar").css("background-color", "transparent");
$(".nav a").css('color', 'white');
navbar.find(".menu__biglogo").addClass('active');
navbar.find(".menu__minilogo").removeClass('active');
}
});
});
.navbar-header {
position: fixed;
}
.menu__minilogo{
width: 200px;
height: auto;
position: absolute;
opacity: 0;
margin-left: 0;
transform: rotate(0deg);
transition: all .6s cubic-bezier(.4,0,.2,1);
}
.menu__minilogo.active {
width: 60px;
margin-left: 60px;
opacity: 1;
transform: rotate(360deg);
}
.menu__biglogo{
width: 220px;
height: auto;
opacity: 0;
transition: opacity .6s cubic-bezier(.4,0,.2,1);
}
.menu__biglogo.active {
opacity: 1;
transition: opacity .3s cubic-bezier(.4,0,.2,1) .3s;
}
body {
min-height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://lorempixel.com/g/400/400/fashion" class="menu__minilogo" />
<img src="http://lorempixel.com/g/400/400/fashion" class="menu__biglogo active" />
</div>
我没有在其中加载 Bootstrap,但我想你已经涵盖了那部分内容。
旁注: 如果您的大徽标和小徽标是同一图像,则没有必要同时使用它们。您可以 resize/rotate 大的进入小的位置然后返回,只动画它的 transform
属性,而不是不透明度。
我正在尝试获取徽标以更改滚动状态。 (示例:www.digitalblb.com)
它应该如何工作; 1. 大Logo原来显示 - 滚动更改为 2. 迷你标志 - 旋转过渡效果为 360'
header.html
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to image_tag("biglogo-160x80.png", alt: "BigLogo"), root_url,class:"menu__biglogo" %>
<%= link_to image_tag("minilogo.png", alt: "MiniLogo"), root_url, class:"menu__minilogo" %>
</div>
CSS /* 过渡标志*/
.menu__minilogo{
opacity: 1;
visibility: visible;
margin-left: 60px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.menu__biglogo{
width: 220px;
overflow: hidden;
}
JS
$(document).ready(function(){
var logo = $(".navbar-header");
logo.find(".menu__minilogo").hide();
$(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
$(".navbar").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
$(".nav a").css('color', '#0a4f6f');
logo.find(".menu__biglogo").hide();
logo.find(".menu__minilogo").show();
console.log(logo.find(".menu__biglogo"))
} else {
$(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
$(".nav a").css('color', 'white');
logo.find(".menu__minilogo").hide();
logo.find(".menu__biglogo").show();
}
});
});
当前状态。 显示大徽标,滚动时出现迷你徽标,但没有任何旋转过渡。
有时,当点击网站时,徽标会随机堆叠在彼此之上,但在刷新该页面时,它会再次恢复为大徽标(所以这只是加载时的一个小错误)。
任何帮助将不胜感激。谢谢
您正在使用 jQuery 的 .show()
和 .hide()
功能来 show/hide 您的徽标。这行得通,但他们实际做的是将徽标的 display
属性 从 block
切换到 none
和 vice-versa.
display
的问题在于它不是 animatable
。 display:none
和 display:block
之间不能有过渡。它是 on 或 off。
那么你可以做什么:
- 始终显示您的两个徽标
- 编码动画的初始状态
- 当他们有自定义 class(通常是
active
- 但你可以使用任何 class,只要它不冲突与任何东西)。 - 您想要为其设置动画的所有属性都应该是
animatable
(w3schools 在这方面是一个很好的资源)- 最重要的是
opacity
,因为它将控制徽标的可见性。
- 最重要的是
- 加载带有 class
active
的大徽标和没有 的小徽标的页面
- 在 scroll/click/mouse-flip-flop/whatever-event 上切换两个徽标上的 class ('active'),从一个徽标中删除并在另一个徽标上添加。因为它们具有
animatable
属性和这些动画的过渡集,所以它们的动画效果很好。
这是一个例子:
$(document).ready(function(){
var navbar = $(".navbar-header");
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$(".navbar").css("background-color", "#fff");
$(".nav a").css('color', '#0a4f6f');
navbar.find(".menu__biglogo").removeClass('active');
navbar.find(".menu__minilogo").addClass('active');
} else {
$(".navbar").css("background-color", "transparent");
$(".nav a").css('color', 'white');
navbar.find(".menu__biglogo").addClass('active');
navbar.find(".menu__minilogo").removeClass('active');
}
});
});
.navbar-header {
position: fixed;
}
.menu__minilogo{
width: 200px;
height: auto;
position: absolute;
opacity: 0;
margin-left: 0;
transform: rotate(0deg);
transition: all .6s cubic-bezier(.4,0,.2,1);
}
.menu__minilogo.active {
width: 60px;
margin-left: 60px;
opacity: 1;
transform: rotate(360deg);
}
.menu__biglogo{
width: 220px;
height: auto;
opacity: 0;
transition: opacity .6s cubic-bezier(.4,0,.2,1);
}
.menu__biglogo.active {
opacity: 1;
transition: opacity .3s cubic-bezier(.4,0,.2,1) .3s;
}
body {
min-height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://lorempixel.com/g/400/400/fashion" class="menu__minilogo" />
<img src="http://lorempixel.com/g/400/400/fashion" class="menu__biglogo active" />
</div>
我没有在其中加载 Bootstrap,但我想你已经涵盖了那部分内容。
旁注: 如果您的大徽标和小徽标是同一图像,则没有必要同时使用它们。您可以 resize/rotate 大的进入小的位置然后返回,只动画它的 transform
属性,而不是不透明度。