div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」
高機能過ぎるjQueryスライドショー「Camera slideshow」
ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」
シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
クリックすると横からメニューが現れるjQueryプラグイン『Sidr』
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』
クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』
ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」
Jquery Interactive Animated Menu
メニューがゆっくり回転するアニメーションになっています。
この「Jquery Interactive Animated Menu」を利用すれば簡単に実現できます。
CSSや画像を少し変更するだけでも、ユニークなトップページが作れますので、専門的な知識がなくても使われている画像を変更したりして利用できると思います。ポートフォリオ用のサイトにも適してそうですね。
サンプルを作ってみました。
サンプルは使われている画像を変更しただけです。
最新のブラウザに対応していますので、古いブラウザでは動作しない場合があります。
この「Jquery Interactive Animated Menu」の入手方法と利用方法は続きをどうぞ。
→「観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」」の続きを読む
Link Scraper TextBox – Jquery Plugin
facebookでは投稿欄にURLを入力するとそのリンク先の情報が自動的に取得されて表示されます。こんな感じですね。
この機能をjQueryで実現できるのが、このjQueryプラグイン「Link Scraper TextBox」です。
サンプルは下のようになります。テキストボックスにURLを入力してしばらくするとタイトル、description、ページ内で使用している画像を取得します。
設置方法も簡単ですので、アイデア次第でいろいろと利用できそうです。
→「facebookのようにリンク先のURLを入力するとリンク先の情報が表示されるjQueryプラグイン「Link Scraper TextBox」」の続きを読む
メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。
本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。
参考：NEXT A-Class │ メルセデス・ベンツ日本公式サイト
このサイトを一部再現してみたいと思います。（注意：現在リニューアルされています。2016/10）
今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。
サンプルページを作ってみました
過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で、背景にYouTube動画を流すことが出来るjQueryを紹介しました。今回の「jquery.mb.YTPlayer」は「jquery-tubular」と違ってHTMLのBODYで要素として設定しています。
背景動画を透過させることが出来たり、ループさせたりと細かな設定が可能です。
この「jquery.mb.YTPlayer」は、ページの背景に動画を流すだけではなく、好きなYouTube動画をサイトで紹介することが出来るクロムレスプレイヤーにもなりますが、今回はページの背景で動画を流す方法を説明したいと思います。
ネットショップでアイテム紹介に使える商品スライダーのソースを紹介します。CSSとjQueryを使用してあります。
シンプルかつ、モダンなインパクトのあるアイテムスライダーです。
カテゴリーごとにアイテムが横に飛び去っていくような効果があり、スピード感があります。
Apple（アップル）のサイトで使われているようなカッコいいスライダーが実現できそうですね。
サンプルページを作ってみました。（サンプルで紹介しているアイテムは実際にご購入できます。）
商品数の限られたネットショップのトップページや、注目アイテムの紹介などにも活用できそうです。
→「ネットショップに最適。目を引くクールな商品スライダー「Simple Multi-Item Slider 」」の続きを読む
「jq-tiles」はお洒落なCSS3エフェクトが選べる画像スライドショー用jQueryプラグインです。CSS3ならではのふわっとしたエフェクトや立体感のあるエフェクトが用意されています。
サンプルはこちら
画像にマウスオーバーするとキランと光ったような効果が出せるのが、jQueryプラグイン「jQuery Gloss」です。
クリスマスのムードのこの時期。トップ画像やバナー画像などで、ちょっと目を引くこの効果を利用すると良いのではないでしょうか？
サンプルはこちら
ファイルのサイズも２ｋ程度で軽く、設置も簡単に出来ます。
PFold: Paper-Like Unfolding Effect
折りたたんだ紙を開いているようなアニメーションを見せることが出来るのが、このjQueryプラグイン「PFold」です。
サンプルページを作ってみました。
見た頂いたらわかると思いますが、立体的に紙が開いてコンテンツを表示します。
（残念ながら、IE8などCSS3に対応していない古いブラウザでは動作しません。）
オプション設定によっては色々な動きができますが、ここでは基本なものを説明します。
Windy – A Plugin for Swift Content Navigation
このjQueryプラグイン「Windy」を使用すると、まるで写真やカードが風でひらひらと飛ばされてしまっているように画像をめくっていくことができます。
サンプルを見て頂くと分かると思います。
このjQueryプラグイン「Windy」を使用して、あまりスペースがないところでも印象的にカッコ良く複数の画像を見せることができそうですね。画像だけでなくテキストや見出しも表示することができます。
jQueryプラグイン「Windy」の使用方法は続きをご覧下さい。
Nice “Flashy” menu with Jquery.
jQueryでまるでFlash（フラッシュ）で作ったかのようにアニメーションする動きのあるメニューを導入できる「Nice “Flashy” menu with Jquery」を紹介します。
メニューにマウスオーバーしたときにカッコ良くアニメーションします。
まずはサンプルをご覧下さい。
背景画像をウィンドウズサイズの大きさにあわせて表示する機能も付いていますので、これを利用するだけで見栄えのするトップページが作れてしまいます。
美容やファッション、レストランなどお洒落なサイトに良さそうですね。
このFlash（フラッシュ）のようなjQueryメニューナビゲーションの設置方法は続きをどうぞ。
→「Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」」の続きを読む
「Real Shadow」は要素に影を付けることができるjQueryプラグインです。カーソルの位置を光源としてカーソルの動きに合わせて影も動きます。
白を基調としたデザインのサイトで映えそうですね。
サンプルを作ってみました。
メニューに影をつけたり、アイコンや画像にちょっとしたアクセントを付けるときに良さそうです。
導入も簡単ですよ。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑