如何使用翻转动画更改滚动上的图像徽标答案

【问题标题】：How to change image logo on scroll with flip animation如何使用翻转动画更改滚动上的图像徽标
【发布时间】：2014-11-17 19:45:38
【问题描述】：

我正在尝试为我的导航添加动画，类似于 http://www.leodislager.com/ 中的动画。

在我目前的代码中，我设法创建了固定导航效果，但无法弄清楚如何在滚动时获得翻转徽标动画 -

谁能帮我写代码？

【问题讨论】：

您将宽度设置为 0，更改图像源，最后将宽度设置为正确的大小。

标签： jquery css animation

【解决方案1】：

This 是查看旋转动画的好地方。
另一种选择（正如 Rory McCrossan 建议的那样）是编写一个脚本，将图片的宽度减小为 0，更改图像，然后将宽度增加到所需的值

【讨论】：

【解决方案2】：

这是一个关于 Rory 所说内容的粗略（看起来很丑）的小演示。实际上它只说明了问题的一部分。但这只是开始，如果您了解逻辑，那么我很确定您会自己弄清楚下一部分。如果您在任何时候遇到困难，那么随时为您提供帮助

JSFIDDLE

http://jsfiddle.net/a8cxrnxv/

function OnScrollDiv(div) {
    var a = document.getElementById('header');
    var imgnew = a.childNodes[1].childNodes[0];
    imgnew.style.width = 100 - div.scrollTop + '%';
}

【讨论】：