JSFiddle であそぼう

JSFiddle で変なの作って遊んでます。たのしい。

ハンドスピナー

ボタンを押すと回るやつ。

f:id:m_kahmin:20171119011936p:plain

jsfiddle.net

回転時間の計算が、結局正解が分からず適当な式に。
本来はどういう計算になるのやら…。

単語帳っぽいの

単語帳をパラパラ~っとめくる感じのやつ。

f:id:m_kahmin:20171119012603p:plain

jsfiddle.net

角度の計算は例によって適当。
数学きちんとやらないと、こういう時に苦労するんだなぁ…と思った次第。

技術的なお話: 単語帳の穴

単語の穴を開けるのに無駄に苦労した。
何通りか方法があるようだけど、思い付いたのは3つほど。

背景を透明に& border で背景色を指定

ソースはここ → https://jsfiddle.net/m_kahmin/Lhjaj0vh/14/

ポイントは以下の通り。

  • background-color: transparent;border-radius: 50%; で透明な穴を表現。
  • :before には極太 border を指定して、背景色を表現。
  • :after には1px の border を指定して、縁取りを表現。

動的に色を変える場合は、 :before :after といった疑似要素ではなく
span など別の子要素を用意する必要がありそう。

radial-gradient で背景を指定

ソースはここ → https://jsfiddle.net/m_kahmin/Lhjaj0vh/23/

radial-gradient で順番に色をつけるだけ。

  • 中央は透明の穴。
  • その外側1pxは縁取り。
  • さらに外側は背景色。

SVG を背景にする

SVGで穴の空いた背景を作れば、どうにでもなるんじゃないですかね(適当)
動的に色を変えるのも、問題なくイケるはず。

今知ったけど、マスク機能なんてのもあるらしい。 ブラウザの対応状況がイマイチだけど、数年のうちには使えるのかなぁ。

www.webprofessional.jp