wow.jsとanimate.cssのほわほわぽよ～んするやつを自作

wow.jsとanimate.cssでよくある順番にほわほわぽよ～んするやつを作ってみる。wow.jsは便利だがソースが長くなるので。

javascript

jsはクラス[animated]の要素に上から順番に[animation-順番]の連番クラスを付加する。

//ほわほわぽよ～んjs
$('.animated').each(function(i){
  var linkBase = $(this).attr('class');
  $(this).attr('class',linkBase + ' animation-' + (i+1));
});

CSS

CSSはキーフレームでCSS3 Animationを作り、SASSのfor文を使ってクラス[animation-連番]にanimation-delayだけ少しずつずらした記述を書く。

//ほわほわぽよ～んcss
@for $i from 1 through 24 {
  .animation-#{$i} {
    animation-delay:#{($i * 0.2) + 0.3}s;
  }
}
@keyframes animated {
  from {
    opacity: 0;
    transform: translate3d(0, 40%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animated {
  animation-duration: 0.6s;
  animation-name: animated;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  opacity: 0;
}

Demo

ほわほわぽよ～ん、しました。

課題

ほわほわぽよ～ん要素が画面に表示されたタイミングで、ほわほわぽよ～ん要素をanimationさせたい。