その数60以上!CSSで作られたスライダーを集めた「ElementTransitions.js」

「ElementTransitions.js」は60種類以上ものCSSアニメーションで作られたスライダーを実装できるjQueryプラグインです。

ElementTransitions.js

ElementTransitions-js

リンク先を見てもらうとわかるのですが、ずらっと並んだアニメーションがすごい迫力です。これだけの種類が揃っていると望むスライダーは必ず見つかりそうです。アニメーションなのでキャプチャを撮ることができません。ぜひリンク先よりご確認ください。

 

それでは「ElementTransitions.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="css/elementTransitions.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/elementTransitions.js"></script>

 

HTMLはこのようにマークアップします。”et-in”と”et-out”でスライドインとアウト時のアニメーションを指定することができます。上記リンク先にdemoが載っているので、見てみてください。

<div class="et-wrapper et-rotate span4" et-in="rotateCarouselBottomIn" et-out="rotateCarouselBottomOut ontop">
  <div class="et-page">
    <h2>Page 1</h2>
  </div>
  <div class="et-page">
    <h2>Page 2</h2>
  </div>
  <div class="et-page">
    <h2>Page 3</h2>
  </div>
</div>

 

するとこのように作ることが出来ました。クリックすると上から下へスライドします。

ElementTransitions-js-sample

非常に簡単に実装することができます。ぜひ参考にどうぞ。

 

Home > CSS | JavaScript > その数60以上!CSSで作られたスライダーを集めた「ElementTransitions.js」

Return to page top