Web筋トレも使っているサーバー!ロリポップを使ってみない?

fadein・ jQuery・ふわっと表示

Sponser Link
Sponser Link

参考サイト

https://qiita.com/art_porokyu/items/0c38f0ebb44fbdbb2893

Sponser Link

HTML

HTML
 <div class="fadein">
    <div>子要素</div>
    <div>子要素</div>
    <div>子要素</div>
    <div>子要素</div>
 </div>
Sponser Link

CSS

CSS
.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
Sponser Link

js

js
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script> 
<script>
$(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).addClass('scrollin');
            }
        });
    });
});
</script> 
Sponser Link

コメントを残す

メールアドレスが公開されることはありません。