javascript - jQuery 在滚动时调整菜单栏的大小并改变图像

Question

http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/是一个相当简单、典型、易于使用的调整大小菜单栏。图像也按比例缩小，但是如何通过过渡使图像完全交换？这个 ( JS/jQuery swap image on scroll event) 是一个非常简单的交换图像的解决方案，是的，但是当向下滚动和向上滚动时淡入/淡出过渡似乎更难放置。

Answer 1

您可以使用 css 转换来通过类转换不透明度。

.visible {
  transition: .3s opacity;
  opacity: 1;
}

.hidden {
  opacity: 0;
}

只需将第一张图片设置为 .visible，将第二张图片设置为 .visible.hidden然后随着菜单转换交换类，所以第一个图像具有 .visible.hidden 而第二个图像只有 .visible

您可以调整时间以创建漂亮的交叉淡入淡出效果。