みかづきブログ・カスタム

基本的にはちょちょいのほいです。

2023-10-01から1ヶ月間の記事一覧

SVGの属性に複数の値を渡す際、最後の値にセミコロンをつけるべからず 😱

blog.kimizuka.org 先日の記事 をiPhoneで見ていた際に気づきました。 問題なくアニメーションしているSVGと、アニメーションしないSVGがあることに。(現在は修正済みです) DEMO こちら、地道に検証したところ、SVGの属性にセミコロン区切りで複数の値を渡…

SVGのpathを線形保管でアニメーションさせる 📹

DEMO SVGをアニメーションさせる場合、animate要素を使えば割と簡単に実現できます。developer.mozilla.orgただし、パスを線形保管でアニメーションさせたい場合は、変形前、変形後のコマンドの数を同数にする必要があるので、線形変形可能なSVGデータを作る…

Next.jsを使って、スマートフォン用のPull to Reflash(引っ張って更新)を実装する 📱

Next.jsを使って、スマートフォン用のPull to Reflash(引っ張って更新)を実装しました。 DEMO https://next-pull-to-refresh.vercel.app/※ スマートフォン限定です ソースコード PullToRefreshView.tsx 'use client'; import styled, { keyframes } from '…