CSS 애니메이션 및 Jquery

Question

briandelaney.com과 비슷한 대화식 웹 사이트 제작에 도움이 필요합니다. 특히 디자이너가 사용한 링크 사이에 슬라이드 효과를 통합하려고합니다. 그의 코드를 읽었지만 Javascript에는 능숙하지 않지만 Jquery에 익숙합니다.

링크를 클릭하면 메뉴를 슬라이드하고 싶습니다. 이 입력 후에 Javascript로 CSS 변환을 어떻게 애니메이트합니까? 애니메이션을 적용하고자하는 코드 섹션은 JSFiddle에 있습니다. 다음은 애니메이션 http://jsfiddle.net/1pc4f081/3/의 코드입니다.

<section> 
<div class='homecard' style="height:815px;">/* Initially, the menu is a card in the center of the page. I want this to slide to the top of the page when a link is clicked */ 
    <div class="menu home appear" id="mainmenu"> 
     <ul> 
      <li class="hover-effect1"> <a href="/about" class="main-menu about-link"> 
         <span class="effect" data-hover="About"> 
          <span class="what"> 
           <span> About</span> 
          </span> 
         </span> 
        </a> 

       <div class="border right"> 
        <div></div> 
       </div> 
      </li> 
      <li class="hover-effect"> <a href="/services" class="main-menu service-link"> 
          <span class="effect" data-hover="Services"> 
           <span class="what"> 
            <span> Services</span> 
            </span> 
            </span> 
            </a> 

       <div class="border right"> 
        <div></div> 
       </div> 
      </li> 
      <li class="hover-effect 3"> <a href="contact" class="main-menu contact-link"> 
          <span class="effect" data-hover="Contact"> 
           <span class="what"> 
            <span> Contact</span> 
            </span> 
            </span> 
            </a> 

      </li> 
     </ul> 
    </div> 
</div> 

CSS :

.homecard { 
-webkit-animation-name: pushHeaderUp; 
-moz-animation-name:pushHeaderUp; 
animation-name:pushHeaderUp; 
-moz-animation-duration:3s; 
-moz-animation-iteration-count:1; 
-moz-animation-timing-function:ease; 
-moz-animation-fill-mode:forwards; 
-webkit-animation-duration:3s; 
-webkit-animation-iteration-count:1; 
-webkit-animation-timing-function:ease; 
-webkit-animation-fill-mode: forwards; 
animation-duration:3s; 
animation-timing-function:ease; 
animation-fill-mode: forwards; 

}

@keyframes pushHeaderUp { 
0% { 
    -webkit-transform:translateY(0px); 
    transform:translateY(0px); 
    -moz-transform:transloateY(0px) 
} 
60% { 
    -webkit-transform:translateY(-180px); 
    transform:translateY(180px); 
    -moz-transform:translateY:(-180px) 
} 
100% { 
    -webkit-transform:translateY(-240px); 
    transform:translateY(-240px); 
    -moz-transform:translateY(-240px) 
} 

}

JS

012,391

Answer 1

설명하는 것은 애니메이션입니다. 애니메이션을하려면 Flash 또는 CSS3가 필요합니다.

CSS를 사용하고 CSS3 전환을 찾습니다.

자세한 정보는 jsfidle/plunker를 참조하십시오.

Answer 2

jQuery 프레임 워크에서 약 silde() 및 animate() 함수를 읽을 수 있습니다. 나는 그것이 당신이 원하는 것을 만들고 애니메이션 주제에 더 깊이 들어가는 데 도움이 될 것이라고 생각합니다.