めっちゃランダムな css animation

More than 1 year has passed since last update.

雑にランダムなアニメーションを作りました。

Kapture 2018-07-08 at 22.07.41.gif

Kapture 2018-07-08 at 22.08.26.gif

サイト: https://lain.elzup.org/

コード: https://github.com/elzup/lain-time/blob/master/src/components/Fact/index.js

抜粋

const kaos = p => keyframes`

0% {
background: linear-gradient(
${p.r[0]}deg,
#
${p.c[0]} ${p.h[0]}%,
transparent
${p.h[0]}%
)
${p.h[5]}px 0,
linear-gradient(
${p.r[1]}deg, transparent 74%, #${p.c[1]} 78%),
linear-gradient(
${p.r[2]}deg,
transparent
${p.h[1]}%,
#
${p.c[2]} ${p.h[2]}%,
#
${p.c[3]} ${p.h[3]}%,
transparent
${p.h[4]}%
),
#
${p.c[4]};
background-size:
${p.h[6] * 10}px ${p.h[7] * 10}px;
}
100% {
background: linear-gradient(
${p.r[1]}deg,
#
${p.c[1]} ${p.h[1]}%,
transparent
${p.h[1]}%
)
${p.h[6]}px 0,
linear-gradient(
${p.r[2]}deg, transparent 74%, #${p.c[2]} 78%),
linear-gradient(
${p.r[3]}deg,
transparent
${p.h[2]}%,
#
${p.c[3]} ${p.h[3]}%,
#
${p.c[4]} ${p.h[4]}%,
transparent
${p.h[5]}%
),
#
${p.c[5]};
background-size:
${p.h[7] * 10}px ${p.h[0] * 10}px;
}
`

詳しく説明はしません。する意味があるほど設計を考えて作ってないです。

DevTools_-_lain_elzup_org__and_Present_day__Present_time__and_index_js_—_components_Fact_—____ghq_github_com_elzup_lain-time.png

一つのハッシュ値から n/16, n/256, n/4096 の値を取り出しておいて css に当てています。

上の css を当てた要素を4枚(別の値)並べてさらに位置とrotate を変えています。


サイトについて

https://lain.elzup.org/

navigator と window のシリアルと timestamp からハッシュを生成してます。ハッシュからハッシュ更新までの時間も決めています。

パターンが予測できない、誰も同じものを見れないグラフィックを作ってみたかった感じです。

animetion 雑すぎて多分ちょっと重いです。