JavascriptでjQueryプラグイン化☆画像が流れるように動く

Javascriptでウェブの動きをサンプル制作してみました。

 
JavascriptでjQueryプラグイン化☆画像が流れるように動く

これはキャプチャーです。
トップイメージはjQueryのスライダーで、動きは分割しながらフェードします。
これは既存品をサンプルにして、動きは最初に画像・サイズなどを読み込み、
画像の上に分割分だけspanタグを生成し、spanタグに画像をズラして埋め込み、
それを、setIntervalを使用して、順番にopacityを0にしています。

 

今回自作制作なのは、トップイメージの下コンテンツ部分です。

画像へのマウスオーバーで、画像解説がかぶり表示され、画像クリックで、右の空いている欄に、
解説の詳細テキストが表示されます。コンテンツ部分の複数の画像を各クリックするごとに、
画像が左にスライドし、右にその画像の解説が表示され、読み終えた後に元の配置に戻る
動きが美しく、流れがスムーズで洗練されているので、載せるコンテンツまで
素敵に見えてしまう、自作プラグインに仕上がっています。パターンは全部で4つあります。

 

テキスト部分の記入を満たしたら、どこにもないオリジナルの動きを持った
スタイリッシュなプロモーションサイト、ブランディングサイトとして使える
クオリティに仕上がりました。これはチーム開発時の他スタッフの功績によるもので、
提案した企画がすっかり形になりました。

実装したコードです。

外部ファイルは jq_slider.js jq_move.js style_move.css です

CSSの方は動的な部分ではない部分のモノなので無駄にjsの処理を増やさない為にCSSに記述しました
ホバーで表示される部分の色やテキストについてのCSSになります。

htmlのbody内の部分

id名は何でも構いませんがスクリプト内に  move_数字  というIDを画像の枚数分生成しているのでこのIDだけは付けることが出来ません。

htmlのscript呼び出し部分

下記はこのプラグインを使うなら入力必須な部分ですID名と画像URLだけでも大丈夫ですが説明文がないなら使う必要がないプラグインになってしまいますので

最後に付けるオプションの最後にはカンマはいりません。下記ではdetail_pの最後の ] の後ろにはカンマは付けていません。他のオプションも追加する場合は , カンマを追加して入力します。

全てのオプションを指定すると

外部Javascriptのコードファイルは下記のようになります。

 

ピックアップ記事

  1. ほとんどの人が経験するよく失敗する事の一つが、Wordpressのバージョンアップです。以…
  2. 個人と大企業が互角の舞台はWebだけ
    ・ 個人と大企業が互角の舞台はWebだけ ・ 齋藤天津子のビジョン ・ 齋藤天津子…
  3. ・ UXデザインって何ですか? ・ なぜUXデザイナーが注目されているのですか? …
PAGE TOP