ふわっとアニメーション
WEBWordPress
スクロールしていくと、ちょこっと動くアニメーションが好きです。
今どきの、画面全体が写真で、それがごっそり大陸移動のように動いていくような、大掛かりなものでなくて。
要素の一つ一つが羽毛のようにフワリフワリと舞い降りるようなのとか、ちょっと左右にプラプラ揺れるだけのくらいが、ちょうどいいです。
こちらを参考に、「ふわり」を実装することに成功しました。
スクロールするとふわっと現れる文字や画像
本文(固定ページ)は、ふわりとさせたい要素に、クラスをつけるだけ。
class="animation"
テンプレートPHPには、headにスクリプトを入れるだけ。
<script>
//ふわっと
$('.animation').css('visibility','hidden');
$(window).scroll(function(){
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('.animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 100){
$(this).addClass("fadeInDown");
}
});
});
</script>
CSSは以下を加えてアップロード。
.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
簡単♪
Wordpressでもちゃんと一発で動いてくれました。
プラプラもできるようになりたいです。