スクロールしたら要素をふわっと出すコラムはいっぱいあるけど、
ページを読んだ瞬間にイベント発火ってなかなかない…。
というわけで作りました。
flashつくれないんだな～～！って人にいい感じだと思いますます。
外部jsで読んでもいいよ。
<script>
$('#animation').css('visibility','hidden');//ふわっと表示
$(function () {
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 1){
$(this).addClass("fadeInDown");
}
});
});
</script>CSSはこちら
.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-ms-animation-duration:2s;
animation-duration:2s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }「2s」は何秒でふわっとが終わるかの設定だよ。
「-100px」はどんくらい移動するかの設定だよ。
最近のCSSはすごいね！！！！