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プラグインは使用していません。
→「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』」の続きを読む
「Sliding Letters with jQuery」を利用すると、マウスオーバー（テキストにカーソルを合わせたとき）にお洒落にテキストがが変化します。
ちょっと大胆なメニューやリンクテキストを強調させるのに使えそうです。少しHTMLとCSSがいじれれば簡単にアレンジができます。
サンプルを作ってみました。
ポートフォリオサイトだけでなく、美容室やサロンなどのおしゃれ系なサイトに活用できそうです。背景画像も設定できるので、イメージに合わせて背景画像も変えてみて下さい。
→「テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」」の続きを読む
Jquery Interactive Animated Menu
メニューがゆっくり回転するアニメーションになっています。
この「Jquery Interactive Animated Menu」を利用すれば簡単に実現できます。
CSSや画像を少し変更するだけでも、ユニークなトップページが作れますので、専門的な知識がなくても使われている画像を変更したりして利用できると思います。ポートフォリオ用のサイトにも適してそうですね。
サンプルを作ってみました。
サンプルは使われている画像を変更しただけです。
最新のブラウザに対応していますので、古いブラウザでは動作しない場合があります。
この「Jquery Interactive Animated Menu」の入手方法と利用方法は続きをどうぞ。
→「観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」」の続きを読む
Nice “Flashy” menu with Jquery.
jQueryでまるでFlash（フラッシュ）で作ったかのようにアニメーションする動きのあるメニューを導入できる「Nice “Flashy” menu with Jquery」を紹介します。
メニューにマウスオーバーしたときにカッコ良くアニメーションします。
まずはサンプルをご覧下さい。
背景画像をウィンドウズサイズの大きさにあわせて表示する機能も付いていますので、これを利用するだけで見栄えのするトップページが作れてしまいます。
美容やファッション、レストランなどお洒落なサイトに良さそうですね。
このFlash（フラッシュ）のようなjQueryメニューナビゲーションの設置方法は続きをどうぞ。
→「Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑