ある高さになるとふわっと出現
問題
今回はデモのようにスクロールしてその高さまでくると出現するアニメーションを作ってみましょう!
※「期待する画面」のデモ実装では値20以上で動くようになってます。
※「期待する画面」のデモ実装では値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¥
完了にする!
解説