「スクロールした要素がふわっと表れる」動きの、
①下にスクロールをして画面内に要素が入ったとき
②且つ、上にスクロールをして画面内に要素が入ったときも
動作する指定を調べたり試したりしてるんですが上手く両立させることが出来ません。
ご教示頂ければ幸いです。
↓下にスクロールをして画面内に要素が入ったときのみのコードです。
【HTML】
<div class="box1 fadeUp"></div>
【css】
.box1{
text-align: center;
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 50%;}
.fadeUp {
opacity: 0;}
.fadeUp-anime {
opacity: 0;
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(200px);}
to {
opacity: 0.5;
transform: translateY(0);}}
【Jq】
$(function(){
$(window).on("load scroll", function (){
var box = $(".fadeUp");
box.each(function(){
var boxOffset = $(this).offset().top-50;
var scrollPos = $(window).scrollTop();
var wh = $(window).height();
if(scrollPos >= boxOffset - wh){
$(this).addClass("fadeUp-anime");
}else {
$(this).removeClass("fadeUp-anime");
}
});
});