[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js

Post on:2014年2月18日

写真画像やアイコンなどを配置したベタ塗りのボタンなどをサークル状にし、ホバーするとシールのようにぺらっとめくれるようにするスクリプトを紹介します。

実装は非常に簡単で、jQueryなどの他のスクリプトは必要ありません。

デモのアニメーション

Sticker.js
Sticker.js -GitHub

Sticker.jsのデモ

デモはChrome, Safari, Firefox, Opera, IE10+でご覧ください。

上記のアニメーションは左からのぺらっですが、上下左右の全ての方向からぺらっができます。右のベタ塗りはめくるとシャドウが半透明で適用されます。

デモのアニメーション

Sticker.jsのデモ（上下左右からぺらっ）

画像をめくった際に、裏の画像がしっかり反転してるのもリアル！

ページ下部のフッタにあるようなソーシャルメディアのアイコンなどに使ってもかわいいですね。

デモのアニメーション

Sticker.jsのフッタ

最初のデモは写真画像なのでカーソルはアローですが、フッタのはリンクなのでポインターになっています。

Sticker.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして</body>の上あたりに記述します。

<body>
  コンテンツ
  ...
<script type="text/javascript" src="sticker.min.js"></script>
</body>

Step 2: HTML

ぺらっとめくる要素はdivなどで実装します。
「.sticker」はべらっとめくる共通のclass、「.exaple-」は個々のスタイルです。

<div class="sticker example-1"></div>

<div class="sticker example-2"></div>

Step 3: CSS

画像やベタ塗りは、スタイルシートで指定します。

.sticker {
    width: 180px;
    height: 180px;
}

// 画像は背景画像として配置
.example-1 .sticker-img {
    background-image: url(heroes-2.png);
}

// ベタ塗り
.example-2 .sticker-img {
    background-color: #ff4a85;
}

// シャドウの不透明度を変更
.example-2 .sticker-shadow {
     opacity: 0.6;
}

Step 4: JavaScript

ぺらっとめくる要素を指定して、スクリプトを実行します。
※共通のclassだけでなく、固有のidを対象にすることも可能です。

<script type="text/javascript">
    window.onload = function() {
        Sticker.init('.sticker');
    }
</script>

sponsors

top of page

©2024 coliss