TAG : スクロール

jquery jQuery プラグイン Lazy Load の使い方と設定

2014年11月30日

スクロールに応じて、画像データを遅延読込する jQuery プラグイン Lazy Load の設定と使い方に関する個人的なメモ。 Lazy Load プラグイン ページに含まれる画像のデータの読み込みを遅らせる(後から読み込ませる)ことにより、ロード時間を短縮することができるプラグイン。ビューポート(ブラウザの表示領域/画面)外の画像はユーザーがスクロールするまでロードされないので、特に画像が多いページに有効。以下は作者のページより抜粋。 目次 Lazy Load のダウンロード 以下のサイトからダウンロード Lazy Load Plugin for j…

続きを読む

jquery position: fixed を使ってメニュー(ナビゲーション)を固定する際の注意点

2014年11月28日

position: fixed を使ってメニューを固定する際に気をつける点などの個人的なメモ。 結論から言うと、メニュー(ナビゲーション)の高さを指定し忘れるとメニュー以降に出現するリンク要素(ハイパーリンク)のリンクがクリックできなく(リンクが効かなく)なったり、ブラウザ上の文字(テキスト)を選択しようとしても選択できなくなってしまう。 関連ページ:「レスポンシブメニュー」「ページ内リンクへアニメーションで移動」 また、以下のプラグインを使用すると簡単にメニューを固定表示することができる。 「jQuery Waypoints を使ってみる」 目次 メニ…

続きを読む

jquery パララックス効果を使ってみる

2013年12月29日

パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス picture」の高さは500px background-position は「0 0」(left top) サンプル 1 HTML CSS スクロール量が「div1 」の位置に達したら、「クラス pi…

続きを読む

jquery 背景画像を使ったパララックス

2013年12月28日

背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, #third, #end)に背景画像(960 x 800)を用意 「background-attachment プロパティ」の値を「fixed」に指定(背景画像はブラウザの表示領域に対して固定される)…

続きを読む

jquery パララックス(基本的なことに関するメモ)

2013年12月28日

jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト:「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む CSS(pallarax.css) を読み込む 3つの div 要素に class で、幅、高さ、位置(top)、ポジション(fixed)を指定 3つの div 要素に id で位置(left)、色を指…

続きを読む

jquery ページ内リンクへアニメーションで移動

2013年12月8日

ページ内リンクへプラグインを使わずにアニメーションで移動するスムーズスクロールに関するメモ。 animate メソッドと scrollTop プロパティ 参考:「jQueryで画面をスクロールさせる時の注意点」 画面をスクロールさせる場合 animate メソッドと scrollTop プロパティを利用するが、どのセレクタに対して実行すべきかはブラウザ(WebKit かそれ以外)により異なる。 WebKit : body 要素 それ以外 : html 要素 以下のように両方を指定して全てのブラウザに対応することができるが、単純なスクロールだけなら問題はな…

続きを読む

jquery jQuery Waypoints を使ってみる

2013年11月24日

スクロールイベントを制御(ページ内の特定のスクロール位置で関数を実行するなど)できる「jQuery Waypoints v2.0.3 」を使った際のメモ(使い方)。 「Infinite Scroll(ページ下部まで移動すると、次のページを自動的に読み込んで表示)」、「Sticky Elements(特定の要素をある位置に固定して表示)」などのショートカットが用意されている。 ダウンロード 以下のリンク先の「Download」をクリックしてダウンロード。 http://imakewebthings.com/jquery-waypoints/ 解凍すると「w…

続きを読む

jquery audio.js を使ってみる

2013年11月22日

音楽(MP3)を再生する必要があったので、探していたら「 audio.js」が見つかったのでその使い方のメモ。 ダウンロード 以下の「audio.js」のページからダウンロード http://kolber.github.io/audiojs/ 解凍して、「audiojs」フォルダ(audio.min.js, player-graphics.gif audiojs.swf が入っている)を適当なところに配置。 ドキュメント 以下のリンクに英語のドキュメントがある http://kolber.github.io/audiojs/docs/ インストール 配置…

続きを読む

wordpress WordPress で Infinite Scroll を使ってみる

2013年9月21日

WordPress で Infinite Scroll を使った際のメモ。 Infinite Scroll には WordPress 用のプラグインもあるが、それは使わず jQuery のプラグインを使用。使用したページはカスタム投稿タイプのアーカイブページ(archive-xxxx.php や taxonomy-xxxx_cat.php)でページネーションで次の投稿へのリンクがあるページ。 ダウンロード Infinite Scroll を配布ページからダウンロード(ページ右側の「Download ZIP」をクリック)して、その中の「jquery.inf…

続きを読む

jquery jQuery で Lightbox のようなモーダルウィンドウを表示

2013年6月24日

jQuery を使って簡単に Lightbox のようなモーダルウィンドウを表示する方法のメモ。 基本的な構造 サムネイル画像にモーダルウィンドウで表示する拡大画像のソースへのリンクを設定する。 ページの適当な個所に半透明のモーダルウィンドウと拡大画像を表示する領域を設定し、CSS で非表示にしておく。 半透明のモーダルウィンドウの領域:id=”bg_layer” の div 要素 拡大画像を表示する領域:id=”over_layer” の div 要素 拡大画像:class=”lightbox…

続きを読む