ログイン
問題12

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

アイコン画像

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

今回はデモのようにスクロールしてその高さまでくると出現するアニメーションを作ってみましょう!
※「期待する画面」のデモ実装では値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で出現させて完成です。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる