마우스 스크롤 위치 값에 대하여
본문
아래의 스크립트를 보면
animation이 화면의 상하 가운데에 지점에서 액션이 일어 나는데
이를 좀더 아래 부분에서 animation이 일어나게 할수 있을까요?
windowHeight의 값을 주거나 하면 될것 같은데
잘 모르겠네요.. 고수님들의 한수를 부탁드립니다.
<script>
$(window).scroll(function(){
$('.bless_ani_1').each(function(){
var elPosition = $(this).offset().top;
var elHeight = $(this).height();
var windowTop = $(window).scrollTop();
var windowHeight = $(window).height();
if (elPosition < windowTop + windowHeight - elHeight) {
$(this).addClass("animation fade-in-right");
}
if (elPosition > windowTop + windowHeight ) {
$(this).removeClass("animation fade-in-right");
}
<!-- 페이지 내려 왔다 다시 올라갈때 -->
//if (elPosition + elHeight < windowTop ) {
//$(this).removeClass("animation fade-in-right");
//}
});
});
</script>
답변 2
다음 코드가 도움이 될지 모르겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<style>
.wrap {
overflow-x: hidden;
}
.bless_ani_1 {
background-color: #7da152;
height: 10em;
opacity: 0;
position: relative;
right: -90vw;
}
.animation {
animation-duration: 2s;
animation-fill-mode: forwards;
}
.fade-in-right {
animation-name: fade-in-right;
}
.fade-out-right {
animation-name: fade-out-right;
}
@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="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<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>
<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;
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>
위의 스크립트를 수정하여 아래와 같이 변경하면 됩니다.
<script>
$(window).scroll(function(){
$('.bless_ani_1').each(function(){
var elPosition = $(this).offset().top;
var elHeight = $(this).height();
var windowTop = $(window).scrollTop();
var windowHeight = $(window).height();
if (elPosition < windowTop + windowHeight - elHeight - windowHeight/2) {
$(this).addClass("animation fade-in-right");
}
if (elPosition > windowTop + windowHeight ) {
$(this).removeClass("animation fade-in-right");
}
<!-- 페이지 내려 왔다 다시 올라갈때 -->
//if (elPosition + elHeight < windowTop ) {
//$(this).removeClass("animation fade-in-right");
//}
});
});
</script>
위 스크립트는 마우스 스크롤 위치가 화면의 상하 가운데 지점에서 액션이 일어나게 됩니다.
만약 마우스 스크롤 위치가 화면의 상하 부분에서 액션이 일어나게 하고 싶다면 windowHeight의 값을 화면의 상하 부분에서 원하는 값으로 변경하면 됩니다.
