如何动画调整滚动上较小的徽标图像？
Posted
技术标签:
【中文标题】如何动画调整滚动上较小的徽标图像？【英文标题】：How to animate resize smaller logo image on scroll? 【发布时间】：2017-12-29 20:37:37 【问题描述】：我能够弄清楚如何在滚动时为标题调整大小设置动画。但是，我似乎无法弄清楚如何为标题徽标图像设置动画以使其在滚动时变小。任何修改以下代码的帮助将不胜感激。谢谢。
$(document).on("scroll", function()
if
($(document).scrollTop() > 100)
$("header").addClass("shrink");
else
$("header").removeClass("shrink");
);#logo
width:100%;
margin:0 auto;
position: fixed;
#content
width:100%;
margin:0 auto;
header
width: 100%;
padding: 30px 0;
background: #000;
border-bottom: 1px solid #fff;
/* animation magic */
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out ;
z-index: 9999;
top: 0;
position: fixed;
.shrink
padding: 0;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="logo">
<header><img src="https://www.computerhope.com/cdn/computer-hope.jpg"></header>
</div>
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：我首先会像这样更改您的 HTML：
<header>
<div id="logo">
<img src="https://www.computerhope.com/cdn/computer-hope.jpg">
</div>
</header>
把你的css改成这样：
#logo
width:200px;/*give it a fixed size*/
margin:0 auto;
/* animation magic */
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out ;
-ms-transition: all 1s ease-in-out ;
-o-transition: all 1s ease-in-out ;
transition: all 1s ease-in-out ;
#logo img
width:100%;
height:auto;
header
width: 100%;
padding: 30px 0;
background: #000;
border-bottom: 1px solid #fff;
z-index: 9999;
.shrink
width:100px;/*change the size here*/
把你的 jQuery 改成这样：
$(document).on("scroll", function()
if($(document).scrollTop() > 100)
$("#logo").addClass("shrink");
else
$("#logo").removeClass("shrink");
);
【讨论】：
好的，我添加了这个，它在向下滚动时平滑地动画，但在向上滚动时不能平滑地恢复到原始大小： .shrink img max-width: 150px; -moz-transition：所有 .3s 缓入出局； -o-transition：所有 .3s 缓入出局； -webkit-transition：所有 .3s 缓入出局；过渡：所有 .3s 缓入出局； 你添加了什么？ 这个 CSS: .shrink img max-width: 150px; -moz-transition：所有 .3s 缓入出局； -o-transition：所有 .3s 缓入出局； -webkit-transition：所有 .3s 缓入出局；过渡：所有 .3s 缓入出局； 请注意，当您向上滚动并且标题高度增加时，徽标会突然变大（没有动画）。我想弄清楚为什么它没有在向上滚动时为徽标大小设置动画。以上是关于如何动画调整滚动上较小的徽标图像？的主要内容，如果未能解决你的问题，请参考以下文章