[JS]さまざまなHTMLの要素をくるっと回転させるスクリプト -Flipload.js

テキストや画像を配置したパネルをくるっと回転させるだけでなく、画像だけボタンだけなどさまざまな要素を回転させることができるスタンドアローンのスクリプトを紹介します。

Flipload.js
Flipload.js -GitHub

• Flipload.jsのデモ
• Flipload.jsの使い方

Flipload.jsのデモ

デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。

デモページ

最もシンプルデモをアニメーションgifにしてみました。

パネルをクリックすると、くるっと回転します。
回転後のスピナーはオプションです。

回転は水平だけでなく、垂直にも対応しています。
また、回転して動画を表示したり、フォームのボタンを回転させることもできます。

くるっと回転すると、動画を表示
ネコのかっこいいシーンを集めた動画も面白いですｗ

Sendをクリックするとくるっと回転

ボタンだけをくるっと回転させることもできます

Flipload.jsの使い方

Step 1: 外部ファイル

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

<link rel="stylesheet" href="flipload.css">
<script src="flipload.js"></script>

Step 2: HTML

回転させる要素にclassを付与します。
デモのようにリストでパネルを複数配置する場合は、下記のように。

<ul>
  <li class="box">
    <div>1枚目のパネル</div>
  <li>
  <li class="box">
    <div>2枚目のパネル</div>
  <li>
</ul>

一つ目はパネル、二つ目は中の要素、ということもできます。

<ul>
  <li class="box">
    <div>1枚目のパネル</div>
  <li>
  <li>
    <div class="box">2枚目のパネル</div>
  <li>
</ul>

Step 3: JavaScript

スクリプトを初期化し、回転後に表示するコンテンツは「flip.done();」に記述します。

var Flipload = require('flipload');
    box = document.getElementById('box'),
    flip = new Flipload(box);

// Start to load
flip.load();

// Loaded
window.setTimeout(function () {
    flip.done();
}, 5000);

スクリプトのオプションでは回転させる方向、classのカスタマイズ、スピナーなどを設定できます。