CSS 애니메이션 위아래로 스크롤

로딩 한 후 bounceInLeft를 트리거하도록 이미지를 얻으려고합니다. 어떤 것이 작동하지만 jQuery를 사용하여 스크롤에서 흔들기 효과를 트리거하려고합니다. 나는이 튜토리얼을 youtube http://youtu.be/CBQGl6zokMs에 따르고있다. 올바르게 작동하지 않는 것 같다. 그렇게 할 수 있다면 도움이된다. CSS 애니메이션 위아래로 스크롤

출처

2015-01-25 nhrobinson

당신이 JQuery와로드가없는 것 같다

<!DOCTYPE> 
 
<html> 
 
\t <head> 
 
\t \t <title>Divs Galore</title> 
 
\t \t <link rel="stylesheet" href="animate.css"> 
 
\t \t <link rel="stylesheet" href="stylesheet.css"> 
 
\t \t 
 
\t </head> 
 
\t <body> 
 

 
\t \t <div> 
 
\t \t <img src="jennah.jpg"> 
 
\t \t </div> 
 
\t \t <div> 
 
\t \t <img src="jennah.jpg"> 
 
\t \t </div> 
 
\t \t <div> 
 
\t \t <img src="jennah.jpg"> 
 
\t \t </div> 
 
\t \t <div> 
 
\t \t <img src="jennah.jpg"> 
 
\t \t </div> 
 
\t \t <div> 
 
\t \t <img src="jennah.jpg"> 
 
\t \t </div> 
 
\t \t \t <input type="img"> 
 

 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
\t \t <script> 
 
\t \t $(function() { 
 
\t \t \t $('img').on('scroll',function() { 
 
\t \t \t \t $.addClass('animated shake'); 
 
\t \t }); 
 

 
\t \t }) 
 
\t \t \t 
 
\t \t \t 
 
\t \t </script> 
 

 
\t \t 
 
\t </body>

, 당신의 머리 부분을

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

를 추가합니다.

덧붙여 말하자면, onscroll 이벤트는 실제 스크롤이 발생하는 경우에만 발생하므로 모든 마우스 휠에서 발생하지는 않습니다 (마우스 휠 이벤트가 있음). 또한 입력란이 아닌 창에 이벤트를 지정해야합니다.

<input id="myinput"> 

... 

window.onmousewheel = function() { $('#myinput').addClass('animated shake')};

출처

2015-01-25 22:24:40

지금 보이는 내용을 포함하도록 코드를 편집했습니다. 물론 여전히 작동하지 않지만 편집 된 코드를 기반으로 누군가에게 조언 할 수 있는지 알고 싶습니다. 너와 너의 도움을 줘서 고맙다. – nhrobinson

CSS 애니메이션 위아래로 스크롤

답변

관련 문제