如何使用翻转动画更改滚动图像徽标

Question

我正在尝试为我的导航制作动画，就像http://www.leodislager.com/中的动画一样。

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

有人可以帮我解决这个问题吗？

Answer 1

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

Answer 2

这是Rory正在谈论的一个小原油（非常丑陋的）演示。实际上它只展示了问题的一部分。但它是开始，如果你理解逻辑，那么我很确定你会自己弄清楚下一部分。如果你在任何时候都被困住那么总是在那里帮助你

的jsfiddle

http://jsfiddle.net/a8cxrnxv/

JS

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