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
GPT-4 APIがやってきた!3.5と"性能"を比較する｜shi3z
Waiting Listにもっと時間がかかるかと思ったのだが、予想外に早く(一日)APIのロックが解除された。ただしまずは8Kトークン版のみ。 GPT-3.5が4Kトークンだったから倍の長さのストーリーが出せるということだ。 ただし値段はChatGPT APIの10倍。元に戻った感じ。 これはどっちを使うべきか結構悩むぞ。 こんな感じで呼ぶ % curl https://api.openai.com/v1/chat/completions \ -H 'Content-Type: application/json' \ -H 'Authorization: Bearer APIKEY'\ -d '{ "model": "gpt-4", "messages": [{"role": "user", "content": "宮崎駿について"}], "temperature": 0.7 }'答えはこ
【Unity】さよならステートマシン。旧AnimationっぽいAPIでアニメーションを再生する SimpleAnimation - テラシュールブログ
今回はステートマシンを使用せずAnimatorでアニメーションを再生する、Simple Animationについてです。 ステートマシンにサヨナラを Playable API Unity公式の旧Animationを模したアニメーション再生コンポーネント アニメーション切替も超絶シンプル AnimatorのOptimised Game Objectも使える AnimationControllerとの共存は？ どちらにしろ ステートマシンにサヨナラを Unity 4辺りから登場した多機能アニメーション再生機能 Mecanimですが、多くの場合「ステートマシンで制御する」という非常に面倒くさい制御機構を持つせいで、多くの手間がかかってきました。 例えばアニメーションにキャンセルが組み込まれると、スパゲティのごとく複雑なステートマシンを（しかもグラフィカルに！）組まなければならず… 例えばアニメー
【Unity】アニメーション制御に色々と良さそうな"Playable API"について云々 - テラシュールブログ
今回はUnity 2017.1で正式導入となったPlayable APIについてです。 PlayableAPIはAnimatorのLowLevel API（のようなもの） アニメーションのブレンド結果をOutputに出力する AnimatorをPlayable API的に見てみる Playable APIを実際に使ってみる AnimationClipを動的にロードしてアニメーションを再生する 複数のアニメーションの切替 複数のレイヤー制御 二つのAnimationClipPlayableを使いまわす 基本的にはAnimationControllerで、必要な時だけAnimationClipを足す 注意点 PlayableAPIはAnimatorのLowLevel API（のようなもの） まずPlayable APIとは何ぞやという話ですが、大雑把に言えばAnimationを再生する為の物で
現場で使えるアニメーション系JSライブラリまとめ(2018年版) – TweenMax, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジャーなJSライブ
「動き」はどの技術で実装すべきか？ Web Animations APIの登場で常識が変わる
CSS AnimationsやTranstions、Canvas、JavaScriptによるDOM操作など、Webアニメーションの実装にはさまざまな手法がありますが、決定版となる新しいJavaScript APIの策定が進んでいます。CSSアニメーションのスペシャリストであり、the new codeを運営するDudley Storeyさんによる特別寄稿です。 従来のWebアニメーションの問題を解決するAPI Webにおけるアニメーションは、性質のまったく異なる4つのグループに分けられます。 CSS TransitionsとAnimationsはパフォーマンスに優れ、キーフレームを提供しているが、構築に膨大な時間を必要とし、基本的な開始と終了の制御のみをCSSとJavaScriptで提供している。UIの応答、ループ、ページ読み込みなどのシンプルなアニメーションに利用される傾向がある SMI
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://rakuyudo.com/%E5%80%8B%E4%BA%BA%E7%9A%84%E3%81%AB%E5%A5%BD%E3%81%8D%E3%81%AAjavascript%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA5%E9%81%B8/