CODEWITHSUNDEEP
javascriptjquerycssjquery-animate
user6463989
user6463989

Reputation:

How to make simple Animation of logo

I trying to make simple Logo Animation like this see.Whenever i wheel the mouse to make a animation like that.This what i tried but something missing. Can you please guys guide me.

<!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>

Above This working but some smoothness was missing.If there is any other way to make like that animation.

Upvotes: 0

Views: 179

Answers (1)

user6571878
user6571878

Reputation:

You are making this very confusing ... You can do that with animate method in jQuery :

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

And you can remove animate method & give a default Transitions to your .Logo & Just give use CSS method.

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

And change your jQuery Code :

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

Upvotes: 1

Related Questions