Authorpannyatto

商品画像を360度回転させてみせることができるjQueryプラグイン「Spritespin」

spritespin jQuery plugin

ネットショップなどではいかに商品をお客様に伝えるかが大切になります。商品によっては360度全方向から商品のイメージをみせたい場合もあるでしょう。

このjQueryプラグイン「Spritespin」を利用すれば360度全方向からのビューが簡単に実現できます。FLASHを使用していないのでiPhoneなどでも表示されます。

サンプルはこちらになります。

→ 商品画像を360度回転させてみせることができるjQueryプラグイン「Spritespin」サンプル

画像を準備すれば簡単に実装できます。ただ商品を回転させながら全角度からうまく撮影するにはちょっと工夫が必要になりますね。

→「商品画像を360度回転させてみせることができるjQueryプラグイン「Spritespin」」の続きを読む

テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」

Sliding Letters with jQuery

「Sliding Letters with jQuery」を利用すると、マウスオーバー(テキストにカーソルを合わせたとき)にお洒落にテキストがが変化します。

ちょっと大胆なメニューやリンクテキストを強調させるのに使えそうです。少しHTMLとCSSがいじれれば簡単にアレンジができます。

サンプルを作ってみました。

→ テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル

ポートフォリオサイトだけでなく、美容室やサロンなどのおしゃれ系なサイトに活用できそうです。背景画像も設定できるので、イメージに合わせて背景画像も変えてみて下さい。

→「テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」」の続きを読む

絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」

Fullscreen Pageflip Layout

本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は、こちらの「Fullscreen Pageflip Layout 」を利用すると良さそうです。

ぺらぺらの紙をめくるというよりは、絵本のような厚みのある紙をめくっているような感じが実現されています。

サンプルを作ってみました。

→ 絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」サンプル

※IE8など古いブラウザではアニメーションは動作しません。

次のライブラリーやjQueryプラグインを組み合わせて作ってあります。

  1. BookBlock by Pedro Botelho
  2. Custom jQuery++ by Bitovi
  3. jScrollPane by Kevin Luck
  4. jQuery Mouse Wheel Plugin by Brandon Aaron
  5. Custom Modernizr (peek inside to see what this build includes)

難しそうですが、ソースを一式配布してあるのでそのソースを利用してコンテンツを変更すれば簡単に実現できます。

→「絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」」の続きを読む

iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」

Jquery Magical Contact Form

iPhoneの画像を利用したとても個性的なアニメーションコンタクトフォームを紹介します。

「Magical Contact Form」と名付けられたユニークな効果のあるフォームです。なぜかiPhoneにカードが収められて飛んでいきます。テキストを入力しているときのアニメーションもユニークです。

画像を変更するだけでも容易にカスタマイズできますので、初心者のかたでもデザイン変更が簡単にできます。

サンプルを作ってみました。サンプルといっても画像を変更しただけです。

→ iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」

※実際に送信はされません。

過去の記事で、色々なモバイル端末のPSDファイルを紹介しています。利用すれば面白いフォームが出来ると思います。
iPhone、iPadやMacなどのディスプレイを集めたPhotoshop(フォトショップ)端末ディスプレイPSD無料素材集

もちろん敢えてiPhoneなどの画像にこだわらなくても、自分で封筒の画像を用意するなど発想次第でユニークなデザインが実現出来ると思います。

→「iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」」の続きを読む

観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」

Jquery Interactive Animated Menu
メニューがゆっくり回転するアニメーションになっています。
この「Jquery Interactive Animated Menu」を利用すれば簡単に実現できます。

CSSや画像を少し変更するだけでも、ユニークなトップページが作れますので、専門的な知識がなくても使われている画像を変更したりして利用できると思います。ポートフォリオ用のサイトにも適してそうですね。

サンプルを作ってみました。

→ 観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」サンプル

サンプルは使われている画像を変更しただけです。

最新のブラウザに対応していますので、古いブラウザでは動作しない場合があります。

この「Jquery Interactive Animated Menu」の入手方法と利用方法は続きをどうぞ。

→「観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」」の続きを読む

facebookのようにリンク先のURLを入力するとリンク先の情報が表示されるjQueryプラグイン「Link Scraper TextBox」

Link Scraper TextBox – Jquery Plugin
facebookでは投稿欄にURLを入力するとそのリンク先の情報が自動的に取得されて表示されます。こんな感じですね。
facebookでのURL入力例

この機能をjQueryで実現できるのが、このjQueryプラグイン「Link Scraper TextBox」です。

サンプルは下のようになります。テキストボックスにURLを入力してしばらくするとタイトル、description、ページ内で使用している画像を取得します。

→ facebookのようにリンク先のURLを入力するとリンク先の情報が表示されるjQueryプラグイン「Link Scraper TextBox」サンプル

設置方法も簡単ですので、アイデア次第でいろいろと利用できそうです。

→「facebookのようにリンク先のURLを入力するとリンク先の情報が表示されるjQueryプラグイン「Link Scraper TextBox」」の続きを読む

YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」

jQuery.mb.YTPlayer

メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。

本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。

参考:NEXT A-Class │ メルセデス・ベンツ日本公式サイト

このサイトを一部再現してみたいと思います。(注意:現在リニューアルされています。2016/10)

今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。

サンプルページを作ってみました

YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル

過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で、背景にYouTube動画を流すことが出来るjQueryを紹介しました。今回の「jquery.mb.YTPlayer」は「jquery-tubular」と違ってHTMLのBODYで要素として設定しています。

背景動画を透過させることが出来たり、ループさせたりと細かな設定が可能です。

この「jquery.mb.YTPlayer」は、ページの背景に動画を流すだけではなく、好きなYouTube動画をサイトで紹介することが出来るクロムレスプレイヤーにもなりますが、今回はページの背景で動画を流す方法を説明したいと思います。

→「YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」」の続きを読む

ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」

ネットショップでアイテム紹介に使える商品スライダーのソースを紹介します。CSSとjQueryを使用してあります。

シンプルかつ、モダンなインパクトのあるアイテムスライダーです。

カテゴリーごとにアイテムが横に飛び去っていくような効果があり、スピード感があります。
Apple(アップル)のサイトで使われているようなカッコいいスライダーが実現できそうですね。

サンプルページを作ってみました。(サンプルで紹介しているアイテムは実際にご購入できます。)

→ ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」サンプル

商品数の限られたネットショップのトップページや、注目アイテムの紹介などにも活用できそうです。

→「ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」」の続きを読む

タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」

「jq-tiles」はお洒落なCSS3エフェクトが選べる画像スライドショー用jQueryプラグインです。CSS3ならではのふわっとしたエフェクトや立体感のあるエフェクトが用意されています。

サンプルはこちら

→ タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」サンプル

→「タイル状のエフェクトが美しい画像スライダーjQueryプラグイン「jq-tiles」」の続きを読む

カーソルをのせるとキランと画像を光らせるjQueryプラグイン「jQuery Gloss」

jQuery Gloss

画像にマウスオーバーするとキランと光ったような効果が出せるのが、jQueryプラグイン「jQuery Gloss」です。

クリスマスのムードのこの時期。トップ画像やバナー画像などで、ちょっと目を引くこの効果を利用すると良いのではないでしょうか?

サンプルはこちら

→ カーソルをのせるとキランと画像を光らせるjQueryプラグイン「jQuery Gloss」サンプル

ファイルのサイズも2k程度で軽く、設置も簡単に出来ます。

→「カーソルをのせるとキランと画像を光らせるjQueryプラグイン「jQuery Gloss」」の続きを読む