2021年4月22日木曜日

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

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

デモページを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.frame-img {
  display: block;
  position: relative;    /* for before 疑似要素 */
}
 
.frame-img > img {
  width: 100%;
  height: auto;
}
 
.circleWipe::before {    /*for 丸ワイプの表示 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
 
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: circleWipe
}
 
@keyframes circleWipe {
  0% {
    background-image: radial-gradient(circle, transparent  0%, white  5%, white 100%);
  }
  10% {
    background-image: radial-gradient(circle, transparent 10%, white 15%, white 100%);
  }
  20% {
    background-image: radial-gradient(circle, transparent 20%, white 25%, white 100%);
  }
  30% {
    background-image: radial-gradient(circle, transparent 30%, white 35%, white 100%);
  }
  40% {
    background-image: radial-gradient(circle, transparent 40%, white 45%, white 100%);
  }
  50% {
    background-image: radial-gradient(circle, transparent 50%, white 55%, white 100%);
  }
  60% {
    background-image: radial-gradient(circle, transparent 60%, white 65%, white 100%);
  }
  70% {
    background-image: radial-gradient(circle, transparent 70%, white 75%, white 100%);
  }
  80% {
    background-image: radial-gradient(circle, transparent 80%, white 85%, white 100%);
  }
  90% {
    background-image: radial-gradient(circle, transparent 90%, white 95%, white 100%);
  }
  100% {
    background-image: none;
  }
}
補足
  • circleWipeクラスの疑似要素で、CSSの放射グラデーションを表示している。
  • 放射グラデーションの中心部を透過、その外側を白のグラデーションに指定。徐々に透過部分の直径を大きくして、全体表示されるようアニメーションを設定している。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

1
2
3
<div>
  <span class="frame-img circleWipe"><img alt="" src="./files/image-01.jpg" /></span>
</div>
補足
  • circleWipeクラスをつけたブロック要素の中がアニメーション表示される。

2021年4月8日木曜日

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

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

デモページを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
#container > div {
  position : relative/* for bg-lattice-xxxxx */
  height: 500px;
  margin-bottom: 50px;
  background-color: #8fbc8f/* 背景色 */
}
 
#container > div > span {
  position : absolute;
  top50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-shadow: 0 0 8px #000;
  font-weight: bold;
  color: #fff;
}
 
.add-bg-image {
  background-image: url(./files/image-01.jpg);
  background-position: center center;
  background-size: cover;
}
 
/* 格子の共通設定 */
.bg-lattice-horizontal::before,
.bg-lattice-vertical::before,
.bg-lattice-going-down::before,
.bg-lattice-going-up::before,
.bg-lattice-cross::before,
.bg-lattice-grid::before {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0/* for width:100%, height:100% */
  content: "";
}
 
/* 横格子 */
.bg-lattice-horizontal::before {
  background-image: repeating-linear-gradient(
    0deg,                  /* 格子の角度 */
    #a0522d 0px 15px,      /* 格子の色と幅 */
    transparent 15px 30px  /* 格子の間隔 */
  );
}
 
/* 縦格子 */
.bg-lattice-vertical::before {
  background-image: repeating-linear-gradient(
    90deg,                /* 格子の角度 */
    #a0522d 0px 15px,      /* 格子の色と幅 */
    transparent 15px 30px  /* 格子の間隔 */
  );
}
 
/* 斜め格子(右下がり) */
.bg-lattice-going-down::before {
  background-image: repeating-linear-gradient(
    45deg,                /* 格子の角度 */
    #a0522d 0px 15px,      /* 格子の色と幅 */
    transparent 15px 30px  /* 格子の間隔 */
  );
}
 
/* 斜め格子(右上がり) */
.bg-lattice-going-up::before {
  background-image: repeating-linear-gradient(
    135deg,                /* 格子の角度 */
    #a0522d 0px 15px,      /* 格子の色と幅 */
    transparent 15px 30px  /* 格子の間隔 */
  );
}
 
/* 十字格子 */
.bg-lattice-grid::before {
  background-image:
    repeating-linear-gradient(  /* 横の格子 */
      0deg,                      /* 格子の角度 */
      #a0522d 0px 15px,          /* 格子の色と幅 */
      transparent 15px 30px      /* 格子の間隔 */
    ),
    repeating-linear-gradient(  /* 縦の格子 */
      90deg,                    /* 格子の角度 */
      #a0522d 0px 15px,          /* 格子の色と幅 */
      transparent 15px 30px      /* 格子の間隔 */
    );
}
 
/* 斜め十字格子 */
.bg-lattice-cross::before {
  background-image:
    repeating-linear-gradient(  /* 右下がりの格子 */
      45deg,                    /* 格子の角度 */
      #a0522d 0px 15px,          /* 格子の色と幅 */
      transparent 15px 30px      /* 格子の間隔 */
    ),
    repeating-linear-gradient(  /* 右上がりの格子 */
      135deg,                    /* 格子の角度 */
      #a0522d 0px 15px,          /* 格子の色と幅 */
      transparent 15px 30px      /* 格子の間隔 */
    );
}
 
/* 背景画像+斜め十字格子 */
#bg.bg-lattice-cross::before {
  background-image:
    repeating-linear-gradient(  /* 右下がりの格子 */
      45deg,                    /* 格子の角度 */
      rgba(255, 255, 255, 0.2) 0px 15px,            /* 格子の色と幅 */
      transparent 15px 30px      /* 格子の間隔 */
    ),
    repeating-linear-gradient(  /* 右上がりの格子 */
      135deg,                    /* 格子の角度 */
      rgba(255, 255, 255, 0.2) 0px 15px,            /* 格子の色と幅 */
      transparent 15px 30px      /* 格子の間隔 */
    );
}
補足
  • bg-lattice-xxxxx クラスをつけたブロック要素に position: relative をつけておくこと。また、格子の奥の色を背景色(または背景画像)として指定しておくこと。
  • 格子はブロック要素の before 疑似要素の背景イメージとして表示している(格子はブロック要素の背景色・背景画像の手前に表示される)。
  • 格子の色や幅・間隔は repeating-linear-gradient の値で指定している。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h2>背景色の手前に横格子を表示</h2>
<div class="bg-lattice-horizontal"><span>bg-lattice-horizontal</span></div>
 
<h2>背景色の手前に縦格子を表示</h2>
<div class="bg-lattice-vertical"><span>bg-lattice-vertical</span></div>
 
 
<h2>背景色の手前に斜め格子(右上がり)を表示</h2>
<div class="bg-lattice-going-up"><span>bg-lattice-going-up</span></div>
 
<h2>背景色の手前に斜め格子(右下がり)を表示</h2>
<div class="bg-lattice-going-down"><span>bg-lattice-going-down</span></div>
 
<h2>背景色の手前に斜め十字格子を表示</h2>
<div class="bg-lattice-cross"><span>bg-lattice-cross</span></div>
 
<h2>背景色の手前に十字格子を表示</h2>
<div class="bg-lattice-grid"><span>bg-lattice-grid</span></div>
 
<h2>背景画像に斜め十字格子を表示</h2>
<div id="bg" class="bg-lattice-cross add-bg-image"><span>bg-lattice-cross</span></div>
補足
  • ブロック要素に bg-lattice-xxxxx クラスをつけて、格子のタイプを指定する。

2021年4月6日火曜日

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

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

デモページを表示

CSS

1
2
3
4
h2.variable-font-size {
  min-width: 280px;    /* 最小幅を指定 */
  font-size: 1.2em;    /* min-width 時のフォントサイズ */
}
補足
  • 文字サイズを可変させる見出しに variable-font-size クラスをつける。
  • 見出しの最小要素幅 min-width と、その時の文字サイズを指定する。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
 
  $(window).on('load resize', function(){
    $('.variable-font-size').each(function(){
      $(this).attr('style', '');  /* style 属性をクリア */
      var min_font_size = $(this).css('font-size');
      var min_width = parseInt($(this).css('min-width'));
      var ratio = $(this).width() / min_width;  /* 現在の要素幅と min-width の比率 */
      $(this).attr('style', 'font-size:' + ratio *  parseInt(min_font_size) + 'px;' );
    });
  });
 
});
補足
  • ウィンドウのロード時とリサイズ時に、見出し要素の幅を取得し、最小幅との比率を求め、その比率を文字サイズに乗じて、style 属性で文字サイズを変更している。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

1
2
3
4
5
6
7
8
9
<h2 class="variable-font-size">ごあいさつ</h2>
 
<h2 class="variable-font-size">事業紹介</h2>
 
<h2 class="variable-font-size">企業情報</h2>
 
<h2 class="variable-font-size">株主・投資家情報</h2>
 
<h2 class="variable-font-size">採用情報</h2>
補足
  • variable-font-size クラスのついた見出しが jQuery の処理対象になる。

2021年4月3日土曜日

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

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

デモページを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* CSSグリッドのコンテナ */
.grid-shuffle {
  display: grid;
 
  /* グリッドの列数・行数・間隔 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;;
 
  /* グリッドエリアの設定 */
  grid-template-areas:
  "A1 A1 A2"
  "A1 A1 A3"
  "A4 A5 A5";
}
 
.grid-shuffle > [data-area] {
  background-position: center center;
  background-size: cover;
}
 
/* 各アイテムを配置するエリア */
.grid-shuffle > [data-area="1"] { grid-area: A1; }
.grid-shuffle > [data-area="2"] { grid-area: A2; }
.grid-shuffle > [data-area="3"] { grid-area: A3; }
.grid-shuffle > [data-area="4"] { grid-area: A4; }
.grid-shuffle > [data-area="5"] { grid-area: A5; }
 
/* 各アイテムに表示する背景画像 */
.grid-shuffle > [data-area]:nth-child(1) {      /* Item01 */
  background-image: url(./files/image-01.jpg);
}
.grid-shuffle > [data-area]:nth-child(2) {      /* Item02 */
  background-image: url(./files/image-02.jpg);
}
.grid-shuffle > [data-area]:nth-child(3) {      /* Item03 */
  background-image: url(./files/image-03.jpg);
}
.grid-shuffle > [data-area]:nth-child(4) {      /* Item04 */
  background-image: url(./files/image-04.jpg);
}
.grid-shuffle > [data-area]:nth-child(5) {      /* Item05 */
  background-image: url(./files/image-05.jpg);
}
補足
  • あらかじめCSSグリッドのエリアを設定しておいて、各アイテム(画像)の data-area 属性で指定した配置エリアをjQueryでランダムに入れ替える。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function(){
 
  /* アイテムを配置する場所をランダムに入れ替える */
  function intRandom(min, max){
    return Math.floor( Math.random() * (max - min + 1) ) + min;
  }
 
  var gs = $('.grid-shuffle')
  var array_otder = [];
  var min = 1;
  var max = gs.children().length;
 
  for ( i = min; i <= max; i++ ) {
    while(true) {
      var order = intRandom(min, max);
      if ( !array_otder.includes(order) ) {
        array_otder.push(order);
        break;
      }
    }
  }
 
  for ( i = 0; i < max; i++ ) {
    gs.children().eq(i).attr('data-area', array_otder[i]);
  }
 
  /* コンテナの幅を高さに設定して正方形のコンテナをつくる */
  $(window).on('load resize', function(){
    var gs = $('.grid-shuffle')
    gs.height(gs.width());
  });
 
});
補足
  • data-area属性の値をランダムに変更することで、そのアイテム(画像)が表示するエリアを変えている。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

1
2
3
4
5
6
7
<ul class="grid-shuffle">
  <li data-area="1">Item01</li>
  <li data-area="2">Item02</li>
  <li data-area="3">Item03</li>
  <li data-area="4">Item04</li>
  <li data-area="5">Item05</li>
</ul>
補足
  • このサンプルでは、CSSグリッドのコンテナに grid-shuffle クラス、各アイテムに data-area 属性をつけたものが処理対処になる。
  • また、ページ内に対象となるCSSグリッドのコンテナが複数あることは想定していない。

関連投稿