CSSで「Gear」

WEBページで歯車デザインを作ろうと思い、画像を探していましたが、今時のWEBページであれば、CSSでやるでしょ。 という事で、CSSで[Gear]を作ってみたいと思います。 ただ、今回はギアを作る為の情報収集をしてみます。

まずはWEBで検索

「CSS Gear」でググるとたくさん出てきました。 世の中同じこと考える人多いんですね・・・ CSS Gear | Google ※2017年5月26日時点

1. CSS Gears - CodePen
2. CSS Gear - CodePen
3. css 3 gear animation | CSSDeck
4. CSS3 Animated Gears - DZone Web Dev
5. Gears [CSS] · GitHub

とりあえず、上位のものだけピックアップしてみました。 なんとなく感じていましたが、どれもアニメーション付きです。やはり歯車はアニメーションが無いと意味ないようですね。 もちろん僕もアニメを考慮してましたよ。 ちなみに、CodePenが２つありますが、別物です。 そして、この記事書いてて気がついたんですが、CodePenってCSSがSCSS対応しているんで、「CSSコードが短いな〜」って思っていたら、SCSSプログラムで書かれていました。 確かにSCSSは使いやすいんですが、ネイティブコーディングで拘ったり学習する時には少し邪魔に感じてしまいました。 すぐに使えるSCSS入門 | Developer.IO

デモ

上記の公開ギアのコードをこのページででも表示してみました。

1. CSS Gears - CodePen

2. CSS Gears - CodePen

3. css 3 gear animation | CSSDeck

4. CSS3 Animated Gears - DZone Web Dev

5. Gears [CSS] · GitHub

構造タイプ

どれも良く出来ていますが、以下のような方法がある事を学びました。

画像ギア+アニメーション

歯車をイメージで設置してそれを回転させているタイプです。 画像内の歯車の数は固定なので、複数の歯車構造の場合、円周は固定値でやらないといけないので、組み合わせが変わる仕組みを作ろうと考えたら少ししんどそうです。

CSSギア+アニメーション

CSSでギアを作っているので、羽数がコントロールできるのと、円周を調整できるので、ギア速度などが柔軟に調整できそうです。 ただし、CSSでの作り方も、羽数が分からない作り方もあるので、コントロールできるかどうかはCSSの構造しだいですね。

SVGギア+アニメーション

今回のサンプルには無かったんですが、SVGギアをプログラムで構築できれば、羽数もコントロールできるし、円周もそれに合わせて噛み合わせも調整できそうですね。 でも、かなりの計算が必要になりそうで、ゲームに組み込む時に有効な気がしますね。 通常のWEBデザインであれば、そこまではいらないかも・・・

イケてる構造

2番と5番を見ると、CSSだけでギアを描いている事がわかります。 歯車のところは、borderのdashedを使ってうまく書いています。 この欠点は歯車数がブラウザ別に性格ではないという点と、円の半径を変えると、歯車のつなぎ目が微妙に変わってしまうという点です。 しかし、シンプルが一番好きな下駄としては、この方式を追求してみたいと思います。 個人的には連動動作するギミックを作りたいので、引き続き研究対象ですね。