2021.12.4|JavaScript(jQuery)
画像をペラペラめくれるjQuery「Quick Flip」の設定方法
ホームページの画像をクリックしたときに、jQueryライブラリを使うことによって、画像がペラペラめくれて表示をすることができます。
画像アクションやインパクトに飽きてしまった方にはお勧めです。
画像をペラペラめくって表示させるjQueryプラグイン「Quick Flip Plugin」の設定方法を解説します。
画像をペラペラめくって表示させる設定方法
1.jQueryライブラリをダウンロード
下記からJavaScriptライブラリ、のダウンロードを行ってください。
jQueryライブラリダウンロード
Quick Flip jQuery Pluginダウンロード
2.htmlファイル内に記述
「JavaScript」ファイルへのディレクトリをメタタグに記述します。
htmlファイルにJavaScriptの記述
<meta charset="UTF-8">
<title>画像をペラペラめくれる「Quick Flip」の設定方法|Webデザイナーブログ</title>
<meta name="description" content="jQueryを使った画像をペラペラめくれるjQuery「quickFlip」のご紹介を致します。">
<meta name="keywords" content="WEBデザイナー,ホームページ作成方法,画像,jquery.quickflip.source.js,ペラペラ,めくれる">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/004/base.css" media="all" />
<script type="text/javascript" src="/sample/004/jquery.js"></script>
<script type="text/javascript" src="/sample/004/jquery.quickflip.source.js"></script>
<script type="text/javascript">
$(function(){
$('.quickFlip').quickFlip();
$('.quickFlip2').quickFlip();
$('.quickFlip3').quickFlip();
$('.quickFlip4').quickFlip();
});
</script>
ペラペラめくる画像の記述
表パネルと裏パネル用に2枚の画像を用意します。
※ここで画像を記載する際に画像コードの中に「class=”quickFlipCta”」を記述。
※ヘッダーに記述してるjavascriptコードと同じクラス名を記述。
<div class="quickFlip">
<div class="blackPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics01.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
<div class="redPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics01_down.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
</div>
<div class="quickFlip2">
<div class="blackPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics02.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
<div class="redPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics02_down.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
</div>
<div class="quickFlip3">
<div class="blackPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics03.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
<div class="redPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics03_down.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
</div>
<div class="quickFlip4">
<div class="blackPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics04.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
<div class="redPanel">
<a href="#" class="quickFlipCta"><img src="/sample/004/img/topics04_down.jpg" alt="WEBデザイナー" width="248" height="340" /></a>
</div>
</div>
実装サンプル
実装サンプルを作りましたのでこちらでも確認してみてください。
QuickFlip jQuery デモ
まとめ
以上で設定完了となりますが、簡単に設定ができますね。
ここでご紹介した「Quick Flip jQuery Plugin」はあまり使われているWebサイトが少ないので使ってみても良いかと思います。
画像アクションを表現するプラグインは沢山ありますので、色んなプラグインを試してみるのも良いですね。