스크롤시에 효과가 안뜨고, 미리 떠버리는 현상...

Question

< html lang = "ko" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Scroll Reveal Animation < script src = "https://code.jquery.com/jquery-3.6.0.js" integrity = "sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin = "anonymous" > < script src = "js/wow.min.js" > < style > .parent { width : 800px ; border : 1px solid #000; padding : 20px ; overflow : hidden; } .parent div { float : left; width : 50% ; height : 200px ; border : 3px solid red; box-sizing : border-box; line-height : 200px ; text-align : center; font-size : 3em ; } .ltr { animation : ltr 1s linear both; } .rtl { animation : rtl 1s linear both; } @keyframes ltr{ 0% { opacity : 0 ; transform : translateX( -150px ); } 100% { opacity : 1 ; transform : translateX( 0 ); } } @keyframes rtl{ 0% { opacity : 0 ; transform : translateX( 150px ); } 100% { opacity : 1 ; transform : translateX( 0 ); } } < body > < h1 > 스크롤시 애니메이션 넣기 < img src = "http://via.placeholder.com/300x800" > < div class = "parent" > < div class = "left wow ltr" > left < div class = "right wow rtl" > right < script > new WOW().init(); 스크롤시 효과가 뜨는게 아니라, 그냥 미리 떠버립니다. . 아예 처음부터 다시 시작하면서 계속 오류 찾아도 보이지 않아요ㅠㅠ

코딩웍스(Coding Works) · Answer

위의 스크립트 부분을 영상에 있는 것 처럼 하셔야 합니다. 영상에는 스크립트 작동하는 옵션이 있는데 그냥 new WOW().init(); 이렇게만 넣으시면 안됩니다. 다음에는 영상에 있는대로 충분히 따라하시고 안되는 경우에 질문 주세요.