２ 背景のアニメーション
戻る
この作例では、ページの背景色が時間経過と共に次第に変わっていきます。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（夏目漱石『坊っちゃん』- 青空文庫より）
背景部分の虹色のグラデーションが変化している様子が分かると思います。
なお上の作例では変化が分かりやすいように、再生速度を速く設定しています。
色が変わるアニメーションを CSS を使って実現してみましょう。
作成手順
HTMLを用意する
今回の主役は背景なので HTML 側は何でも構いませんが、効果が分かりやすいように何か書いておくことにします。
<h1>坊っちゃん</h1>
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（夏目漱石『坊っちゃん』- 青空文庫より）</p>
何でも良いのですが、とりあえず見出しとそれっぽい文章を書きました。
CSSでレイアウトを整える
次に CSS では文章が見やすいよう、それっぽいデザインを行っておきます。
設定内容は、過去のCSS練習問題で行ったものとそっくりなので、そちらを参考にしてください。
body {
width:70%; /* 幅は全体の70% */
max-width:600px; /* ただし600pixelを超えない */
margin: 20px auto; /* 全体を中央寄せに */
background-color:white; /* 背景を白色で塗る */
padding:20px; /* 内部余白で見やすく */
border-radius: 10px; /* 角を丸める */
box-shadow: 10px 10px 20px #00000044; /* 影をつける */
}
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（夏目漱石『坊っちゃん』- 青空文庫より）
まだ背景がないので、次は背景を塗っていきます。
背景にグラデーション
CSS に以下のような設定を追加すると、背景にグラデーションを敷くことができます。
html{
height: 100vh; /* 背景の高さを限界まで広げる */
background-color:#eee;
background: /* 虹色のグラーデション背景 */
linear-gradient(45deg, #00004b, #2455EB, #24DDEB, #59EB24, #ffff00, #ff0000,#4400ff,#0044cc, #000044);
background-size: 600% 200%; /* 背景の大きさを拡大 */
z-index:0;
}
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（夏目漱石『坊っちゃん』- 青空文庫より）
linear-gradient() を使うことで、グラデーションを実現しています。45deg を指定していることで、グラデーションの方向は４５度傾いた状態となります。
さらに linear-gradient() にはさまざまな色を設定することで、複数の色のグラデーションを実現しています。
今回は、以下のような色を配置してみました。これにより多色グラデーションを実現しています。
| 1 | | #00004b |
| 2 | | #2455EB |
| 3 | | #24DDEB |
| 4 | | #59EB24 |
| 5 | | #ffff00 |
| 6 | | #ff0000 |
| 7 | | #4400ff |
| 8 | | #0044cc |
| 9 | | #000044 |
今回、多色グラデーションに使用した色
今回特殊なのは、background-size: 600% 200%; の部分です。
この設定により、横方向に画面の６倍、縦方向に画面の２倍分の、非常に大きな背景を敷いています。
まだ背景の色は変化していませんが、この大きな背景をスクロールさせることで、色の変化を実現するのです。
背景を動かす
CSS に下に示した赤い文字の部分を追加します。これで完成です。
html{
height: 100vh; /* 背景の高さを限界まで広げる */
background-color:#eee;
background: /* 虹色のグラーデション背景 */
linear-gradient(45deg, #00004b, #2455EB, #24DDEB, #59EB24, #ffff00, #ff0000,#4400ff,#0044cc, #000044);
background-size: 600% 200%; /* 背景の大きさを拡大 */
z-index:0;
animation: myAnimeBg 30s ease-in-out infinite; /* ← ここにアニメーション設定を追加 */
}
/* アニメーション動作の詳細を設定 */
@keyframes myAnimeBg {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（夏目漱石『坊っちゃん』- 青空文庫より）
html の設定に animation: プロパティを追加しています。これによりアニメーションが行われるようになります。
アニメーションの速度は 30s（３０秒）に設定されています。変化が分かりにくい場合は 15s（１５秒）など、もっと短くすると分かりやすくなるでしょう。逆に変化が速すぎて気になる場合は 180s（３分）など、長くすると良いでしょう。
animation: myAnimeBg という記述で、アニメーションの動きについては myAnimeBg という名前でまとめてあると宣言しています。ちなみに myAnimeBg という名前は私が適当に決めたものです！😋
そして、myAnimeBg が具体的にどんなアニメーションは、下の @keyframes myAnimeBg {～} の部分で定めています。このような動作の設定を「キーフレーム keyframes」と呼びます。
キーフレームで定められた myAnimeBg の動きを簡単に言うと、background-position で背景の位置をスライドさせ、右端 100% の位置まで動かしてから、元の位置 0% に戻るという動作を繰り返します。
つまり、とても広い背景の中を、画面が左右に往復運動しているイメージです。
アニメーションのイメージ
画面を左右にスライドさせて、
背景が変化しているように見せています。
このように CSS を使うとさまざまな部分にアニメーションを適用できるので、応用すれば多種多様な動く演出を作ることができるのです。
今回は背景を動かすことで、色が変わるように見える例でした。
参考にしてください。
戻る
