jQueryプラグイン「stickUp」はページの上部にメニューを固定して表示させることができるjQueryプラグインです。
ワンページスクロールサイトのみならず、縦長にコンテンツがあるページにメニューを固定させて表示させておくというのは、最近よく使われる手法です。
サンプルを作ってみましたので、みてもらうとわかりやすいと思います。
⇒ スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」サンプル
設置の仕方も簡単にできる便利なjQueryプラグインです。
Page 3 of 10
今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。
このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。
サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。
レスポンシブデザインにぴったりな横スクロールスライダー『Portfoliojs』サンプル
スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。
→「スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン」の続きを読む
『rainyday.js』は、まるでガラス越しの風景に雨が降ってきたかのようなエフェクトを出すJavaScriptです。HTML5のcanvas機能が使われています。
とてもリアルなので見入ってしまうほど。サンプルを作ってみました。
【サンプル】
窓ガラス越しに雨を降らせるアニメーション『rainyday.js』
・Internet Explorer 8 以降
・Firefox 23 以降
・Google Chrome 27 以降
・Safari 5.1
などのモダンブラウザで動きます。
この『rainyday.js』の使用方法は続きをご覧下さい。
WordPressの無料テーマ「Virtue」をご紹介します。
ビジネスサイト、個人サイト、ポートフォリオ、ギャラリーサイト、ブログ、オンラインショップ…などなど、このテーマを活用できるシチュエーションが幅広いのが特徴です。無料とは思えない機能の豊富さと美しいシンプルなデザインです。
jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。
特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。
画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。
タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。
サンプルを作ってみました。
タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル
オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。
スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。
メニューアイコンをクリックすると、にゅるっと動いて各メニューが現れます。スマホファーストのお洒落なサイトに良いのではないでしょうか。もちろん、パソコンでもいい感じです。
サンプルをご覧下さい。> にゅるっと出てくるスマホで便利なお洒落なメニュー「Animated Border Menus 」サンプル
パソコンの古いブラウザでは動きません。スマホやタブレットでは大丈夫でしょう。
クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。
中央の円（トリガー）をクリックすると、それを囲む様にメニューが飛び出します。メニューの飛び出す方向は、円状の、半円、1/4円に変更することが出来ます。
まずはサンプルをご覧下さい。
→ メニューが飛び出すjQueryプラグイン「Pop Circle」サンプル
アニメーションするスピードや飛び出すときの効果などもカスタマイズできます。
メニューに使うのもよし、イメージギャラリーにするのもよし、アイデア次第ではサイトにユニークな演出を与えることができそうです。
設置方法は続きをご覧下さい。
メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQueryプラグインです。
スクロールさせても、ナビゲーションバーがページの上部に固定されます。
サンプルをご覧下さい。
→ 超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』サンプル
ワンページスクロールサイトの人気はまだまだ続いていますね。ワンページスクロールサイトは訪問者にとって迷いにくいデザインです。必要な情報を確実に見て貰いたいという場合には有効です。
一から作ろうとすると意外と手間のかかるナビゲーション付きワンページスクロールサイトですが、このjQueryプラグインを使用すると簡単です。
それでは、設置方法の説明をします。
カルーセルとは、画像やテキストなどのコンテンツを横にスライドさせながら表示させるWebデザインです。Amazonや楽天などのECサイトでもよく見られますね。
カルーセルを実装するjQueryプラグインやJavascriptはいろいろなサイトで多数紹介されていますが、ここではおなじみの＜ul＞要素を自動的にカルーセルに変換して表示してくれるjQueryプラグイン『dbpasCarousel』を紹介します。
サンプルをご覧下さい。
→「ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル」
設定もいたって簡単。jQueryを読みこませて、＜ul＞タグと＜li＞タグを利用してリスト表示で記述するだけです。
では使用方法をみてみましょう。
ページ上の好きな所で、ボタンひとつでメニューを呼び出して表示することができたら便利だと思いませんか？
今回ご紹介する『jQuery HoverMenu』は、Ctrlキーを押すことで簡単にメニューが呼び出せるものです。
サンプルを見て頂いたほうがわかりやすいと思います。
ボタンひとつで呼び出せるクイックアクセスメニュー『jQuery HoverMenu』サンプル
デフォルトではCtrlキーが対応していますが、割り当てるキーの変更も可能です。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑