CategoryjQueryプラグイン

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」

jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。

特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。

画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。

タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。

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

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル

オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。

→「タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」」の続きを読む

にゅるっと出てくるスマホで便利なお洒落メニュー「Animated Border Menus 」

スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。

メニューアイコンをクリックすると、にゅるっと動いて各メニューが現れます。スマホファーストのお洒落なサイトに良いのではないでしょうか。もちろん、パソコンでもいい感じです。

サンプルをご覧下さい。> にゅるっと出てくるスマホで便利なお洒落なメニュー「Animated Border Menus 」サンプル


パソコンの古いブラウザでは動きません。スマホやタブレットでは大丈夫でしょう。

→「にゅるっと出てくるスマホで便利なお洒落メニュー「Animated Border Menus 」」の続きを読む

メニューが飛び出すjQueryプラグイン「Pop Circle」

Pop Circle

クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。

中央の円(トリガー)をクリックすると、それを囲む様にメニューが飛び出します。メニューの飛び出す方向は、円状の、半円、1/4円に変更することが出来ます。

まずはサンプルをご覧下さい。

→ メニューが飛び出すjQueryプラグイン「Pop Circle」サンプル

アニメーションするスピードや飛び出すときの効果などもカスタマイズできます。

メニューに使うのもよし、イメージギャラリーにするのもよし、アイデア次第ではサイトにユニークな演出を与えることができそうです。

設置方法は続きをご覧下さい。

→「メニューが飛び出すjQueryプラグイン「Pop Circle」」の続きを読む

超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』


SMINT

メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。

スクロールさせても、ナビゲーションバーがページの上部に固定されます。

サンプルをご覧下さい。

→ 超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル


ワンページスクロールサイトの人気はまだまだ続いていますね。ワンページスクロールサイトは訪問者にとって迷いにくいデザインです。必要な情報を確実に見て貰いたいという場合には有効です。

一から作ろうとすると意外と手間のかかるナビゲーション付きワンページスクロールサイトですが、このjQueryプラグインを使用すると簡単です。

それでは、設置方法の説明をします。

→「超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』」の続きを読む

ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』


dbpas / dbpasCarousel

カルーセルとは、画像やテキストなどのコンテンツを横にスライドさせながら表示させるWebデザインです。Amazonや楽天などのECサイトでもよく見られますね。

カルーセルを実装するjQueryプラグインやJavascriptはいろいろなサイトで多数紹介されていますが、ここではおなじみの<ul>要素を自動的にカルーセルに変換して表示してくれるjQueryプラグイン『dbpasCarousel』を紹介します。

サンプルをご覧下さい。

「ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル」


設定もいたって簡単。jQueryを読みこませて、<ul>タグと<li>タグを利用してリスト表示で記述するだけです。

では使用方法をみてみましょう。

→「ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』」の続きを読む

ボタンひとつで呼び出せるクイックアクセスメニュー『jQuery HoverMenu』

HoverMenu

ページ上の好きな所で、ボタンひとつでメニューを呼び出して表示することができたら便利だと思いませんか?

今回ご紹介する『jQuery HoverMenu』は、Ctrlキーを押すことで簡単にメニューが呼び出せるものです。

サンプルを見て頂いたほうがわかりやすいと思います。

ボタンひとつで呼び出せるクイックアクセスメニュー『jQuery HoverMenu』サンプル


デフォルトではCtrlキーが対応していますが、割り当てるキーの変更も可能です。

→「ボタンひとつで呼び出せるクイックアクセスメニュー『jQuery HoverMenu』」の続きを読む

レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」

Responsive Multi-Level Menu | Codrops

今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。

限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。

まずは、サンプルをご覧下さい。

レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル


古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。

→「レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」」の続きを読む

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』


Sidr

スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。

FacebookのページやYouTubeでも使われていますね。画面の広さが限られたなかでは、必要となってくる機能です。

今回はこのメニューをjQueryプラグインを使って簡単に作ってしまいましょう。

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

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その1

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その2



設置もとても簡単です。

→「クリックすると横からメニューが現れるjQueryプラグイン『Sidr』」の続きを読む

映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」


Text Opening Sequence with CSS Animations | Codrops

今回は、テキストを映画のトレーラーやオープニング風にアニメーションさせて表示させる「Text Opening Sequence with CSS Animations 」を紹介します。

サンプルをみていただいたほうがわかりやすいと思います。

映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」サンプル


(古いInternet ExplorerなどのCSS3に対応していないブラウザでは作動しません。)

まるでフラッシュを使っているような動きですね。使用されているのはCSSですので、テキストを簡単に変更できます。またフラッシュを使用するよりもSEO的に効果が見込まれそうです。

→「映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」」の続きを読む

コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」


Cheat Code

コナミコマンドというのは、ファミコンのゲームをはじめ様々なコンピューターゲームに登場する隠しコマンドのこと。ゲーム好きな方にはお馴染みですね。

ファミコンのグラディウスというシューティングゲームで、コントロールボタンから「上上下下左右左右BA」とコマンドを入力すると一瞬にしてオプションフル装備になるという裏ワザがありました。懐かしいですね。コナミコマンド初登場はこのファミコン版グラディウスだということです。

このコナミコマンド(隠しコマンド)を実装するサンプルを作ってみましたのでご覧下さい。

【コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」サンプル】


サンプルではキーボードの矢印キーから「↑↑↓↓←→←→」と入力してみて下さい。打ち間違えたらリロードしてまた試してみて下さい。

設置もすごく簡単です。使用方法は続きをどうぞ。

→「コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」」の続きを読む