jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法｜BLACKFLAG
少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。 レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなく ハンバーガーメニューボタンを使って、画面のサイドからメニューボタンを スライドさせて表示させるタイプもあります。 今回はその画面横からスライドさせて メニューボタンを展開するタイプのレスポンシブメニューUIを jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。 「jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法」サンプルを別枠で表示 サンプルでは前回同様に ウィンドウサイズが768px以上ならばPC向けナビゲーション、 768px以下だったら
jQueryでブラウザのスクロール値を取得してみる｜BLACKFLAG
先日ふとしたところで、ブラウザのスクロール値によって表示の切り替えを行う必要があり、 jQueryでスクロール量を測るサンプルを作ったので紹介してみます。 jQueryでブラウザのスクロールされた際の値を取るには 『.scrollTop（縦スクロール）』もしくは『.scrollLeft（横スクロール）』などがありますが、 あまり横スクロールで何か制御をするってことは少なく、縦スクロール値を取得する『.scrollTop』を使用することがほとんど。 なので、今回はページTOPからスクロールされた値『.scrollTop』を取得する際のサンプル。 実際の取得する際の記述方法は $(window).scrollTop(); $(document).scrollTop(); といった書き方でページのTOPからの距離を測れます。 『$(‘html’).scrollTop();』でもいけるっぽいですが
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法｜BLACKFLAG
このところ立て続けに、 Webページ上に初回アクセスのみ動画を表示させたい、 Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、 など、初回アクセス時に処理・制限を変える要望があり、 「jquery.cookie.js」を使ってのクッキー処理にて それらを制御するサンプルを作ってみたので、 メモ書き程度に紹介してみます。 今回のサンプルでは、 初回アクセス時のみページ上に「初回アクセスです。」の メッセージテキストを表示するサンプルです。 jQuery Cookie First Access Control まずは動作サンプルから。 下記のリンクをクリックして表示されるページは、 初回アクセス時のみ、ページ上に「初回アクセスです。」のテキストが表示されます。 ※リロードしてアクセスが2回目以降となるとテキストは非表示になります。 ≫jQuery Cookie First A
jQueryで画像などコンテンツ要素を順番にフェードインさせる方法｜BLACKFLAG
写真のギャラリーページなど、たくさんの画像が一覧となって並べられているページでの ページロード時に画像が一枚ずつ順番にフェードインしながら表示される演出技法。 一度に全ての画像がフェードインするよりも 滑らかな読み込みアニメーションを演出することができます。 この画像（コンテンツ要素）が順番にフェードインしながら表示する演出を jQueryを使って簡単シンプルに実装する方法を紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像が左上から順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"
jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法｜BLACKFLAG
今やWebサイトを作る際にはほぼ必須アイテムとなっている ページの最上部に戻るための「ページトップへ」ボタン。 最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。 そんな「ページトップへ」ボタンの出現方法を フェードイン／アウト、下方向からスライドイン／アウト、ボタン要素を拡大／縮小、 の3つパターンで実装する方法を紹介してみます。 【フェードイン／アウト】 jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法 「【フェードイン／アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示 ページ内を一定距離スクロールすると 画面右下に位置固定した形で「ページトップへ」ボタンが フェードインして表示されます。 サンプルではページ内を100pxスクロールすると ボタン
CSSで高さ（height）100%のボックス要素を作る方法｜BLACKFLAG
Webページ内に配置したボックスなどのブロック要素で 要素の長さを画面目いっぱいの高さに伸ばそうとしたとしても CSSで「height:100%;」と指定しただけでは理想通りにいかなかったりします。 CSSでボックスなどのブロック要素を画面目いっぱいの高さにする際の記述方法を いざという時に忘れてしまいがちなので、今さらながら紹介がてらメモしておきます。 まずはサンプルから。 高さ100%のブロック要素サンプル HTMLソース上では 単純な＜div＞のボックス要素を配置します。 ◆HTML <body> <div id="container"></div> </body> そして、この「#container」の高さを 画面目いっぱいにするにはCSSで以下の様な記述をします。 ◆CSS html,body { height: 100%; } body { font-size: 100%; l
jQueryでリキッドカルーセルUIに自動スライド機能を追加してみる実験｜BLACKFLAG
先日「jQueryでリキッド対応のカルーセルUIを作成する実験」と題して、 ブラウザのサイズによって可変するリキッドカルーセルパネルUIの実装方法を紹介しましたが その動作に自動でスライドする機能を追加したパターンを作成してみたので紹介してみます。 まずは動作サンプルから。 このブログ自体がリキッドレイアウトではないので実際の動作は下記の別枠表示から。 リキッド対応カルーセルサンプルを別枠で表示※表示後、ブラウザの枠を伸び縮みさせてみてください。 並べられたコンテンツ要素（画像）は一定時間（サンプルでは5秒）ごとにスライドし 左右の「≪」「≫」のボタンでも一つずつスライドさせることが可能です。 ブラウザのサイズによって画面上に表示されるコンテンツ要素の個数が変化します。 この動作の全体構成について、 HTML構成は前回の記事と変わりありません。 ◆HTML <div id="carouse
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 対象のベースの要素がIDでもクラスでも可能になっているので、1ページ内に複数設置の際にはクラスを使用することで、複数設置することが可能になっています。 1ページ内に2つのクロスフェードビューアーを設置して、それぞれにキャプションを付けた形でのサンプルは以下の様になります。 複数設置＆キャプション付きサンプルを別枠で表示 凝った演出などはありませんが、シンプルに画像などを切り替えるだけの動作が必要な際に手軽に使えると思います。 クロスフェードの画像の切り替えビューアーが必要になった際に是非。。。 サンプルファイルをダウンロードしたい方はこちらから
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
