Categoryアニメーション

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


spritespin jQuery plugin

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

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

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

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

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

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

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」」の続きを読む

折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」


PFold: Paper-Like Unfolding Effect

折りたたんだ紙を開いているようなアニメーションを見せることが出来るのが、このjQueryプラグイン「PFold」です。

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

→ 折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル


見た頂いたらわかると思いますが、立体的に紙が開いてコンテンツを表示します。
(残念ながら、IE8などCSS3に対応していない古いブラウザでは動作しません。)

オプション設定によっては色々な動きができますが、ここでは基本なものを説明します。

→「折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」」の続きを読む

写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」

Windy – A Plugin for Swift Content Navigation

このjQueryプラグイン「Windy」を使用すると、まるで写真やカードが風でひらひらと飛ばされてしまっているように画像をめくっていくことができます。

サンプルを見て頂くと分かると思います。

→ 写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」サンプル


このjQueryプラグイン「Windy」を使用して、あまりスペースがないところでも印象的にカッコ良く複数の画像を見せることができそうですね。画像だけでなくテキストや見出しも表示することができます。

jQueryプラグイン「Windy」の使用方法は続きをご覧下さい。

→「写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」」の続きを読む

Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」


Nice “Flashy” menu with Jquery.

jQueryでまるでFlash(フラッシュ)で作ったかのようにアニメーションする動きのあるメニューを導入できる「Nice “Flashy” menu with Jquery」を紹介します。

メニューにマウスオーバーしたときにカッコ良くアニメーションします。

まずはサンプルをご覧下さい。

→ Flashのようなクールなメニューナビゲーションを実現「Nice “Flashy” menu with Jquery」サンプル


背景画像をウィンドウズサイズの大きさにあわせて表示する機能も付いていますので、これを利用するだけで見栄えのするトップページが作れてしまいます。

美容やファッション、レストランなどお洒落なサイトに良さそうですね。

このFlash(フラッシュ)のようなjQueryメニューナビゲーションの設置方法は続きをどうぞ。

→「Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」」の続きを読む

まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」

今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。

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

→ jQueryプラグイン「jquery.jaticker.js」サンプル


設置方法も簡単です。使用方法は続きをご覧下さい。

→「まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」」の続きを読む

好きな要素をにゅるっとズーム(拡大)させるjQueryプラグイン「Zoomooz.js」

Zoomooz.js

Zoomooz.jsは、Webページの要素のズームを行うためのjQueryプラグインです。

画像をズームさせてギャラリー風に見せたり、テキストを一部拡大させて効果的にみせたりすることに使用することができます。しかも設置方法は簡単です。

サンプルはこちらからどうぞ

→ 好きな要素をにゅるっとズーム(拡大)させるjQueryプラグイン「Zoomooz.js」サンプル


うまく組み合わせて使えば、アイデア次第ではWEBサイトだけでなく、Preziのようにプレゼンにも使うことも出来そうです。

「Zoomooz.js」の設置方法は続きをご覧ください。

→「好きな要素をにゅるっとズーム(拡大)させるjQueryプラグイン「Zoomooz.js」」の続きを読む

テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」

テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。
テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すことができます。

しかも、導入はいたってシンプル簡単です。

サンプルページを作ってみました。ご覧ください。

→ テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」サンプル


日本語のテキストでもきちんと表示されていますね。

→「テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」」の続きを読む