스크롤시 나타나는 애니메이션 질문

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

스크롤시 나타나는 애니메이션 질문

undefined주차

한*연

・

추천

・

조회수

답변 완료

페이지 스크롤시 나타나는 글자 질문입니다!

https://kutar37.tistory.com/entry/%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%8B%9C-Fade-In-%ED%9A%A8%EA%B3%BC%EC%A3%BC%EA%B8%B0

https://animate.style/

와 위 블로그의 3번을 참고했는데요,

페이지 스크롤시 글자가 나타나는 건 성공했는데

스크롤을 내려 첫 문장이 보여진 이후, 차례대로 딜레이되면서

딴딴딴 나타나는건 작동이 안되더라고요

뭉텅이로 한꺼번에 나타나는걸 고치고 싶어요ㅜㅜ

어디가 잘못된걸까요??

<head>
    <meta charset="UTF-8">
    <title>타이틀입니다</title>
     <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css"
      />
</head>

<style>
.text {
    opacity:0;
    margin-down:-30px;
    max-width:100%;

    color: #B0C4DE;
    margin: 500px 0px 100px 0px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
     }
</style>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script>
        $(document).ready(function () {
            $(window).scroll(function () {
                $('.text').each(function (i) {

                    var bottom_of_element = $(this).offset().top + $(this).outerHeight();
                    var bottom_of_window = $(window).scrollTop() + $(window).height();

                    if (bottom_of_window > bottom_of_element) {
                        $(this).animate({'opacity': '1', 'margin-down': '0px'}, 1000);
                    }

                });
            });
        });
</script>

<body>
<div class="text" div style="font: 300 normal 1.5em/0.6em YUniverse-B;">
    <p class="animate__animated animate__fadeInDown">하나</p>
    <p class="animate__animated animate__fadeInDown animate__delay-1s">둘</p>
    <p class="animate__animated animate__fadeInDown animate__delay-1s">셋</p>
    <p class="animate__animated animate__fadeInDown animate__delay-2s">넷</p>
    <p class="animate__animated animate__fadeInDown animate__delay-2s">다섯</p>
</div>
</body>

댓글 알림