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プラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。
特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。
画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。
タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。
サンプルを作ってみました。
オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。
スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。
メニューアイコンをクリックすると、にゅるっと動いて各メニューが現れます。スマホファーストのお洒落なサイトに良いのではないでしょうか。もちろん、パソコンでもいい感じです。
パソコンの古いブラウザでは動きません。スマホやタブレットでは大丈夫でしょう。
クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。
中央の円（トリガー）をクリックすると、それを囲む様にメニューが飛び出します。メニューの飛び出す方向は、円状の、半円、1/4円に変更することが出来ます。
まずはサンプルをご覧下さい。
アニメーションするスピードや飛び出すときの効果などもカスタマイズできます。
メニューに使うのもよし、イメージギャラリーにするのもよし、アイデア次第ではサイトにユニークな演出を与えることができそうです。
設置方法は続きをご覧下さい。
メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。
スクロールさせても、ナビゲーションバーがページの上部に固定されます。
サンプルをご覧下さい。
ワンページスクロールサイトの人気はまだまだ続いていますね。ワンページスクロールサイトは訪問者にとって迷いにくいデザインです。必要な情報を確実に見て貰いたいという場合には有効です。
一から作ろうとすると意外と手間のかかるナビゲーション付きワンページスクロールサイトですが、このjQueryプラグインを使用すると簡単です。
それでは、設置方法の説明をします。
カルーセルとは、画像やテキストなどのコンテンツを横にスライドさせながら表示させるWebデザインです。Amazonや楽天などのECサイトでもよく見られますね。
カルーセルを実装するjQueryプラグインやJavascriptはいろいろなサイトで多数紹介されていますが、ここではおなじみの＜ul＞要素を自動的にカルーセルに変換して表示してくれるjQueryプラグイン『dbpasCarousel』を紹介します。
サンプルをご覧下さい。
設定もいたって簡単。jQueryを読みこませて、＜ul＞タグと＜li＞タグを利用してリスト表示で記述するだけです。
では使用方法をみてみましょう。
ページ上の好きな所で、ボタンひとつでメニューを呼び出して表示することができたら便利だと思いませんか？
今回ご紹介する『jQuery HoverMenu』は、Ctrlキーを押すことで簡単にメニューが呼び出せるものです。
サンプルを見て頂いたほうがわかりやすいと思います。
デフォルトではCtrlキーが対応していますが、割り当てるキーの変更も可能です。
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」とコマンドを入力すると一瞬にしてオプションフル装備になるという裏ワザがありました。懐かしいですね。コナミコマンド初登場はこのファミコン版グラディウスだということです。
このコナミコマンド（隠しコマンド）を実装するサンプルを作ってみましたのでご覧下さい。
サンプルではキーボードの矢印キーから「↑↑↓↓←→←→」と入力してみて下さい。打ち間違えたらリロードしてまた試してみて下さい。
設置もすごく簡単です。使用方法は続きをどうぞ。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑