Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる 2024年6月リリースのChrome 126とEdge 126でJ
VSCode Notion - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. VSCode Notion Browse Notion pages directly in Visual Studio Code. Disclaimer: This is an unofficial extension made using an unofficial renderer with the data from an unofficial API. Features Here is a list of features that the extension currently supports. 📄 View Notion pages while you're coding 🔓 Supports both pri
React NativeでObjective-C/SwiftのAPIを扱う（Native Component編） - Qiita
この記事の目的 React NativeでもNativeのUIを触りたいときってありますよね。例えばこんなやつ（GradientView）を扱いたいとか。 （ちなみに、今回参考にした記事はこちら→http://browniefed.com/blog/react-native-how-to-bridge-a-swift-view/ ） そこに対してもReact Nativeでサポートしているのですが、案の定公式の説明やコード例が十分でない＆日本語の資料もなさそうなのでまとめてみました。 ※ 公式が不十分でソースコードを読みつつの理解となるため、正しくない内容になってしまうかもしれない点をご了承ください。（そもそも正解がない） ※ 筆者はObjective-C/Swift初心者な点もご了承ください。 ※ Android版はこちらをどうぞ→http://qiita.com/uryyyyyyy/i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React NativeでTwitterクライアントを作ってみよう
