如何制作简单的标志动画答案

【问题标题】：How to make simple Animation of logo如何制作简单的标志动画
【发布时间】：2016-09-15 02:25:02
【问题描述】：

我尝试制作像这样的简单徽标动画see。每当我转动鼠标来制作这样的动画时。我尝试过但缺少一些东西。请各位大神指导一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.8.3.js"></script>
<script>
var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
    newscroll = mywindow.scrollTop();
    if (newscroll > mypos && !up) {
        $('.b').stop().slideToggle();
        up = !up;
        console.log(up);
    } else if(newscroll < mypos && up) {
        $('.b').stop().slideToggle();
        up = !up;
    }
    mypos = newscroll;
});
</script>
<style>
body {
    height: 1000px;    
}
.main {
    height: 280px;
    width: 100%;
    background-color:#000;
    position:fixed;
}


</style>
</head>

<body>
<div class="main">
    <div class="logo">
        <img src="qq.png" class="b" style="display: inline-block;margin-left: 85px;margin-top: 62px;">
    </div>
    <div class="name">
        <img src="eeeee.png" class="c" style="display: inline-block;margin-left: 23px;margin-top: -60px;">
    </div>
</div>
</body>
</html>

上面这个工作，但缺少一些平滑度。如果有任何其他方法可以制作这样的动画。

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案1】：

你让这变得非常混乱......你可以用 jQuery 中的animate 方法来做到这一点：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(document).scrollTop() > 50) {
            $('.Logo').animate({
                'MarginTop': '-100px'
            }, 750);
        } else {
            $('.Logo').animate({
                'MarginTop': '0px'
            }, 750);
        }
    });
});

您可以删除 animate 方法并为您的 .Logo 提供默认的转换，只需使用 CSS 方法即可。

.Logo {
    -webkit-transition: linear 500ms;
    -moz-transition: linear 500ms;
    -o-transition: linear 500ms;
    -ms-transition: linear 500ms;
    transition: linear 500ms;
}

并更改您的 jQuery 代码：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(document).scrollTop() > 50) {
            $('.Logo').css('margin-top', '-100px');
        } else {
            $('.Logo').css('margin-top', '0px');
        }
    });
});

【讨论】：

您说要使用 animate 方法，但不要使用 animate 方法...您的意思是：您可以使用 css 过渡来做到这一点？
@freedomn-m & T.K，是的，你说得对，我编辑了它并添加了新代码......
您应该保留 css 转换代码作为替代 :)
@freedomn-m，是的，这也是一个替代方案，我删除了它，因为我给出了 animate 方法的示例......，我会放那个...... :)