hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

トップ > -webkit-text-stroke-widthをアニメーションさせるとたのしい

-webkit-text-stroke-widthをアニメーションさせるとたのしい

歌川さんの記事で-webkit-text-strokeの存在を知らなかった。昔はこういうことをやろうとすると、同じ文字の要素をいくつか生成して、ちょっとずつ座標を変えて重ねる、ということをやっていて地道なことをしていた。良い時代になって嬉しい。
だんだんstrokeを伸ばしていったらおもしろいかと思って、最初CSSアニメーションでやってみたら、アニメーションにはならず、残念ながらなめらかなアニメーションにはならず、かくかく動いていたので、こうしてrequestAnimationFrameで動かしています。みなさんには読みづらくてご迷惑をおかけします。

const text = document.querySelector('#entry-26006613784505675');
const updateTextStroke = () => {
  text.style = '-webkit-text-stroke-width: ' + Math.sqrt((new Date() % 10000) / 100) + 'px';
  requestAnimationFrame(updateTextStroke);
};
updateTextStroke();