インタラクティブに画像を切り替えるjQuery 「jqFancyTransitions」を使ってサイトのピックアップ部分を考える。

今回は省スペースで複数の画像を切り替えて表示できるjQueryを紹介したいと思います。使い方次第でサイトをより魅力的に使うことができます。しかしそれ意外にもメリットがありますよ。どういうjQueryかはでもページでご確認ください。5パターン作ってます。また本文最後にソースもダウンロード出来るようにしています。

jqFancyTransitionsデモ

ピックアップ情報の見せ方を考える

WEBサイトのヘッダーしたあたりにピックアップを持ってきて、大きい写真で目立たせる。閲覧ユーザーに対して、より注目して欲しい情報を訴求するのに抜群の効果を発揮しますね。でも、そういう情報が複数ある場合どうしますか？
大きな画像を複数並べて表示させることは、他のコンテンツの訴求力を下げてしまいますし、そもそも何が訴えたいのかがブレてきてしまいます。
それは大きなマイナスになりますので、複数の画像やコンテンツを切り替えて表示させる手法を用いて同スペース量で訴求させることを狙います。

画像を切り替えて表示するということ

スライダータイプのjQueryはいろいろなサイトで見ることが出来、こういった見せ方はすごく一般化しているように思えます。
見側に対してもサイト上にある「動き」というものに関して人は鋭く感づくものなので訴求力は多々あると思います。
しかし、このスライドタイプもそれだけ一般化してしまうとユーザー自身が「慣れ」を感じてしまい、それ自体への興味力がどうしても下がってしまいます。これは何に置いても同じで、毎日同じものを見せられても飽きが来てしまいます。

なぜインタラクティブなのか

飽きが来てしまえば当然こちら側としてはもっと楽しそうな物、興味を惹く物で訴求を図ることが重要なポイントだと思います。
今まで見ていない新しいやり方を目にすると人は凄く興味を惹かれますし、刺激されます。
刺激されると当然記憶に残りますよね？
ここが重要かと思います。
この技術自体がそのサイトの利益を直接もたらすわけではありませんが、利益をもたらすにはまず人が見に来る必要があり、さらにはリピーターを増やすことにあります。
こういったインタラクティブなコンテンツはそういう部分の橋架けになるのではないか？と考えられるわけです。
当然他のコンテンツも有益なものでないといけません。あくまでサブ的な扱いです。
これをメインに使ってしまうと、インタラクティブなサイトというイメージのほうが強く、サイトの目的自体がユーザーへ誤解を与えてしまいますので、バランスよく考えて利用することが非常に大事です。

ソースファイル

今回のjQueryは下記サイトを参考にしています。
http://www.workshop.rs/projects/jqfancytransitions/ ※英語表記
これをダウンロードし、CSSやHTMLソースを作成しています。またダウンロード先のjqFancyTransitions.1.8.jsとjQuery1.5を利用しています。

JSファイル

jQuery.fn.jqFancyTransitions.defaults = {
    width: 426, // width of panel{
    height: 200, // height of panel{
    strips: 10, // number of strips{
    delay: 5000, // delay between images in ms{
    stripDelay: 50, // delay beetwen strips in ms{
    titleOpacity: 0.7, // opacity of title{
    titleSpeed: 1000, // speed of title appereance in ms{
    position: 'alternate', // top, bottom, alternate, curtain{
    direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate{
    effect: '', // curtain, zipper, wave{
    navigation: false, // prev next and buttons{
    links : false // show images as links{
};

298行目あたりから始まる部分のwidth等のサイズを利用する画像サイズ等に変更したり、お好みに合わせて設定を変更します。

CSSファイル

.ft-prev,.ft-next{background:#000;}
a { color: #5C7F99; text-decoration: none; }
a:hover { text-decoration: underline; }
a:link.ft-prev,a:link.ft-next,a:visited.ft-prev,a:visited.ft-next{background:#666;color:#fff;}
a:hover.ft-prev,a:hover.ft-next{background:#fff;color:#000;}
.ft-button-el{color:#fc0;}
h2{ margin-top:50px;}
#example1,#example2,#example3,#example4,#example5,#example6 { border: 5px solid #666; -moz-border-radius: 5px; }
.ft-title { padding: 5px 5px; width: 416px; text-align: left; }
.ft-prev, .ft-next { background-color: #000; padding: 0 10px; }
.ft-button-ft-active { color: black; }

JavaScriptが生成するidやclass等にデザインを当てはめます。上記をいじればどうにか使えるかと。

ソースダウンロードは以下よりどうぞ。ご利用は自己責任にてお願い致します。 JSファイル（jqFancyTransitions.zip）: jqFancyTransitions.zip

お役に立てたらお願いします🙇