如何使图像大小在滚动时平滑变化?
How to make image size change smoothly on scroll?
我有 header 带有大徽标我想在滚动超过 100px 后将其变小,这工作正常但不流畅,我怎样才能让它流畅?
我的代码:-
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('header').addClass('fixed-header');
}
else{
$('header').removeClass('fixed-header');
}
});
});
header{ padding:0px; position: sticky; top:0px; left:0px; background: #FFF; z-index: 1000;}
header.fixed-header{box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);}
header .logo img{width:200px;}
header.fixed-header .logo img{width:100px;}
.box-height{ height:500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="col-md-4">
<a href="#" class="logo"><img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"></a>
</div>
</header>
<div class="box-height"></div>
您可以使用 Transition 属性 of css:
https://www.w3schools.com/cssref/css3_pr_transition-property.asp\
header .logo img{width:200px;transition:width 0.3s ease-in-out 0s;}
解决方案
transition: all linear .5s
说明
你可以看看CSS中的transition
属性。
考虑到上述解决方案,这里是语法分解:
1) transition-property
:定义要为哪个 属性 设置动画。它可以是单个 属性、多个属性或 all
;
2) transition-timing-function
: 要使用的过渡函数,它将定义动画将如何发生;
3)transition-delay
:定义动画完成需要多长时间;
参考资料
例子
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('header').addClass('fixed-header');
}
else{
$('header').removeClass('fixed-header');
}
});
});
header{ padding:0px; position: sticky; top:0px; left:0px; background: #FFF; z-index: 1000;}
header.fixed-header{box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);}
header .logo img{width:200px; transition: all linear .5s}
header.fixed-header .logo img{width:100px;}
.box-height{ height:500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="col-md-4">
<a href="#" class="logo"><img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"></a>
</div>
</header>
<div class="box-height"></div>
我有 header 带有大徽标我想在滚动超过 100px 后将其变小,这工作正常但不流畅,我怎样才能让它流畅?
我的代码:-
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('header').addClass('fixed-header');
}
else{
$('header').removeClass('fixed-header');
}
});
});
header{ padding:0px; position: sticky; top:0px; left:0px; background: #FFF; z-index: 1000;}
header.fixed-header{box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);}
header .logo img{width:200px;}
header.fixed-header .logo img{width:100px;}
.box-height{ height:500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="col-md-4">
<a href="#" class="logo"><img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"></a>
</div>
</header>
<div class="box-height"></div>
您可以使用 Transition 属性 of css:
https://www.w3schools.com/cssref/css3_pr_transition-property.asp\
header .logo img{width:200px;transition:width 0.3s ease-in-out 0s;}
解决方案
transition: all linear .5s
说明
你可以看看CSS中的transition
属性。
考虑到上述解决方案,这里是语法分解:
1) transition-property
:定义要为哪个 属性 设置动画。它可以是单个 属性、多个属性或 all
;
2) transition-timing-function
: 要使用的过渡函数,它将定义动画将如何发生;
3)transition-delay
:定义动画完成需要多长时间;
参考资料
例子
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('header').addClass('fixed-header');
}
else{
$('header').removeClass('fixed-header');
}
});
});
header{ padding:0px; position: sticky; top:0px; left:0px; background: #FFF; z-index: 1000;}
header.fixed-header{box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);}
header .logo img{width:200px; transition: all linear .5s}
header.fixed-header .logo img{width:100px;}
.box-height{ height:500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="col-md-4">
<a href="#" class="logo"><img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"></a>
</div>
</header>
<div class="box-height"></div>