同じページ内で、メニューをクリックすると別HTMLを読み込んで表示させる必要がありました。
ページ全体を切り替えるのではなく、切り替えたい部分だけコンテンツを読み込んで切り替えたいというときに。
サンプルを作りましたので、ご覧ください。
→ 「クリックすると別のHTMLコンテンツをAjaxで読み込み表示させる」サンプル
別ファイルで作ったHTMLを読み込むので、スムーズなページ遷移が可能になります。
「floating.js」は画像や絵文字、テキストなどの要素をページ上にフロートさせることができるjQueryプラグインです。
サンプルを見ていただいた方がわかりやすいと思います。
→ 要素を画面上にフロートさせるjQueryプラグイン「floating.js」サンプル
どういう場面で使おうか迷ってしまいそうですが、アイデア次第では面白いサイトが作れそうです。
「jQuery.dotdotdot」はボックス要素からはみ出た分のテキストを自動的に省略してくれるという地味に便利なjQueryプラグインです。
省略したあとに「続きを読む」というリンクをつけることもできますので、ネットショップでの商品の一覧などボックス要素の高さをそろえて見た目をきれいにしたいときなどにも活躍しそうです。
下のリンクからサンプルをごらんください。
→ 要素からはみ出したテキストを省略してくれるjQueryプラグイン「jQuery.dotdotdot」サンプル
要素に収まりきれずはみ出した部分を「…」に置き換えて省略してくれるので、プラグインの名前は「dotdotdot」なんでしょうね。導入もわりと簡単です。
コンテンツをポップアップにして最前面に表示させるのがモーダルウィンドウです。モーダルウィンドウが開いている間は他の操作はできなくなるのが一般的です。
この「Reveal」jQueryプラグインを利用すれば、このモーダルウィンドウが簡単に実現できます。これ以上簡単に設置できる方法はないかもしれません。
サンプルを作ってみました。
→ モーダルを超絶簡単に設置できるjQueryプラグイン「Reveal」サンプル
1.75KBという軽量で、設置方法も直感的でもわかりやすくなっています。あっという間にモーダルウィンドウが設置できてしまいます。
これは本当に便利です。
「Slider Pro」は多機能のスライダーを作ることができるjQueryプラグインです。このjQueryプラグインを使って、左右の画像をみせることができるカルーセル型のスライダーを作ってみます。
このような感じになります。
サンプルはこちらをごらんください。
「Slider Pro」サンプル
設置方法は続きをご覧ください。
今やレスポンシブデザインにするのは当然の選択肢になりました。
YouTubeの動画をウェブサイトに埋め込むこともあると思いますが、動画もレスポンシブで表示させたいですよね。
YouTubeの埋め込み動画を簡単にレスポンシブにしてくれるのが、「SuperEmbed.js」です。
読み込ませておくだけで、動画の幅を画面やウィンドウの大きさに合わせてレスポンシブ化してくれます。
サンプルをご覧ください。
Youtube埋め込み動画を簡単にレンスポンシブにしてくれる「SuperEmbed.js」サンプル
対応している動画は、YouTube, Vimeo, Kickstarter, CollegeHumor, Hulu, Flickr, Vine, VideoPress, DailyMotion, Twitch.tv, Vid.meなど。
jQueryなしで単体で動作します。サイズも1.4 KBだけなのでサイトが重くなることもありません。
映画や舞台で、ステージのカーテン幕が開いたり閉じたりするのをみたことあると思います。
舞台が始まる前や終わった後に、左右に開いたり閉じたりするあのカーテンです。
今回は、そのカーテンの開け閉めのアニメーションをjQueryで再現する方法です。
最初にサンプルをどうぞ。
舞台のカーテンを開けるような効果をjQueryとCSSで再現するサンプル
よくわからないというひとも、ソースをコピペしたら動作すると思います。
「jQuery.customSelect()」は、セレクトボックスのCSSをカスタマイズしてデザインを変更できるようにするjQueryプラグインです。
select要素、つまりセレクトボックスやプルダウン時の見た目を変更したいと思ったら、結構大変です。
CSSでスタイルを変更しようと思っても、思ったようにいかなかったり、IE/Chrome/FireFox/Safariなどのブラウザごとに見た目が微妙に（いやかなり・・・）違ってしまったり。
そんなときは、jQuaryプラグイン「jQuery.customSelect()」を利用するとselect要素を見栄えよくカスタマイズすることができます。
サンプルをつくってみました。
select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」サンプル
プラグインのサイズも1kb未満と軽量なので、サイトも重くならずにすみます。ちなみにIE6以下の古いブラウザには対応していないと記してあります。
→「select要素のスタイルを変更できるjQuaryプラグイン「jQuery.customSelect()」」の続きを読む
今回は、海や川などに関係したサイトにぴったりなHTMLテンプレートを紹介します。
ランディングページやサイトのWebトップに使用してもお洒落になりそう。
ダイビング、サーフィン、フィッシング、環境ビジネスなどいろいろな場合の利用が考えられそうです。
背景画像や音などを変更すると、ほかの関係のWebサイトでも使えるかもしれません。（雲の上と雲の下など）
ちょっと感動ものですので、ぜひデモをご覧いただければと思います。
３つの違ったパターンの演出を見ることができます。
海にダイビングする効果が綺麗なHTMLテンプレート「Above & Beneath」デモ
なお、CSS3仕様の一部である CSS transitions と animationsが使われてるので、古いブラウザでは動作しません。
サイトの背景に夜空の星を表示することができるjQueryプラグインです。
マウスの動きに合せて、星が流れるような動きをします。
サンプルを作りましたので、サンプルを見ていただいたほうが早いかと。
星空をサイトの背景画像にするjQueryプラグイン「jQuery Starfield」サンプル
実際のところ、どういう場面で使えるのかすこし頭を抱えるところではあります・・。でも、アイデア次第でインパクトのある使い方ができるはず。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑