ページ読み込み時に、タイル状に配置した画像をランダムに入れ替える。

ページの読み込み時やリロード時に、タイル状に配置した画像をランダムに入れ替える。基本的には下記 "関連投稿" の方法を組み合わせている。

デモページを表示

CSS

補足

• あらかじめCSSグリッドのエリアを設定しておいて、各アイテム（画像）の data-area 属性で指定した配置エリアをjQueryでランダムに入れ替える。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• data-area属性の値をランダムに変更することで、そのアイテム（画像）が表示するエリアを変えている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• このサンプルでは、CSSグリッドのコンテナに grid-shuffle クラス、各アイテムに data-area 属性をつけたものが処理対処になる。
• また、ページ内に対象となるCSSグリッドのコンテナが複数あることは想定していない。

関連投稿

• 列数と行数を指定して、レスポンシブな升目（正方形のグリッド）をつくる。
• ページ読み込み時に、リストの項目をランダムに入れ替える。

列数と行数を指定して、レスポンシブな升目（正方形のグリッド）をつくる。

CSSグリッドとjQueryを使って、レスポンシブな升目（正方形のグリッド）をつくる。

デモページを表示

CSS

補足

• CSSグリッドのコンテナになる要素に、data-columns（列数） と data-rows（行数） 属性をつけることで、jQueryの処理対象になる。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• CSSグリッドのコンテナ要素に指定された列数・行数を取得し、コンテナの幅からコンテナの高さを設定している。
• グリッドの大きさは、grid-template-columns と grid-template-rows プロパティに列数と行数を設定することで決まる。
• グリッドのサイズをピクセル単位で直接指定していないので、きれいに割り切れない場合、完全な正方形にはならない。
• グリッドの間隔は コンテナ要素に data-gap 属性を指定することで、CSSグリッドの gap プロパティが設定される。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• CSSグリッドのコンテナ要素に data-columns（列数） と data-rows（行数）属性を指定する。必要であれば、data-gap 属性でグリッドの間隔を "単位付き" で指定する。

リスト項目の絞り込み表示

カテゴリー名リストから選んだカテゴリーと同じカテゴリーのリスト項目のみを絞り込み表示する。

デモページを表示

CSS

補足

• 絞り込みの対象となるリストの項目は、あらかじめ非表示にしておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、１ページ内に「カテゴリー名のリスト」と「絞り込みの対象となるリスト」がひとつずつあることを想定している。
• jQuery の trigger() を使って、最初に表示するカテゴリーを指定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 絞り込みの対象となるリストの表示は data属性でリスト項目にカテゴリー・ラベルを表示 を参照。

関連投稿

• data属性でリスト項目にカテゴリー・ラベルを表示

スクロール時にセクションが変わったら、全画面の背景画像を差し替える。

スクロール時にセクションが変わったら、全画面で表示している背景画像を差し替える。

デモページを表示

CSS

補足

• ウィンドウ内に複数のセクションが表示される場合は、下のセクションで指定した背景画像が表示されるので注意。
• 背景画像を表示するための div#cover-bg 要素は jQuery で追加される。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• load 時に背景画像を表示するための div#cover-bg 要素を追加している。
• load scroll 時に、セクション（このサンプルでは data-cover-bg 属性がついた要素）の上端がウィンドウ下端を超えたら、data-cover-bg 属性で指定されている背景画像を、上記 div#cover-bg 要素に設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 各セクションに表示する背景画像は、各セクションの div 要素の data-cover-bg 属性で指定する。
• 背景画像を表示しないセクションは、data-cover-bg 属性に "none" を指定する。

関連投稿

• スクロール時に見出しの文字列を１文字ずつアニメーションさせる。

スクロール時に見出しの文字列を１文字ずつアニメーションさせる。

スクロール時に、見出し文字列を１文字ずつ、指定した間隔でアニメーションさせる。

デモページを表示

CSS

補足

• h2 要素内の span 要素で、見出し文字列の１文字のスタイルを設定している。なお、アニメーションさせるために span 要素は inline-block 化している。
• 文字に適用するCSSアニメーション（bounce）を定義している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ロード時に、見出し文字列を１文字ずつ span 要素で区切っている。
• このサンプルでは、ロード・スクロール時に、見出しがウィンドウの高さの1/2を超えたときに、data-animation 属性で指定されたCSSアニメーションのクラスを span 要素に追加している。
• １文字ずつ順番にアニメーションさせるために、data-delay 属性で指定された秒数間隔をあけて、各 span 要素にCSSアニメーションのクラスをつけている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• data-animation 属性に適用するCSSアニメーションのクラスを指定する。また、各文字のアニメーション開始の間隔を data-delay 属性に指定する。

関連投稿

• スクロール時に指定した要素をアニメーション付きで表示
• マウスオーバーした時にアニメーションを付ける

data属性でリスト項目にカテゴリー・ラベルを表示

data属性を使ってリスト項目にカテゴリーのラベルを表示する。

デモページを表示

CSS

補足

• データ属性（data-category）のついたリスト項目の before 疑似要素でカテゴリー・ラベルを表示している。
• リスト項目の内容が長く、折り返したときにカテゴリー・ラベルの下へ回り込まないよう、ラベルはリスト項目左上の固定位置に表示し、リスト項目には左余白を設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• li 要素の data属性（data-category）に設定した値が、カテゴリー・ラベルとして表示される。

スクロール時に画像を遅延読み込み（アスペクト比指定＆レスポンシブ対応）

スクロール時にウィンドウに入ってきた画像を、順次遅延読み込みする（アスペクト比指定＆レスポンシブ対応）。

デモページを表示

CSS

補足

• 28～63行目：クラス aspect-4x3、aspect-3x2、aspect-16x9 により、表示する画像のアスペクト比を指定できるようにしている。これらを指定しない場合、表示される画像は正方形にトリミングされる。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• jQueryは前記事 スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）） と変更なし。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• ここで使用しているサンプル画像のアスペクト比は４対３。
• span 要素に frame-img クラスだけが設定されている場合は、正方形にトリミングされて表示される。
• span 要素の frame-img クラスに加えて、aspect-4x3、aspect-3x2、aspect-16x9 のいずれかを指定すると、そのアスペクト比で画像がトリミングされて表示される（表示する画像とアスペクト比が同じ場合はトリミングされない）。

関連投稿

• スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）
• 画像のレスポンシブ対応

スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）

スクロール時にウィンドウ内に入ってきた画像を、順次遅延読み込みする。このサンプルでは画像の縦横比に関係なく正方形でトリミング＆レスポンシブ対応。

デモページを表示

CSS

補足

• 13～17行目：img 要素（透過PNG画像）の背景画像として表示させる設定。
• 19～26行目：画像コンテナの背景にローディング画像を表示する設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 3行目：data-bg 属性が付いた img 要素が対象。
• このサンプルでは、スクロール時に画像の上端がウィンドウ高さの半分を超えたら、data-bg 属性で指定した画像が表示されるようにしている。
• 11行目：画像の遅延表示後は data-bg 属性を削除。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 2～5行目：img 要素の data-bg 属性で遅延表示する画像を指定する。
• このサンプルでは、元の画像の縦横比に関わらず、正方形にトリミングされて表示される。

関連投稿

• 画像のレスポンシブ対応

正方形でない画像を正方形内に表示（レスポンシブ対応）

正方形ではない画像を、正方形にトリミングしたり、縦横比を維持したまま正方形内に表示する（レスポンシブ対応）。

デモページを表示

CSS

補足

• 13～17行目：img 要素（透過PNG画像）の背景画像のスタイルを設定している。
• 19行目：frame-img クラスに加えて round クラスを設定すると正円でトリミングされる。。
• 23行目：frame-img クラスに加えて contain クラスを設定すると正方形内に縦横比を維持したまま表示される。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 4～6行目：img 要素の data-bg 属性で指定したファイルを img 要素（透過PNG画像）の背景画像に設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• img 要素の src 属性には１ピクセル×１ピクセルの透過PNG画像を指定し、実際に表示する画像は data-bg 属性で指定する。
• 3行目：frame-img クラスだけの時は正方形にトリミングされる。
• 6行目：frame-img と round クラスを設定すると正円にトリミングされる。
• 9・12行目：frame-img と contain クラスを設定すると縦横比を維持したまま正方形に収まるように表示される。

関連投稿

• 画像のレスポンシブ対応

マウスオーバーした時にアニメーションを付ける

指定した要素をマウスオーバー（ホバー）した時にアニメーションを付ける。

デモページを表示

CSS

補足

• マウスオーバー（ホバー）した時に設定するアニメーションのクラス（ bounce, rubberBand, tada ）を用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• マウスオーバー（ホバー）した時に data-hover-animation 属性に設定したアニメーションのクラスを追加し、マウスアウトしたら追加されたアニメーションのクラスを削除する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• マウスオーバー（ホバー）した時のアニメーションを data-hover-animation 属性に指定する。

関連投稿

• スクロール時に指定した要素をアニメーション付きで表示
• ボタンをクリックした時にアニメーションを付ける

ボタンをクリックした時にアニメーションを付ける

ボタンをクリックした時に、指定したアニメーションを付ける。

デモページを表示

CSS

補足

• クリックした時に設定するアニメーションのクラス（ bounce, rubberBand, tada）を用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• クリックした時に data-click-animation 属性に設定したアニメーションのクラスを追加し、アニメーションが終了したら追加されたクラスを削除する。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• クリックされた時のアニメーションを data-click-animation 属性に指定する。

関連投稿

• スクロール時に指定した要素をアニメーション付きで表示
• マウスオーバーした時にアニメーションを付ける

スクロール時に指定した要素をアニメーション付きで表示

ページのスクロール時に、指定した要素を、指定したアニメーションで表示する。

デモページを表示

CSS

補足

• アニメーション表示する要素（ data-scroll-animation 属性を付けた要素）をあらかじめ透明（見えない状態）にしておく。
• 設定するアニメーションのクラス（ slideInLeft, slideInRight ）を用意しておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、対象となる各要素（ data-scroll-animation 属性を付けた要素）の上端が、ウィンドウ高さの１／４を超えたらアニメーションが始まり、表示される。
• アニメーション表示されるのは、最初に表示される時だけ。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• アニメーション表示する要素に data-scroll-animation 属性とアニメーションを定義したクラスを設定する。

関連投稿

• ボタンをクリックした時にアニメーションを付ける
• マウスオーバーした時にアニメーションを付ける

"続きを表示"をクリックして、指定した数だけリスト項目を表示する。

最初にリスト項目を全て表示しないで、"続きを表示" をクリックすると、指定した数だけ続きのリスト項目を表示する方法。

デモページを表示

CSS

補足

• 2行目：リスト項目を非表示にしておく。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 23行目以降：最初に指定した項目数だけは表示しておくために設定。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 1行目：ul 要素にデータ属性 data-show-list を付加し、最初と "続きを表示" をクリックした時に表示するリスト項目の個数を指定する。

長い文字列を指定文字数でカットして、末尾に '…' を付加。

長い文字列を先頭から指定した文字数でカットして、末尾に '…' を追加する。

デモページを表示

jQuery

補足

• ３行目：データ属性 "data-tailcut" を持つ要素が対象。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 長い文字列を含む要素にデータ属性 "data-tailcut="n" を追加する。
• このサンプルでは、先頭から３０文字目以降をカットして、末尾に '…' が付加される。

リスト要素の項目を横並びにする

CSS Flexbox を使用して、リスト要素の項目を横並びにする方法です。

カスタムデータ属性で、折り返す（左寄せ｜中央寄せ｜右寄せ）・折り返さないの指定ができるようにしています。

折り返さない場合、ブラウザが対応していれば、スクロール時に項目単位で止まります（スクロールスナップ）。

デモページを表示

CSS

補足

• 個別定義として、li 要素の幅を指定する（指定が無い時は３列表示）。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ul 要素に "data-flex-wrap" を追加し、折り返し方法を指定する。
• このサンプルでは li 要素の中にボタンを入れているが、画像やテキストでも良い。

data-flex-wrap	折り返し方法
left	折り返す：左寄せ
center	折り返す：中央寄せ
right	折り返す：右寄せ
nowrap	折り返さない