丸ワイプから全体表示するアニメーション

丸ワイプのサイズを徐々に大きくしながら全体表示するアニメーション。

デモページを表示

CSS

補足

• circleWipeクラスの疑似要素で、CSSの放射グラデーションを表示している。
• 放射グラデーションの中心部を透過、その外側を白のグラデーションに指定。徐々に透過部分の直径を大きくして、全体表示されるようアニメーションを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• circleWipeクラスをつけたブロック要素の中がアニメーション表示される。

ブロック要素の背景色や背景画像の手前に格子柄を表示する。

ブロック要素の背景色や背景画像の手前に、格子柄（縦縞・横縞・ストライプ・ボーダー・チェック柄など）を表示する。

デモページを表示

CSS

補足

• bg-lattice-xxxxx クラスをつけたブロック要素に position: relative をつけておくこと。また、格子の奥の色を背景色（または背景画像）として指定しておくこと。
• 格子はブロック要素の before 疑似要素の背景イメージとして表示している（格子はブロック要素の背景色・背景画像の手前に表示される）。
• 格子の色や幅・間隔は repeating-linear-gradient の値で指定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ブロック要素に bg-lattice-xxxxx クラスをつけて、格子のタイプを指定する。

見出しの要素幅に応じて、文字サイズを変える。

ウィンドウ幅を変えると見出しの要素幅が代わり、それに応じて文字サイズを拡大・縮小させる。

デモページを表示

CSS

補足

• 文字サイズを可変させる見出しに variable-font-size クラスをつける。
• 見出しの最小要素幅 min-width と、その時の文字サイズを指定する。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• ウィンドウのロード時とリサイズ時に、見出し要素の幅を取得し、最小幅との比率を求め、その比率を文字サイズに乗じて、style 属性で文字サイズを変更している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• variable-font-size クラスのついた見出しが jQuery の処理対象になる。

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

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

デモページを表示

CSS

補足

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

jQuery

補足

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

HTML

補足

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

関連投稿

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