목록으로

마우스 스크롤 위치 값에 대하여 채택완료

블레스

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 1,895

답변 2

아래의 스크립트를 보면

animation이 화면의 상하 가운데에 지점에서 액션이 일어 나는데

이를 좀더 아래 부분에서 animation이 일어나게 할수 있을까요?

windowHeight의 값을 주거나 하면 될것 같은데

잘 모르겠네요.. 고수님들의 한수를 부탁드립니다.

#script

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

배르만

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

다음 코드가 도움이 될지 모르겠습니다.

<!DOCTYPE html>

<html lang="en">

<head>

    <title></title>

    <meta charset="UTF-8" />

<style>

.wrap {

    overflow-x: hidden;

}</p>

<p>.bless_ani_1 {

    background-color: #7da152;

    height: 10em;

    opacity: 0;

    position: relative;

    right: -90vw;

}</p>

<p>.animation {

    animation-duration: 2s;

    animation-fill-mode: forwards;

}

.fade-in-right {

    animation-name: fade-in-right;

    

}

.fade-out-right {

    animation-name: fade-out-right;

}</p>

<p>@keyframes fade-in-right {

    from { opacity: 0; right: -100vw;}

    to { opacity: 1; right: 0; }

}

@keyframes fade-out-right {

    from { opacity: 1; right: 0;}

    to { opacity: 0; right: -100vw; }

}

</style>

<script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>

</head>

<body></p>

<p><div class="wrap">

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<div class="bless_ani_1"></div>

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

</div></p>

<p><script>

    $('.bless_ani_1').addClass('animation');

    $(window).scroll(function(){

        $('.bless_ani_1').each(function(){

            var elPosition = $(this).offset().top;

            // var elHeight = $(this).height();

            var elHeight = $(this).height() / 2;

            var windowTop = $(window).scrollTop();

            

            // var windowHeight = $(window).height();

            var windowHeight = window.innerHeight;

            

            windowHeight = Math.floor(windowHeight / 2);

            windowHeightMargin = Math.floor(windowHeight / 1.5);

            windowHeight += windowHeightMargin;</p>

<p>            if (elPosition < windowTop + windowHeight - elHeight) {

                if ($(this).hasClass('fade-in-right') == false) {

                    $(this).removeClass("fade-out-right").addClass("fade-in-right");

                }

            } else {

            // if (elPosition > windowTop + windowHeight ) {

                if ($(this).hasClass('fade-in-right') == true) {

                    $(this).removeClass("fade-in-right").addClass("fade-out-right");

                }

            }

            // <!-- 페이지 내려 왔다 다시 올라갈때  -->

            // if (elPosition + elHeight < windowTop ) { 

            //     $(this).removeClass("animation  fade-in-right");

            // }

        });

    });

</script>

</body>

</html></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.