エスエムティの愉快な仲間たち

ホームページにちょっとした動きを付けたい時によく使うこちら↓

◆Animate.css
https://daneden.github.io/animate.css/

使っている方も多いと思いますが、
CSSなので軽量ですし使い方も簡単ですし良い事づくめです。

「画面内に表示されたらアニメーションしつつ表示する」

ということをやりたい時に、こんなスクリプトを書いて実装します。

————————————-

$(window).on(‘scroll’, function (){

var animated = $(‘.animated’);
animated.each(function () {

var animatedOffset = $(this).offset().top;
var position = $(window).scrollTop();
var wh = $(window).height();

if(position > animatedOffset – wh + (wh / 2) && $(this).hasClass(‘up’)){
$(this).addClass(‘fadeInUp’);
}else{
$(this).removeClass(‘fadeInUp’);
}
});

});

————————————-

Animate.cssを使うためには
「animated」というクラス名が必須なので、
その位置を「offset」を使って取得します。

if文で「どの位置に来たら動かすか」を決め、
「hasClass」を使って「up」というクラスが付与されている場合に
「fadeInUp」の動きで表示を行う！

といったスクリプトになっています。

「hasClass」の辺りを派生させれば、
「down」が付いていれば「fadeInDown」で動かす！

なんてことも簡単に出来ますね。

さくっと動かしたい時にはAnimate.css、おすすめです！

ぴの子