ログイン

問題12 ある高さになるとふわっと出現

jQueryAnimationの問題

jQueryAnimation

ある高さになるとふわっと出現

問題

今回はデモのようにスクロールしてその高さまでくると出現するアニメーションを作ってみましょう!
※「期待する画面」のデモ実装では値20以上で動くようになってます。

自分の環境に書くコード

              <ul>
  <li>ふわっと出現</li>
</ul>
¥HTML¥
            
              ul{
  list-style: none;
}
li{
  opacity: 0;
}
¥CSS¥
            

期待する画面

ログインして解答を見る
コードのアイコン

解答ソースコード

              $(function () {
  $("button").click(function(){
    var howMany=Number($("input").val());
    for(var i=1;i<howMany;i++){
      $("li").eq(0).clone(true).appendTo("ul");
      $("li").eq(i).css({ opacity:0 });
    }
  });
  $(window).scroll(function() {
    $("li").each(function () {
      var position=$(this).offset().top;
      var scroll=$(window).scrollTop();
      var windowHeight=$(window).height();
      if (scroll> position -  windowHeight + 200) {
        $(this).animate({
          opacity:1,
        },1000)
      }
    });
  });
});
¥JavaScript¥
            
答えのアイコン

解説

複製ボタンの説明は他の問題でcloneについて触れているので今回は省かせていただきます。まずwindowにscrollイベントをつけてスクロールするたびに中の処理を行うようにします。そして、li、eachによりすべてのliについて中の処理を行います。$(this).offset().topでその要素の位置を、$(window).scrollTopで画面の位置を、そして$(window).heightで画面自体の縦幅を取得しています。これらを用いてその要素が画面内のどこにきたら表示するかを決めます。今回は200にしていますが、ここの数字を変えると判定が上下にずらせます。あとはanimateで出現させて完成です。
完了にする!
LINEの友達追加でお役立ち動画をGET!!