問題
12
jQuery
ある高さになるとふわっと出現
jQueryの問題に挑戦しよう！
問題
「ある高さになるとふわっと出現」
今回はデモのようにスクロールしてその高さまでくると出現するアニメーションを作ってみましょう！
※「期待する画面」のデモ実装では値20以上で動くようになってます。
あらかじめエディタに書くコード
<ul>
<li>ふわっと出現</li>
</ul>
¥HTML¥
ul{
list-style: none;
}
li{
opacity: 0;
}
¥CSS¥
期待する画面
解答と解説（ある高さになるとふわっと出現）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
複製ボタンの説明は他の問題でcloneについて触れているので今回は省かせていただきます。まずwindowにscrollイベントをつけてスクロールするたびに中の処理を行うようにします。そして、li、eachによりすべてのliについて中の処理を行います。$(this).offset().topでその要素の位置を、$(window).scrollTopで画面の位置を、そして$(window).heightで画面自体の縦幅を取得しています。これらを用いてその要素が画面内のどこにきたら表示するかを決めます。今回は200にしていますが、ここの数字を変えると判定が上下にずらせます。あとはanimateで出現させて完成です。
