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」
最近、特に女性に人気があるPinterest（ピンタレスト）。
その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。
Pinterest（ピンタレスト）は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。
そのPinterest（ピンタレスト）風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。
サンプルページを作ってみました。
jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。
→「Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」」の続きを読む
tablecloth.jsは、Tableで作った表をお洒落に演出するjQueryプラグインです。
表はテーブルを使用して作成されることが多いと思いますが、そのままだと少し寂しい感じがします。そういう時に利用したいのが、この「tablecloth.js」です。テーブルで作った表をお洒落にしてくれるだけでなく、ソート機能も付けることができます。
サンプルを作ってみました。
設置方法も簡単です。
→「Table（表）をお洒落にするjQueryプラグイン「tablecloth.js」」の続きを読む
今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。
サンプルを作ってみました。
設置方法も簡単です。使用方法は続きをご覧下さい。
→「まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」」の続きを読む
Webサイトを作成していると世界地図を表示させる機会もあるかもしれません。
世界地図の画像を貼り付けたり、グーグルマップなどで世界地図を表示させたりという手もありますが、もう少しお洒落に世界地図を表示させたい…というときに簡単便利なのがこのjQueryプラグイン「JQVMap（jQuery Vector Maps）」。
拡大縮小させても画像が粗くならないScalable Vector Graphics (SVG)が利用されていて、拡大・縮小可能な綺麗な世界地図が描かれます。
サンプルはこちら
地図の左上にある「+・-」ボタンで拡大縮小。地図の上でドラッグさせて位置を移動できます。また国の上にマウスを持って行くと吹き出しで国名が表示されます。
設定方法は続きをご覧ください。
→「お洒落な世界地図を表示するjQueryプラグイン「JQVMap（jQuery Vector Maps）」」の続きを読む
最近、パララックス効果（視差効果）を利用したワンページスクロールサイトをよく見かけるようになりました。スクロールすることで画像や文字に動きや演出が加わり印象的なWebサイトを実現しています。
今回はこのパララックス効果を利用したワンページスクロールサイトを比較的簡単に導入できる「skrollr」を紹介します。
サンプルを作ってみました。
エフェクトや背景画像の組み合わせ次第で、とてもお洒落でクールなワンページのスクロールサイトが実現出来ます。
作り方もエフェクトやコンテンツを<div>要素毎に設定するので比較的わかりやすく導入出来ると思います。
jQueryプラグインとCSS3 を利用した画像やテキスト用のレスポンシブ対応スライダーです。
このjQueryプラグインを使用すると、スマホやタブレット・デスクトップなど画面サイズの大小に関わらず、スライドショーの幅や画像の大きさを調整してくれます。また、
などの機能があります。
まずはこちらのサンプルをご覧ください。
「Responsly.js」を用いたレスポンシブスライドショーの設置方法は続きをどうぞ。
１ページのなかで各コンテンツへスクロールさせるデザインのサイト、いわゆる１ページスクロールサイトが最近ポピュラーになってきました。様々なワンページスクロールサイトがありますが、今回はjQueryを使用して、とても簡単にシンプルなワンページサイトを作る方法を紹介します。
サンプルページを作りました。
段落ごとにスクロールさせることができるので、うまく利用すれば印象的なサイトが作れると思います。
作成方法は続きをご覧下さい。
→「jQueryでページの途中へ縦スクロールさせる『Scroll to Internal Link with jQuery』」の続きを読む
以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家のサイトの運営が再開されていないようです。
「maxImage Scaling Plugin」と同じように背景に画像をウィンドウズサイズに調節してフルスクリーン表示させることができるのが、このjQueryプラグイン「Backstretch」です。
少し、手を加えることで背景でスライドショーとして画像を流すことも出来ます。
サンプルを３パターン作ってみました。
簡単に設定できるのと、背景画像を最後に表示させることでメインのコンテンツが表示されるまで待つ必要がないのが特徴です。
設定の方法は続きをどうぞ。
→「ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」」の続きを読む
今回紹介するのは、画像の一部分を虫眼鏡を通したようにズームさせるjQueryプラグイン「Zoomy Jquery Plugin」です。
ネットショップの商品紹介の画像でも使われたりする機能ですね。商品の細かい部分まで伝えることができるようになります。演出的にも面白い機能です。
サンプルを作ってみました。こちらをどうぞ。
設置の仕方も簡単で、処理も軽くスムーズです。
使い方は続きをご覧ください。
→「虫眼鏡のように画像の一部を拡大ズームするjQueryプラグイン「Zoomy Jquery Plugin」」の続きを読む
ボタンやリンクをクリックすると、隠れていたページが横から現れるページを実装できるjQueryプラグインです。
サンプルページを作ってみましたのでご覧下さい。
セカンドコンテンツには追加情報などの他にも、フォームやメニューを加えたりと利用価値は高そうです。
jQueryプラグイン「PageSlide」の設置方法は続きをどうぞ。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑