CategoryjQueryプラグイン

観覧車のように回るアニメーションメニュー「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」」の続きを読む

折りたたんだ紙を開くような効果のある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プラグイン「Real Shadow」

Real Shadow

「Real Shadow」は要素に影を付けることができるjQueryプラグインです。カーソルの位置を光源としてカーソルの動きに合わせて影も動きます。

白を基調としたデザインのサイトで映えそうですね。

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

簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」サンプル

メニューに影をつけたり、アイコンや画像にちょっとしたアクセントを付けるときに良さそうです。

導入も簡単ですよ。

→「簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」」の続きを読む