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プラグインと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プラグイン『textualizer』をご紹介しましたが、今回はCSSアニメーションを使用して、文章の一部のテキストを演出的に切り替える「Rotating Words with CSS Animations」を紹介します。
サンプルはこちら
もうひとつサンプルです。
※CSS3を使用しているため、対応していないブラウザでは動作しません。
詳しくは続きをどうぞ。
→「テキストをCSSアニメーションさせてクールに演出させる「Rotating Words with CSS Animations」」の続きを読む
ボタンやリンクをクリックすると、隠れていたページが横から現れるページを実装できるjQueryプラグインです。
サンプルページを作ってみましたのでご覧下さい。
セカンドコンテンツには追加情報などの他にも、フォームやメニューを加えたりと利用価値は高そうです。
jQueryプラグイン「PageSlide」の設置方法は続きをどうぞ。
以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるでFlashで作ったかのようにリアルな本のページを実現しています。しかも、たった6Kという軽さ。
HTML５とCSS３で作られているようで、IE８以前では作動しないのが残念ですが、将来FlashからHTML5が主流になる可能性を考えると期待大です。
その他のFirefoxなどのブラウザ、タブレット端末やスマートフォン端末には対応しています。
サンプルはこちら。ページの端をクリックするか、ドラッグするとページがめくれます。
jQueryプラグイン「turn.js」の使い方は続きをどうぞ。
Zoomooz.jsは、Webページの要素のズームを行うためのjQueryプラグインです。
画像をズームさせてギャラリー風に見せたり、テキストを一部拡大させて効果的にみせたりすることに使用することができます。しかも設置方法は簡単です。
サンプルはこちらからどうぞ
うまく組み合わせて使えば、アイデア次第ではWEBサイトだけでなく、Preziのようにプレゼンにも使うことも出来そうです。
「Zoomooz.js」の設置方法は続きをご覧ください。
お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。
ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。
サンプルを用意しました。
では、この「mediaboxAdvanced」の使い方は続きをどうぞ。
→「画像、動画、Googleマップ… あらゆるメディアをLightBox（ライトボックス）風に表示させる「mediaboxAdvanced」」の続きを読む
ブラウザのウィンドウズサイズ、またはiPhoneなどデバイスの画面の大きさに合わせてテキストの大きさを自動で調整してくれるのがこのjQuery「FitText」です。
ウィンドウズサイズにあわせて、文字が大きくなったり小さくなったりします。
サイトのタイトル表示に使えそうな機能です。
サンプルはこちらからどうぞ
また、こちらのサイトではうまく「FitText」を使用されています。このように主にタイトルに使う機会が多そうですね。→ Trent Walton’s blog (http://trentwalton.com)
「FitText」の使用方法は続きをどうぞ。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑