[JS]画像やパネルの上をクリックしたら上辺が、中央なら全体が押されたようなエフェクトを適用できるスクリプト -whichTriangle

Post on:2014年7月9日

パネルや画像など一つの矩形の要素は通常、矩形全体が一つのホットスポットですが、四辺それぞれと中央の計5つのクリックできるホットスポットにし、それぞれ異なるアクションやエフェクトを仕込めるjQueryのプラグインを紹介します。

↓のように、中央だと全体がへこみ、上だと上辺が傾き、右・下・左もそれぞれの辺が傾くといったこともできます。

デモのアニメーション

whichTriangle.js
whichTriangle.js -GitHub

whichTriangle.jsのデモ

デモページではその実際の動作を試すことができます。
Chrome, Safari, Firefox, Opera、IEは6+でご覧ください。

サイトのキャプチャ

デモページ

スクリプトの仕組みは、要素を4つの三角形と中央のエリア（デモは100pxの円）に分け、クリックできるホットスポットを設定します。

デモのアニメーション

スクリプトの仕組み

whichTriangle.jsの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。
※IE8以下をサポートする時は、jQueryは 1.7.0以下を使用。

<head>
  ...
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="./lib/whichTriangle.min.js"></script>
</head>

Step 2: HTML

divなどでパネルを配置します。

<div class="panel">
  <p>パネル</p>
</div>

Step 3: JavaScript

jQueryのセレクタでパネルを指定し、スクリプトを実行します。
「midDiameter」は中央領域で、円状のサイズです。

$('div.panel').setupTriangles( {'midDiameter': 100} )

スクリプトを実行すると、上・右・下・左、中央で0-4の値を返すので、アクティブ時にclassを加えるようにしておくと、それぞれスタイルシートでエフェクトを簡単に与えることができます。
例：上は「.transform-top-back」、右は「transform-right-back」

                    var c = $this.whichTriangle(e);
                    switch (c) {
                    case 0:
                        $this.removeClass(activeClass + '-origin').addClass('transform-top-back');
                        activeClass = 'transform-top-back';
                        $this.addClass(activeClass + '-origin');
                        break;
                    case 1:
                        $this.removeClass(activeClass + '-origin').addClass('transform-right-back');
                        activeClass = 'transform-right-back';
                        $this.addClass(activeClass + '-origin');
                        break;
                    case 2:
                        $this.removeClass(activeClass + '-origin').addClass('transform-bottom-back');
                        activeClass = 'transform-bottom-back';
                        $this.addClass(activeClass + '-origin');
                        break;
                    case 3:
                        $this.removeClass(activeClass + '-origin').addClass('transform-left-back');
                        activeClass = 'transform-left-back';
                        $this.addClass(activeClass + '-origin');
                        break;
                    case 4:
                        $this.removeClass(activeClass + '-origin').addClass('transform-whole-back');
                        activeClass = 'transform-whole-back';
                        $this.addClass(activeClass + '-origin');
                        break;
                    default:
                        $this.removeClass(activeClass).removeClass(activeClass + '-origin');
                        break;
                    }
                    mouseupFired = false;

このスクリプトもプラグインに含めてしまってもよかったのでは、と思いました。

sponsors

top of page

©2024 coliss