답변 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>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인