前回はグラデーションにおすすめのツール「CSS Gradient」を紹介しましたが、今回はさらにCSSでグラデーションにアニメーション効果を追加できるジェネレータをご紹介します。
ジェネレータ好きすぎるでしょと思いますよね。
好きです。
作って下さった方にはいつも感謝しています。
「おすすめジェネレータまとめ」といったサイトは沢山ありますが、使い方までは指南してくれなかったりするんですよね…。
「コードが生成されたのはわかるけどどうやって実装するの？」
「コードをコピペしたけど動かないんだけど！」
と悩んだことも多々あります。いまもしょっちゅうあります。
このサイトは超初心者のためのものなので（自分含む）、使い方をなるべくわかりやすく案内する、できれば実践サンプルも付ける、ということを頭に置いて書いています。
ということで今回はグラデーションが時間と共に変化する、グラデーション+CSSアニメーションジェネレータの使い方です。
CSS Gradient Animator
まずは下のサンプルを見てみて下さい。
赤～青のグラデーションが変化していくのがわかると思います。
これをCSSのみで実装できるんです。
CSS Gradient Animatorの使い方
CSS Gradient Animatorの画面の見方
背景がプレビュー、パネルの左が編集エリア、右が生成されたCSSです。
色を追加する
まずは色を2色以上選びます。
「ADD colour+」をクリックするとカラーピッカーが表示されるので、色を選択します。
カラーコードで指定してもOK。
色が決まったら「Select」。
この作業を2回以上繰り返します。
プレビューで確認
「Preview」をクリックすると背景が変わります。
（わたしいっつもReset押しちゃうのです。皆様もお気をつけください…）
右のコードも書き変わっています。
この時点でも背景がゆっくり動いているのが解るかと思います。
グラデーション・アニメーションの角度を変える
「Gradient Angle」はグラデーションの角度で、初期値は「270°」です（右のコードの「270deg」がここにあたります）。
このホイールがなかなか調整が難しいのですが、約90deg、約180degに設定したときのサンプルをご覧ください。
90degだと左右入れ替わるような感じ、180degだとグラデーションが縦になります。
「Preview」をクリックしないとプレビューに反映されませんので注意して下さいね！
「Scroll Angle」はアニメーションの動きの角度です。
「Gradient Angle」「Scroll Angle」を真上・真下に揃えると、縦に動くようになります。
グラデーション・アニメーションの速度を変える
「Speed」で動きの速さを変えることができます。
カーソルが右に行くほど速くなります。
こちらも「Preview」をクリックしないとプレビューに反映されません。
生成されたコードをコピペ！
グラデーションが設定できたら右のコードをコピペしていきます。しかしそのままコピペしてもCSSエラーになります。
@-webkit…より前の部分は要素が指定されていないからですね。
例えばこういったコードが表示されていたとします。
background: linear-gradient(92deg, #0011ff, #ff0000);
background-size: 400% 400%;
-webkit-animation: gradesample 11s ease infinite;
-moz-animation: gradesample 11s ease infinite;
animation: gradesample 11s ease infinite;
@-webkit-keyframes gradesample {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
@-moz-keyframes gradesample {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
@keyframes gradesample {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
そしてこの部分の背景に使いたい、といったHTMLコードがあるとします。
<div class="gradebox3">美しいグラデーションでサイトを彩ろう</div>
そしたら書き方は
.gradebox3 {
width: 100%;
padding: 20px;
color: #fff;
background: linear-gradient(92deg, #0011ff, #ff0000);
background-size: 400% 400%;
-webkit-animation: gradesample 11s ease infinite;
-moz-animation: gradesample 11s ease infinite;
animation: gradesample 11s ease infinite;
}
@-webkit-keyframes gradesample {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
@-moz-keyframes gradesample {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
@keyframes gradesample {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
こうなります。
背景に画像を置いたサンプル
前回「グラデーションを半透明にすることで、背景写真に重ねてオーバーレイ風にする」のサンプルでやったように、半透明のグラデーションを写真に重ねることもできます。
こんなふうに。
透明な
グラデーションを
重ねて
オーバーレイ
しかもグラデーションは変化する
まずHTMLコードはこんなかんじ。
<div class="gradesample2"> <div class="gradesample3"> 写真に 透明な グラデーションを 重ねて オーバーレイ しかもグラデーションは変化する </div"> </div">
CSSはこんなかんじ。
.gradesample2 {
background-image: url(https://www.nullllog.com/wp/wp-content/uploads/2019/09/grade05.jpg);
background-size: cover;
}
.gradesample3 {
width: 100%;
padding: 20px;
color: #fff;
background: linear-gradient(90deg, rgba(131,58,180,0.5) 0%, rgba(235,29,29,0.5) 50%, rgba(252,179,69,0.5));
background-size: 400% 400%;
-webkit-animation: gradesample3 11s ease infinite;
-moz-animation: gradesample3 11s ease infinite;
animation: gradesample3 11s ease infinite;
}
@-webkit-keyframes gradesample3 {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
@-moz-keyframes gradesample3 {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
@keyframes gradesample3 {
0%{background-position:0% 50%}
50%{background-position:100% 51%}
100%{background-position:0% 50%}
}
CSS Gradient Animator まとめ
CSS Gradient Animatorを使うととっても簡単に動きのあるサイトになりますのでぜひやってみて下さいね！
コメント