[CSS]デモが楽しい!要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic

要素をアニメーションでスライドさせたり、ペラッとめくったり、ワイプさせたり、回転させたり、フェードさせたり、ぶるぶる震えさせたり、さまざまなエフェクトをclassを与えるだけで適用するスタイルシートを紹介します。

この宇宙っぽい絵面がワクワク感を高めますねw

サイトのキャプチャ

Magic CSS3 animations
Magic -GitHub

Magicのデモ

デモのキャプチャ

Magic デモページ
※音がでます(音無しは右上をクリック)

デモでは右側からアクションを選択すると、左側にあるレッドの矩形がアニメーションします。
アニメーションは、下記のようにさまざまなものが揃っています。

デモのキャプチャ

Magic effects, Bing, Static effects

デモのキャプチャ

Static effects out, Perspective, Rotato

デモのキャプチャ

Slide, Math, Tin, Bomb

Magicの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="yourpath/magic.css">
</head>

Step 2: 要素にアニメーションを指定

アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。

まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

特定の時間、ループでアニメーションさせる時はこんな感じ。

setInterval(function(){ 
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

sponsors

top of page

©2018 coliss