Web Design Leaves

スクロールに応じて、画像データを遅延読込する jQuery プラグイン Lazy Load の設定と使い方に関する個人的なメモ。 Lazy Load プラグイン ページに含まれる画像のデータの読み込みを遅らせる（後から読み込ませる）ことにより、ロード時間を短縮することができるプラグイン。ビューポート（ブラウザの表示領域/画面）外の画像はユーザーがスクロールす…

続きを読む

position: fixed を使ってメニューを固定する際に気をつける点などの個人的なメモ。 結論から言うと、メニュー（ナビゲーション）の高さを指定し忘れるとメニュー以降に出現するリンク要素（ハイパーリンク）のリンクがクリックできなく（リンクが効かなく）なったり、ブラウザ上の文字（テキスト）を選択しようとしても選択できなくなってしまう。 関連ページ：「レス…

続きを読む

パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス p…

続きを読む

背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト： 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス（背景画像を固定して表示）を実現する方法。 各 div 要素（#first, #second, …

続きを読む

jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト：「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む C…

続きを読む

ページ内リンクへプラグインを使わずにアニメーションで移動するスムーズスクロールに関するメモ。 animate メソッドと scrollTop プロパティ 参考：「jQueryで画面をスクロールさせる時の注意点」 画面をスクロールさせる場合 animate メソッドと scrollTop プロパティを利用するが、どのセレクタに対して実行すべきかはブラウザ（We…

続きを読む

スクロールイベントを制御（ページ内の特定のスクロール位置で関数を実行するなど）できる「jQuery Waypoints v2.0.3 」を使った際のメモ（使い方）。 「Infinite Scroll（ページ下部まで移動すると、次のページを自動的に読み込んで表示）」、「Sticky Elements（特定の要素をある位置に固定して表示）」などのショートカットが…

続きを読む

音楽（MP3）を再生する必要があったので、探していたら「 audio.js」が見つかったのでその使い方のメモ。 ダウンロード 以下の「audio.js」のページからダウンロード http://kolber.github.io/audiojs/ 解凍して、「audiojs」フォルダ（audio.min.js, player-graphics.gif audio…

続きを読む

WordPress で Infinite Scroll を使った際のメモ。 Infinite Scroll には WordPress 用のプラグインもあるが、それは使わず jQuery のプラグインを使用。使用したページはカスタム投稿タイプのアーカイブページ（archive-xxxx.php や taxonomy-xxxx_cat.php）でページネーション…

続きを読む

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

続きを読む