カードの端に小さな飾りを置くとき、少しずつ位置をずらしたくなること、ありますよね。全部同じだと整いすぎるけど、一つずつ指定するのもちょっと手間です。
CSSのrandom()で、こういう小さなばらつきを作れたら面白そうだなと思ってます。今回は、カードの下にある飾りだけ実装してみました。
僕はまず、文字やカードのレイアウトは固定したままにしています。変えるのは余白の中の飾りだけ。左を固定値、右をランダムにして、違いを見比べられるようにしました。
まずは、右側の飾りを変えてみる
下のデモで「もう一度配置する」を押すと、右側の飾りが変わります。左側はそのままなので、どこが変わったか分かりやすいと思います。
「固定値に切り替える」を押すと、左右が同じ配置に。もう一度押すと、ランダムな表示に戻ります。
操作の流れを、約12秒の動画にもまとめました。再配置を2回、固定値へ切り替え、ランダムに戻す順です。字幕付き・無音なので、そのまま再生できます。
変えるのは、位置・大きさ・傾き・透明度
ランダムにしているのは、横位置、縦位置、大きさ、傾き、透明度の5つです。色と形は、あらかじめ決めておきました。
left: random(3%, 91%);
top: random(8%, 72%);
width: random(8px, 24px);
rotate: random(-30deg, 30deg);
opacity: random(.5, 1);例えばwidth: random(8px, 24px)なら、8〜24pxの範囲で大きさが決まります。ほかの指定も同じように、変えてよい範囲を先に決めています。
どこにでも置けるようにすると、文字と重なるかもしれません。今回は文字の下に装飾用の領域を作り、その中だけで位置を変えるようにしました。読んでほしいところは動かさず、飾りの方に少し遊びを持たせる感じです。
ボタンの操作には、JavaScriptも使ってます
位置や大きさの乱数を作るのはCSSですが、デモ全体がCSSだけでできているわけではありません。
「もう一度配置する」を押したときに装飾の要素を作り直す処理と、固定値への切り替えにはJavaScriptを使っています。Math.random()で数値を作ってCSSへ渡す形ではなく、値を決める部分をrandom()に任せています。
自動で動き続けるアニメーションにはしていません。ボタンを押したときだけ配置が変わる、小さな比較デモです。外部ライブラリも使っていません。
対応していない環境では、固定値で表示する
新しい指定を試すときは、使えない環境でどう見えるかも考えておきたいです。
今回は飾りごとの固定値を先に用意し、@supportsで使う指定に対応しているかを確認してから、右側だけランダムな値で上書きしています。対応していないブラウザでは、固定配置のまま表示する設計です。
Chrome 156の環境で、ボタンを押すと配置が変わることを確認しました。ほかのブラウザは今回の確認範囲には含めていないので、実際の制作に使うなら、対象の環境でも確認してからにしたいです。
僕なら、余白の小さな飾りから使ってみる
イベントの告知やポートフォリオ、キャンペーンページの背景など。きっちりそろえるより、少しばらつきがあった方が合いそうな場面で試せそうです。
ただ、見出しやボタンの場所まで変わると、読む人は困りますよね。今回のように、伝える内容と操作する場所は決めたまま、飾りの範囲だけ変えるくらいが使いやすそうだなと思いました。
デモにはHTML・CSS・JavaScriptも載せています。まずは再配置と固定値の切り替えを、見比べてみてください😊