ページをめくるような動きで下の画像を表示させることができるjQueryプラグイン「jQuery Peelback」をご紹介します。
ラノベや漫画本以外あまり読まない私ですが、今回は楽しくめくらせていただきます｜ω＾）
「jQuery Peelback」プラグインの使用方法
ファイル読込
下記から「jQuery Peelback」をダウンロードします。
「jQuery Peelback」
http://www.ravelrumba.com/blog/jquery-peel-back-ad
以下のようにダウンロードしたファイルを読み込みます。
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.peelback.js"></script> |
JS
今回はbodyに指定します。
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { $('body').peelback({ adImage : '下に表示させたい画像', peelImage : 'ページをめくる画像', clickURL : 'クリックしたときのURL', smallSize: 100, bigSize: 700, autoAnimate: true }); }); |
peelImageが、めくるために必要な画像です。
この画像のsmallSizeを指定して最初の画像の大きさを指定し、
bigSizeでめくれる最大の大きさを指定しています。
このときの注意点として、画像が斜めにめくれるので、見せたい画像の左下部分が見えなくなります。
サンプル
「jquery.Peelback」を使用したデモページを用意しました。
「jquery.Peelback」プラグインを使用したデモページ
まとめ
以上、ページをめくるような動きで下の画像を表示させることができる「jQuery Peelback」をご紹介しました。
このようなユニークな動きでバナーや広告などを作ったら面白いですよね。
ユーザーを楽しませることもサイトの魅力に繋がります(*‘ω‘ *)
ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください！
お気軽にご相談ください。
022-716-3883
営業時間 平日9:30～18:00
関連記事
Category
最近の投稿
人気の投稿
