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」
今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。（めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。）
では、サンプルを作ってみましたのでご覧下さい。
最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。
→「めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』」の続きを読む
今回は、新しいオンライン書店のサイトにも応用できそうなリアルな本のショーケースの紹介です。本の情報とともに、立体的にリアルな動きの本が表示され、印象的な演出が実現できます。
ユーザーに新しい体験をしてもらうことで、紹介している本に興味を持ってもらえるような個性的なオンライン書店のサイトが作成できるかもしれません。
サンプルを作ってみました。
※古いブラウザでは正しく動作しませんので、ご注意下さい。
（サンプルの本の表紙などは、サンプル用にオリジナルで製作していますので、このような表紙の本は実在しません。「葉隠」「武士道」「五輪書」の本自体は様々な出版社から出ています。）
本のショーケースになっているソース部分の仕組みが理解できると、導入は難しくないです。レスポンシブ対応になっているので、色々な画面サイズで自然に閲覧できるのも嬉しいですね。
→「リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」」の続きを読む
本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は、こちらの「Fullscreen Pageflip Layout 」を利用すると良さそうです。
ぺらぺらの紙をめくるというよりは、絵本のような厚みのある紙をめくっているような感じが実現されています。
サンプルを作ってみました。
※IE8など古いブラウザではアニメーションは動作しません。
次のライブラリーやjQueryプラグインを組み合わせて作ってあります。
難しそうですが、ソースを一式配布してあるのでそのソースを利用してコンテンツを変更すれば簡単に実現できます。
→「絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」」の続きを読む
以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるでFlashで作ったかのようにリアルな本のページを実現しています。しかも、たった6Kという軽さ。
HTML５とCSS３で作られているようで、IE８以前では作動しないのが残念ですが、将来FlashからHTML5が主流になる可能性を考えると期待大です。
その他のFirefoxなどのブラウザ、タブレット端末やスマートフォン端末には対応しています。
サンプルはこちら。ページの端をクリックするか、ドラッグするとページがめくれます。
jQueryプラグイン「turn.js」の使い方は続きをどうぞ。
今年はスマホ元年といわれるほど、iPhoneやAndroidなどスマホやiPadなどのタブレットが一気に吹き出すように浸透した一年になりましたね。
おかげで、PCでは縦スクロールが当たり前だった頃に比べて横スクロールさせるUI（ユーザーインターフェイス）が身近になってきました。
jQueryを使用して、簡単に全画面横スクロールで雑誌風にサイトをみせることができるのがこの「treesaver」。スマートフォンにも対応しているので、iPhoneなど指で左右にスクロールさせて表示させたい時に便利です。しかも画面の大きさによって、自動的にレイアウトを変更してくれます。
「treesaver.js」はPython製、HTML5/JavaScript用のオープンソース・ソフトウェアです。テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作ることができます。
この機能を文字では説明しきれないので、紹介の動画をご覧ください。
サンプルを作ってみました。こちらをどうぞ → 「treesaver.js」サンプル
→「iPhone、iPad、PC対応！雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑