デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
" class=code-demo loading=lazy style=height:350px>これを突き詰めると、スプリングアニメーション（Spring Animation）のような、従来は JavaScript でフレームごとに描画していたアニメーションも CSS アニメーションで実装できます。 iOS のスプリングを CSS 数式アニメーションで再現する この記事では数式を使ったアニメーションを CSS で行う方法について、実際にデモを実装しながら解説します。 数式でアニメーションを表現できることの利点 #数式でアニメーションを表現すると聞いて、ピンとこない人もいると思います。以下の画像はこの記事のはじめのデモで使っている数式をグラフにしたものです。このグラフの形がイージング関数に似ていると気づいた方もいるかもしれません。 このようなグラフを描く数式を作ることができればイージング
Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保
AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
簡単にCSSアニメーションのコードを生成できるAIツールが登場しました。テキストや音声でプロンプトを入力するだけで、複雑なCSSアニメーションでも数秒でコードが生成されます。 生成されたCSSアニメーションはその場ですぐにカスタマイズして微調整も簡単です。テキストは日本語にも対応しており「ジャンプして回転」とかでも平気です。
CSSアニメーション屋さん
CSSアニメーション屋さん。 Webサイトの制作やデザインのご依頼などお気軽にお問い合わせください。 10月以降のお仕事を募集しております！
[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d0f69b54c49382d904de765c0422236d575c6fb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTczOTE1OTBiYWFjZTA5OTRlOTQ5Nzg5YWY4YWYzNTU0%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY1MzU2MmY1NWIyOTk5ZTJlMzQ4MDAwNmY2Nzg4ODA4%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dfc3d15fe1084dea53fb4229c9a89561f)
先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。 今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。 Chrome 117 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @starting-styleルール overlayプロパティ transition-behaviorプロパティ CSS Gridのsubgrid値 text-wrap: pretty; contain
本記事では2024-08-06にリリースされた Firefox 129をもって主要なブラウザすべてで利用可能になったアットルール @start-style について紹介します。 トランジション開始時のスタイルを指定できる @starting-style @starting-style はトランジションされる要素に対して、CSS プロパティの開始値を定義するためのプロパティです。 従来の CSS 記法では display: none; が指定されている要素にトランジションを使用した場合、トランジションが発生しませんでした。 そこで、@starting-style ルールを用いてトランジション開始時のスタイルをしているすることで元の要素に display: none; が指定されていたとしても正しくトランジションを発火させることができるようになります。 .open-content { disp
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスCSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 2024年4月24日 「NES.css」開発者 ダーシノ SIerでの業務アプリ開発や職業訓練校でのプログラミング講師を経て2015年にさくらインターネット株式会社にフロントエンドエンジニアとしてジョイン。2018年にファミコン風CSSフレームワーク「NES.css」を開発、公開する。人生の目標に「笑って死ぬ」を掲げている。柔道初段。 X ブログ GitHub ファミコン風のデザインのWebページをすぐにつくれる、オープンソースのCSSフレームワーク「NES.css」。フロントエンドエンジニアのダーシノさんが2018年にGitHu
エンジニアは若い人が多い。 中高生がプログラミングを学んで自分のアプリを作るなんて話は珍しい話ではなくなった。 私自身も18歳のエンジニア正社員と一緒に働いたこともあるし、大学生のエンジニアインターンとは数え切れないぐらい仕事をしてきた。 そんな若い人たちが多いエンジニア界隈だが、私は27歳でエンジニアになった。現在、専門としているインフラ領域のエンジニアリングに関しては30歳から学び始めた。 お世辞にも早いスタートとは言えない。そもそも、社会人になってからエンジニアにジョブチェンジする時点で、早いスタートとは言えないのだ。 もちろん、遅いスタートだったが故につらいこともあったし、自分のキャリアに対して不安を抱いた時期もあった。しかし、今振り返ってみると、27歳の時エンジニアになった選択は人生最良の選択だったし、30歳でインフラエンジニアへ転向したことは私のエンジニア人生を大きく飛躍させて
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。 スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。 参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。 まずは、さっそく機能拡張のインストールから。 下記のページにChromeでアクセスし、「Chromeに追加」をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストア この機能
※この記事は、Mediumで公開された「Transition animations: a practical guide」の著者Dongkyu Leeから許諾を得て、日本語翻訳しています。 Webサイトやスマホアプリにおいて、アニメーションと動きの重要さは年々高まっており、今では必須と言われるまでになっています。 ユーザー エクスペリエンスの権威ニールセン・ノーマン・グループは、「アニメーションは注目を集めるだけでなく、ユーザーの楽しみを高め、製品を新鮮でモダンなものに感じさせてくれる」と述べています。 アニメーションが十分に洗練されていれば、ユーザーにはっきりとしたフィードバックを与えることができ、インターフェイスをより直感的にすることができます。 特に遷移アニメーション（Transition Aniatiions）は、ユーザーをある段階から次の段階へとスムーズに誘導するため、重要な役割
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次デザインツールWeb便利ツールFigma・モックアップツールユニーク・面白ツール デザインツール KRESKA.art – Drawing and Painting あらゆるブラウザ上で動作する無料のお絵描き＆ペイントツールで、シンプルで使いやすいインターフェースと、超リアルな書き心地や豊富なブラシコレクションが特長。 Public Work by Cosmos
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。
SVGのロゴをネオンサインが点灯するようなイメージのアニメーションにできないかと試行錯誤した結果を記事に残しておく。 最終完成バージョン まずは出来上がりを、Codepen で確認してほしい。Start ボタンを押すと、ロゴが点灯する。 ネオンサインが点灯する雰囲気にみえるとうれしい。 （と言っても、今となってはネオン管っぽいLEDチューブが主流なので、本物のネオン管を見たことがない世代が多いかもしれないが...） See the Pen Neon Sign by hiroatsu (@scqspcfg-the-solid) on CodePen. なお、このアニメーションは、地図共有サイト Toboggar のスプラッシュ画面で使用しているものである。 どうやったらネオンサインの点灯のように見えるか 今回の方法がベストだとは思えないし、ベターですらないような気がするが、とりあえず私はこれ
みんな独立したプロパティ使ってる。使ってないのお前だけ。transformは与えられた要素に移動(translate)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形(transform)を適応させるCSSプロパティです。 transform: translate(-50%, -50%);で中央寄せ(現在ではあまり使用されないレガシーな手法です)といった静的な配置に用いることもありますが、主にCSSアニメーションを実装する際に使われることが多いです。 そのtransformプロパティの値のうち傾斜(skew)以外は現在では独立したプロパティで指定することができます。
CSSでボーダーをアニメーションさせるのは意外と難しいもの。幅や色のような単純な動きは別として、より複雑なアニメーションは他の選択肢を必要なケースがしばしば。 この記事ではCSSのborderプロパティを使わずにできる、”フェイク”ボーダーやアウトライン、さらにはSVGを使ったアニメーションの例を5つご紹介します。 最新Webデザインでもよく見かけるテクニックです、ぜひ活用してみましょう。 これらの例のHTMLはすべて、外側の.card divと内側の.inner divから構成されています。詳しくはデモを参照してください。
今年もCSSはどんどん進化しそうですね！ 1/24にリリースされたChrome 121に追加された、CSSの新しい機能6つを紹介します。スクロールバーのスタイル、スペルミスや文法的に正しくないテキストをハイライトする疑似要素、SVGのCSSマスキングなど、これからのWeb制作に役立つ機能ばかりです。 New in Chrome 121 Chrome 121 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるハイライトの継承 CSSによるスクロールバーのスタイル font-paletteプロパティでカラーフォントをアニメーション CSSのスペルチェック機能 SVGのCSSマスキングの改善 displayプロパティの新しい値 はじめに 1/24にリリースされたCh
CSS だけで動くスクロールドリブンアニメーション
CSS だけで動くスクロールドリブンアニメーション 2023.12.17 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。 スクロールドリブンアニメーションを利用することで、例えばスクロールの進行状況を表すバーであっ
Announcing Deno Queues など : Cybozu Frontend Weekly (2023-10-03号)
Announcing Deno Queues など : Cybozu Frontend Weekly (2023-10-03号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023/10/03 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 vite-plugin-ssr が Vike にリネームされた vite-plugin-ssr が Vike にリネームされました。機能的な変化は特になく、名前が変更されただけのようです。公式ドキュメント上にも Functionally, nothing changes: it's just
燃え上がれ！ 時間内にマスコットをひたすら集める、シンプルなゲームです 今年もミニゲームを公開する季節がやってきました。 今回作ったのはモグラたたき風のゲーム。 モグラたたきと言えば、ゲーム作りの入門編とも言えるたいへんミニマムなゲームです。 それはもうミニマムに作って。サッとお出しするつもりでした。 ササッ（半月遅れ） 色々ありました。そんな諸々はnoteにまとめて。 こちらはいつものように知見あつめです。 技術概要 今年のテーマは原点回帰！ 回帰もなにも、まだ原点のうしろに2つしかないような気もしますが！ ともあれHTMLです。WebGLでなければCanvasですらない。 HTMLでマークアップ。CSSで装飾＆アニメーション。JavaScriptは添えるだけ。 実にピュアなWebページ。 なお。毎度のようにライブラリ利用はありません。 今回はランキングもないので本当に何もなし。 ビルド
この記事はNuco Advent Calendar 2023の15日目の記事です。 はじめに この記事では、プログラミングを学習する際に役立つ、様々なサイトを幅広く紹介しています。初心者から上級者まで、さまざまなスキルレベルに対応するサイトを厳選しました。 各サイトは、難易度とおすすめ度を星5段階で評価しています。自分の現在のスキルレベルや学習目標に合わせた学習サイトを見つけ、学習し、更なるスキルアップを目指しましょう！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 Web制作(フロントエンド) web-design-textbook 難易度：★★☆☆☆ おすすめ度：★★★★☆ Webがブラウザに表示される仕組み、HT
はじめに 社のフロントエンド開発で、品質担保施策の一環としてVRTを実施しています。 単純にコンポーネントをマウントした結果だけではなく、interaction test や msw-storybook-addon を合わせて活用し、pageやmodal単位の振る舞いの変化の結果の担保として、integration test の役割も一部担わせているため、これを安定化させ、オオカミ少年にしないことが重要です。 そのために、ドキュメントされていない点で改善を試行錯誤した部分があるのでまとめておきます。 改善事項 storycapは厳密には play function に対応していないことを意識する storycapは、正式なサポートとして、play関数のPromiseが解消されたことを確認してから撮影しているわけではありません。storybookにこれが導入される前から、撮影の安定化のために
今回は、 SVG と CSS でアニメーションを作る方法をご紹介します。 Step1. 破線を作る まず簡単に、直線をアニメーションさせるところから始めましょう。SVG で線を引くには <line> 要素を使います。 <!DOCTYPE html> <html lang="ja"> <head> <style> .my-line { stroke: #000; stroke-width: 3; stroke-linecap: round; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 30"> <line class="my-line" x1="10" y1="18" x2="300" y2="18" /> </svg> </body> </html> 上記のコードをブラ
このガイドでは、高パフォーマンスの CSS アニメーションを作成する方法について説明します。 詳しくは、一部のアニメーションが遅い理由をご覧ください。 おすすめします。 ブラウザの互換性 このガイドでおすすめする CSS プロパティはすべて、クロスブラウザ対応に優れています サポート。 transform 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 36 <ph type="x-smartling-placeholder"></ph> 12 個 <ph type="x-smartling-placeholder"></ph> 16 <ph type="x-smartling-placeholder"></ph> 9 ソース
Rails: フルスタックRailsの未来（2）Turboのビュートランジション（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: The future of full-stack Rails II: Turbo View Transitions—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/23 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 View Transitionsの訳語はMDNに合わせました。 はじめに
フロントエンドのパフォーマンス改善：Web WorkerとWebAssemblyの効果測定 - SO Technologies 開発者ブログ
1. はじめに こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。 今回はフロントエンドの重たい処理をWeb WorkerやWebAssemblyを用いてどのように改善できるかを検証し、その効果を測定しました。 ブラウザは基本的にシングルスレッドモデルで動作します。レンダリング、JavaScriptの実行、CSSの解釈などページを表示するために必要な処理が1つのメインスレッドで行われます。 JavaScriptで重たい処理を行うと、他の処理が待たされUXが著しく悪化します。 今回はJavaScriptで重い処理をする必要がある状況を仮定し、それを改善する手法を実装して処理時間を計測しました。 Web Worker スクリプトの処理をメインスレッドとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組み。 これにより、重たい処理をメインスレッド外で処理する
Javascriptの勉強。 カーソルを動かすたびにカラフルで可愛いハート💛が現れるアニメーションの実装方法を模写して学習しました！ カラフルで本当にかわいい…！ 勉強に使用した動画：https://www.youtube.com/watch?v=I0R0T7p5oR8 記述したコードはこちら。 ①index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Colorful Hearts On Mousemove</title> <link rel="stylesheet" href="style.css"> </head> <body> <script type="text/javascript"> document.addEventListener("mousemove", func
こんにちは。京都開発部の柴坂浩行です。フロントエンドエンジニアとして、LINE MUSIC の Web アプリ開発を担当しています。 毎年 LINE MUSIC では、みなさんが1年間に聴いた曲を振り返ることができる企画を実施しています。昨年末にも振り返り特設サイト「#LINEMUSICで振り返る2023」を公開しました。 https://music.line.me/webapp/lmplayback2023（公開終了） この記事では、振り返り特設サイトで作ったアニメーションの実装のコツについてご紹介します。 アニメーションの実装に至るまで まず、ウェブサイトのアニメーションはどのように決まっていくのでしょうか？ プランナーが思い浮かべるイメージ、デザイナーの考える見栄え、エンジニアの考える実装。最終的には、各々が期待する形を一致させなければなりません。 今回は、以下のような流れでした。
本記事はJUCE Advent Calendar 2023 の12月16日向けに投稿した記事です。 要約 JUCEとCHOCを組み合わせることで、オーディオプラグインのGUIをWeb技術で制作することができます。このアプローチは、複数の技術要素を組み合わせながらも、柔軟で効果的なGUIプロトタイピングを可能にします。 本記事では、筆者が作成した WebGain と DenoGain での実践を通じて、C++によるネイティブ向けのオーディオプラグイン、オーディオアプリケーションの開発にWeb技術を導入する手順について解説します。 なお、用いている技術スタックが多層であることと、開発フローがまだ標準化できていないため、本記事では、「WebViewを用いてGUIを構築する基礎技術」に焦点を当てており、Web技術スタックそのものについては触れません。また、ソースコードの解説は要点のみに留めさせてい
かつて、鉄道や飛行機の案内板として活躍したパタパタ、あるいはソラリ―こと反転フラップ式案内掲示板をイメージをCSSアニメーションとJSで作ってみた。 なお、私が公開しているお気に入りの場所をマッピングした地図を公開するサービスToboggar でパタパタ型のUIを採用した。 サンプル Toboggar - 名古屋で食べるべきハンバーガー Top 10 ここで使用したソースを簡素化したものが今回の記事である。 完成形 まずは、出来上がりを Codepen で確認。(画面が表示されていないときは、Result をクリック) 左下の Start ボタンを押すとフラップが回る。 また、Slow ボタンでゆっくり回るので、動きをじっくり確認できる。 See the Pen Split-flap display animation by hiroatsu (@scqspcfg-the-solid) o
直感的なオプションでスプリングアニメーションできる JavaScript ライブラリ CSS Spring Animation - Katashin .info
直感的なオプションでスプリングアニメーションできる JavaScript ライブラリ CSS Spring Animation 2023年10月25日Vue,CSS,アニメーション,インタラクション,ライブラリ「難しいことはよくわからないからとりあえずいい感じにアニメーションしてほしい！」 前回、前々回の記事を読んだ方の中にはそう思った人がいるかもしれません。今まで CSS に数式を書いてアニメーションさせる方法や、iOS で使われているスプリングアニメーションを CSS で実装する方法を紹介しましたが、しっかりと理解をして実装をするにはハードルが高かったように思います。今回は、それらの実装を簡単にできる JavaScript ライブラリ CSS Spring Animation を紹介します。 前回、前々回の記事は以下のリンクから読めます。 iOS のスプリングを CSS 数式アニメーシ
新しい CSS 型オブジェクト モデルを使用する | CSS and UI | Chrome for Developers
要約 JavaScript で値を操作するための適切なオブジェクト ベースの API が CSS に追加されました。 el.attributeStyleMap.set('padding', CSS.px(42)); const padding = el.attributeStyleMap.get('padding'); console.log(padding.value, padding.unit); // 42, 'px' 文字列を連結し、微妙なバグを連結する時代は終わりました。 はじめに 以前の CSSOM CSS には長年にわたってオブジェクト モデル（CSSOM）があります。実際、JavaScript で .style の読み取りや設定を行う際は、常にそれを使用しています。 // Element styles. el.style.opacity = 0.3; typeof el.s
.img-box{ width: 100%; height: 46vw; overflow: hidden; position: relative; } .img-box>div{ position: absolute; top: 0; left: 0; width: 100%; height: 46vw; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 10; } /* 1枚目のスライド */ .img-box>div:first-of-type{ background-image: url(../img/img.jpg); } /* 2枚目のスライド */ .img-box>div:nth-of-type(2){ background-i
これは Wano Group Advent Calendar 2023、12/8(金)の記事です。 1つ前の記事は@iuchimさんの「Amazon Personalizeを試してみた時のメモ」ですね。いいですねレコメンド。Amazon Personalize、私もやりたい。 今回はブラウザのセッションリプレイという分野がおもしろかったので、その記事を書きます。 はじめに 運用している一部サービスで「セッションリプレイツール」の導入を試しています。 しばらく試験運用してみたらすごく良かったので、実際の導入に当たり考えるべきことと各SaaSの特徴をまとめ、ツール選定するまでの雑感をつらつら書いていきます。 (ブラウザ)セッションリプレイツールとは いわゆる「ブラウザ操作録画」です。 総じてサイトデザインとクリックや遷移の動きを保存し、動画などとして再現できます。 セッションリプレイ攻撃とかの
フリーランスのコーダーへ
弱小web制作会社で働いているコーダー増田です。 うちはコーダーがデザイナーの1/3もいないので外注コーダーさんに頼らないと回していけず、常に募集していい人を探している状態です。 フリーランスのコーダーという存在は、数だけなら結構います。ひとたび募集をかければどしどし応募がくるくらいいます。ただ1度仕事をしたら2度目がないことがほとんどです。 理由は ・実際の構築経験がないので全体の流れが分かっていない人が多い（実装部分は業務に入らないにしろ全体図を把握しているのといないのとではコーディングの質が全然違います） ・自分の実力に対して強気な価格設定すぎる ・引き受けてから納期を何度も引き延ばす（初稿を最終納品日に出して来たりする） などです。 納期についてはいろんな都合があるので前倒しも後ろ倒しも相談次第では、という感じ（正直webデザイン界隈じゃ日程通りにいくことのほうが少ないし）なんです
View Transition API によるスムーズな遷移 | View Transitions | Chrome for Developers
View Transition API を使用すると、ウェブサイトのさまざまなビュー間でシームレスな視覚的な遷移を作成できます。これにより、マルチページ アプリケーション（MPA）として構築されているか、シングルページ アプリケーション（SPA）として構築されている場合でも、サイト内を移動する際に視覚的な魅力のあるユーザー エクスペリエンスを実現できます。 ビュー遷移を使用する一般的な状況は次のとおりです。 商品リスティング ページのサムネイル画像。商品の詳細ページではフルサイズの商品画像に切り替わります。 ページからページを移動しても常に表示される、固定されたナビゲーション バー。 フィルタ処理に伴って位置が移動するアイテムを示すグリッド。 <ph type="x-smartling-placeholder"></ph> View Transition API で作成された遷移。デモサイ
30 Creative and Unique CSS Animation Examples to Inspire Your Own 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSS アニメーションを使えば、ボタンをよりクリックしやすくしたり、ランディングページにアクセントを付けたり、ページの読み込み中にユーザーを楽しませたりと、ウェブサイトでビューアーを魅了するのに効果的な方法です。 この投稿では、CSS アニメーションを成功裡に使った30の例をご紹介します。ウェブサイトの分析に多くの時間を費やしているユーザーとして、優れたアニメーションをよく見分けることができ、それらを皆さんに共有できることを嬉しく思います。 ではまず、CSS アニメーションの基本を復習しましょう。 CSS アニメーションの仕組み CSS キーフレームアニメーショ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く - Katashin .info
Chrome DevToolsを使いこなしてフロントエンド開発を加速させる
CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ
すべての主要ブラウザで利用可能になったアットルール@starting-styleとは
エンジニアになるのが遅かった人へ｜Yossy@英語とプログラミング
【保存版】心地よいWeb遷移アニメーションの基本ルール6個まとめ
もっと早く知りたかった！Web制作に便利な最新オンラインツール50個まとめ
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
CSS アニメーションでネオンサインの点灯の雰囲気を出してみる - Qiita
えっ！？まだtransformプロパティを使ってるの！？ – TAKLOG
コピペで楽々、CSSでできるボーダーアニメーション５選
Web制作者は要チェック！ Chrome 121で新しく追加された6つのCSSの機能
HTMLでモグラたたきゲームをつくりました - Qiita
プログラミング学習サイトまとめ - Qiita
VRT(storycap, reg-suit, Next.js)を安定させるためのTips
SVGでラインアニメーションを作る - Qiita
高性能な CSS アニメーションを作成する方法 | Articles | web.dev
JavaScript+CSS/アニメーション実装方法 - Qiita
LINE MUSIC の年末を彩ったアニメーション実装のコツ
JUCEとCHOCを組み合わせてオーディオプラグインのGUIをWeb技術で作ろう - Qiita
CSSアニメーションでパタパタ（反転フラップ式案内表示機）を作ってみた - Qiita
CSSアニメーションでフェードのスライドショーを作ろう！ - Global Web Design
セッションリプレイツールのススメと選定 - Qiita
CSSの表現力は無限大！クリエイティブでユニークなCSSアニメーション30+1選 - コハム