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」
Responsive Multi-Level Menu | Codrops
今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。
限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。
まずは、サンプルをご覧下さい。
古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。
→「レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」」の続きを読む
スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。
FacebookのページやYouTubeでも使われていますね。画面の広さが限られたなかでは、必要となってくる機能です。
今回はこのメニューをjQueryプラグインを使って簡単に作ってしまいましょう。
サンプルを２つ作ってみました。
設置もとても簡単です。
Text Opening Sequence with CSS Animations | Codrops
今回は、テキストを映画のトレーラーやオープニング風にアニメーションさせて表示させる「Text Opening Sequence with CSS Animations 」を紹介します。
サンプルをみていただいたほうがわかりやすいと思います。
（古いInternet ExplorerなどのCSS３に対応していないブラウザでは作動しません。）
まるでフラッシュを使っているような動きですね。使用されているのはCSSですので、テキストを簡単に変更できます。またフラッシュを使用するよりもSEO的に効果が見込まれそうです。
→「映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」」の続きを読む
コナミコマンドというのは、ファミコンのゲームをはじめ様々なコンピューターゲームに登場する隠しコマンドのこと。ゲーム好きな方にはお馴染みですね。
ファミコンのグラディウスというシューティングゲームで、コントロールボタンから「上上下下左右左右BA」とコマンドを入力すると一瞬にしてオプションフル装備になるという裏ワザがありました。懐かしいですね。コナミコマンド初登場はこのファミコン版グラディウスだということです。
このコナミコマンド（隠しコマンド）を実装するサンプルを作ってみましたのでご覧下さい。
サンプルではキーボードの矢印キーから「↑↑↓↓←→←→」と入力してみて下さい。打ち間違えたらリロードしてまた試してみて下さい。
設置もすごく簡単です。使用方法は続きをどうぞ。
今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。
最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。
設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。
サンプルを作ってみました。
各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。
Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。
今や定番となっている「スクロールアップ」ボタン。スクロールしているとあらわれて、クリックするとトップへするするとスクロールしてくれるというボタンです。
インターネットで検索すると様々な「スクロールアップ」ボタンを見つけることができて、迷ってしまいます。
いろいろなシーンに合わせて簡単に利用できて、エフェクトも綺麗なjQueryプラグイン「scrollUp jQuery plugin」がオススメです。
サンプルを作ってみました。
今のホームページにそのまま組み込むだけで、「スクロールアップ」ボタンの設置が出来ますのでとても簡単で便利です。
設置方法は続きをどうぞ。
→「上（トップ）へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」」の続きを読む
画像にカーソルを合わせると画像が変わるというという効果を「ロールオーバー」といいます。
メニューやカートに入れるなどのボタンでもよく使われていますね。
画像のロールオーバーはCSSやJavaScript（jQuery）を使用して実装することができますが、「smoothRollOver.js」というjQueryプラグインを使用すると、比較的カンタンに実装できる上にロールオーバー効果をなめらかにすることが出来るようです。
今回は、jQueryのみのロールオーバー時と「smoothRollOver.js」プラグインを利用したロールオーバー時がどの程度違うかを比較するために、実装方法も合わせて説明したいと思います。
まずはサンプルを作ってみました。
好みもあると思いますので、好みやデザインに合わせて使い分けたいですね。
それぞれの設定方法は続きをご覧下さい。
→「画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。」の続きを読む
サイドバー風のナビゲーションパーツをスクロールさせても一定の場所に固定してくれるのが、このjQueryプラグイン『stickyMojo』です。動作も軽くスムーズで、違和感がない固定のサイドナビゲーションが実装できるので便利です。
サンプルを作ってみました。
フッターのコンテンツまでくると、フッターと重ならないように調整してくれますね。このように画面をリサイズしてもメインコンテンツと重ならない、またフッターコンテンツと重ならないように固定できます。
設置の仕方も簡単です。
→「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」の続きを読む
高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。
サンプルを作ってみました。ご覧下さい。
フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。
今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。（めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。）
では、サンプルを作ってみましたのでご覧下さい。
最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。
→「めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑