jQuery

【jQuery】スクロールして要素を表示するときにCSS3アニメーションを入れるjQuery CSS3 Animation Queue

November 3, 2017
jQuery CSS3 Animation Queue

jQuery CSS3 Animation Queueはスクロールしてビューポートの要素を表示するときにCSS3アニメーションを1つずつチェーン化するプラグインです。

Basic Usage

jQueryjquery-css3-animation-queue.jsを含める。

<script type="text/javascript" src="./jQuery.js"></script>
<script type="text/javascript" src="./jquery-css3-animation-queue.js"></script>

CSSにアニメーションのルールを追加

/* Required rule. Add to your CSS file */
.animated.standby {
  -webkit-animation: none !important;
  -o-animation: none !important;
  animation: none !important;
  visibility: hidden;
}

animate.cssを使用

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

クラスを追加。

<h1 class="animated standby fadeIn">Example</h1>

Advanced Usage

delayプロパティは次の要素をアニメートするまでの待機する時間

<div class="animated standby fadeIn" data-delay="2000">The next element in queue will animate in two seconds.</div>
<div class="animated standby fadeIn" data-offset="200">This element will be added to the animation queue when the space between the bottom of the browser and the top of the element is more than 200 pixels.</div>

MIT