如何使图像尺寸在滚动时平滑变化? [英] How to make image size change smoothly on scroll?

查看:69
本文介绍了如何使图像尺寸在滚动时平滑变化?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有带有大徽标的标题,我想在滚动超过100像素后将其缩小,这可以正常工作,但不是很顺畅,我该如何使其顺畅?

I have header with big logo i want to make it small after scroll more than 100px, this is working fine but not smoothly, how can i do it smooth?

我的代码:-

$(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: all linear .5s

说明

您可以查看CSS中的 transition 属性.

考虑到上述解决方案,下面是语法的细分:

Taking into consideration the solution above, here's a break down of the syntax:

1)过渡属性:定义要设置动画的属性.它可以是单个属性,多个属性或 all ;
2) transition-timing-function-function :要使用的过渡函数,它将定义动画的显示方式;
3) transition-delay :定义动画完成所需的时间;

1) transition-property: defines which property you want to animate. It can be a single property, multiple properties or all;
2) transition-timing-function: transition function to be used, it will define how the animation will occurs;
3) transition-delay: defines how long the animation will take to finish;

使用CSS过渡

$(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>

这篇关于如何使图像尺寸在滚动时平滑变化?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆