Akinekoのブックマーク - はてなブックマーク

Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
Akineko 2022/05/09
アニメーション
リンク
will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita
こんにちは、CSSとVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCSSでアニメーションしたいんだ今回の目的とサンプルケースこの記事では、WebでCSSを使ってゲームやアート的な表現にゴリゴリのアニメーションを使いたい！というケースを想定します。全体を通してCSSのwill-changeプロパティを使ったGPUレンダリングによる最適化のお話です。will-changeってなに？って方はこの後でてくる参考記事リストを先に見ていただくのが良いと思います。 https://css-anime.firebaseapp.com/ 今回検証するアニ
Akineko 2019/06/10
*css

アニメーション
リンク
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Akineko 2019/02/05
vue.js

firebase
リンク
1