-webkit-text-stroke-widthをアニメーションさせるとたのしい - hitode909の日記
歌川さんの記事で-webkit-text-strokeの存在を知らなかった。昔はこういうことをやろうとすると、同じ文字の要素をいくつか生成して、ちょっとずつ座標を変えて重ねる、ということをやっていて地道なことをしていた。良い時代になって嬉しい。 だんだんstrokeを伸ばしていったらおもしろいかと思って、最初CSSアニメーションでやってみたら、アニメーションにはならず、残念ながらなめらかなアニメーションにはならず、かくかく動いていたので、こうしてrequestAnimationFrameで動かしています。みなさんには読みづらくてご迷惑をおかけします。 const text = document.querySelector('#entry-26006613784505675'); const updateTextStroke = () => { text.style = '-webkit-t
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions: When you run the demo, you'll see the <figcaption> immediately. Then, after a few seconds, this paragraph and subsequent page content shifts downwards to make room for the image. This makes the user experience massively frustrating, as content moves out from under the user's eyes/finger/poi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
