로고의 간단한 애니메이션을 만드는 방법

나는이 간단한 로고 애니메이션을 만들려고 노력하고 있습니다. 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>

이상이 작업은 가능하지만 일부 부드러움이 없습니다. 해당 애니메이션을 만드는 다른 방법이있는 경우.

출처

2016-09-14 Anonymous

당신이 매우 혼란하고 있습니다 ... 당신은 할 수 jQuery를에 animate 방법 :

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

그리고 당신은 그냥 사용 CSS를 제공하여 .Logo &에 기본 전환을 제공 & 애니메이션 방법을 제거 할 수 있습니다 방법.

.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'); 
     } 
    }); 
});

출처

2016-09-14 08:17:24

당신은 다음과 같은 의미입니까? ... 애니메이션 방법을 사용 말하지만, 애니메이션 방법을 사용하지 않는 : 당신은 CSS 전환에 있다고 할 수 있습니까? –

그것은 작동하지 않으며 애니메이션은 어디에 있습니까 –

@ freedomn-m & TK, 네가 올바르게 말했고 나는 그걸 편집하고 새 코드를 넣어 ... –

로고의 간단한 애니메이션을 만드는 방법

답변

관련 문제