今年もCSSの進化が止まりません! 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能を紹介します。 Four new CSS features for smooth entry and exit animations by Una Kravets, Joey Arhar 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに displayをキーフレームでアニメーションさせる 個別プロパティのトランジションを可能にする 最上位レイヤーとの間で要素をア
『DAICON Ⅳ』の40周年を記念して、若き庵野秀明もアマチュアとして参加した伝説的作品、 「DAICON IVオープニングアニメ」へのリスペクト溢れるオリジナル映像 『Cassette Girl』を1週間の期間限定で公開いたします。 ”スピリット”を受け継ぐ若きクリエイターたちが作り出した新境地をどうぞご覧ください。 『Cassette Girl』 <声の出演> 林原めぐみ 山寺宏一 <スタッフ> 原案・監督 小林浩康 アートディレクション・キャラクターデザイン コヤマシゲト メカニカルデザイン 高倉武史 脚本 榎戸洋司 画コンテ 摩砂雪 アニメーション スタジオカラーデジタル部 <ストーリー> 20XX年、世界は深い雪に包まれた。薄暗く冷たい冬の世界で人々はすべての媒体を管理されていた。 「日本アニメ(ーター)見本市」とは、2014年から数年間に渡りスタジオカラーとドワン
■コロナ禍からの完全回復が見えてきた中国映画市場コロナ禍で苦しめられた中国の映画市場が回復軌道に乗っています。2020年には年間204億万元まで落ち込んだ興行収入は、23年には549億元まで回復。過去最高だった19年642億元の85%の水準です。24年も1/3が過ぎた4月末段階で約200億元、ほぼ平常ペースに戻ったとみてよいでしょう。 これは映画業界全体だけでなく、劇場アニメーションも同じです。2020年から22年は3年間の年平均は12億元と2019年の1/10まで落ちましたが、23年には80億元まで回復しました。 ただ数字が戻りましたが、ヒット作品の内訳はコロナ禍以前とは一変しています。中国産アニメーションが急成長しているのです。 この辺りは、3年前にも「日本・中国・米国 どのアニメが中国の映画館で選ばれているか」の話題でとりあげたのですが、その傾向がさらに加速しており、もう一確認してみ
富野由悠季とはどんなアニメーション監督か。「演出の技」と「戯作者としての姿勢」の二つの切り口から迫る徹底評論! 書籍化にさきがけて本論の一部を連載します。 今回からはシリーズ「富野由悠季概論」。富野由悠季監督の経歴を時代背景とともに振り返り、アニメーション監督として果たした役割に迫ります。 (バナーデザイン:山田和寛(nipponia)) 宇宙との出会い 現在、アニメーション監督という存在が広く当たり前の存在として世間に認知されている。しかし、このような認知を得るまでには、それなりの長い時間が必要であった。そしてその中で大きな働きを果たしたひとりが、富野由悠季監督である。 富野の経歴を簡単に振り返ってみよう。 アニメーション監督・富野由悠季は1941年11月5日、三人兄弟の長男として神奈川県小田原市に生まれた。本名は富野喜幸。富野家は代々「喜」の漢字を継いでおり、喜幸の「喜」の字もそこに由
同社は、代表取締役神村靖宏氏の名前で「お知らせ」と題し、「去る5月29日、弊社 株式会社ガイナックスは東京地方裁判所に会社破産の申立をおこない、受理されましたことをお知らせいたします」と報告。 その経緯として「1984年の設立以来、弊社ではアニメーション制作やゲームソフトの制作販売等を行ってまいりました。 『新世紀エヴァンゲリオン』(現在は株式会社カラーが著作権を保有)などいくつかのヒット作にも恵まれましたが、2012年ごろから見通しの甘い飲食店経営、無計画なCG会社の設立、運営幹部個人への高額の無担保貸付、投資作品の失注等、経営陣・運営幹部の会社を私物化したかのような運営により、経済状態が悪化していきました」と経緯を報告。 続けて「当該経営陣の作った多額の負債により、ロイヤリティ未払いによる委員会除名や貸金訴訟等の窮状に陥る中、地方に当該幹部やその関係者を代表としたガイナックスの社名を冠
富野由悠季とはどんなアニメーション監督か。「演出の技」と「戯作者としての姿勢」の二つの切り口から迫る徹底評論! 書籍化にさきがけて本論の一部を連載します。 今回はシリーズ「富野由悠季概論」の最終回。富野由悠季監督の経歴を時代背景とともに振り返り、アニメーション監督として果たした役割に迫ります。(バナーデザイン:山田和寛(nipponia)) 「〈2〉「アニメーション監督」の誕生」はこちら 『宇宙戦艦ヤマト』の監督の役割 まずTVシリーズの『宇宙戦艦ヤマト』では、現在行われている「アニメーション監督の職能」を三人が分担して担っていたと考えるとわかりやすい。その三人とは、西﨑義展プロデューサー、監督・設定デザインの松本零士、演出の石黒昇である。 どういう作品を作るべきかというビジョンを持ち、スタッフを先導したのは西﨑だったが、西﨑はアニメーションの映像そのものを直接コントロールしていたわけでは
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
■「アニメーションの定義とは?」先日、ある方と話していて出た話題。 「アニメーションの定義とは?」 アニメーションは何を持ってアニメーションとするのかという話です。 「アニメーション」と「アニメ」の違いとかでなく、もっと広い“アニメーション”全体の話になります。 僕は日頃、アニメーションについていろいろ書いているのですが、そもそも“アニメーション”が何であるか自身のなかで定義づけしてなければ、そうした言葉も空虚と批判されても仕方ありません。 そこで「アニメーションは何を持ってアニメーションとするのか」を考えてみました。 しかし、これが意外に難しい。 1970年代、80年代であれば、定義はより簡単でした。 おそらくは、こんな感じです。 「アニメーションは人の手によって作られた対象物をひとコマずつ撮影し、フィルム上映した時に動きのある映像となる手法」 こうした定義では、一枚ずつ手で描いたセル画
2023. 07.09 お知らせ 『ゆるキャン△ SEASON3』2024年放送予定!新シーズンよりアニメーション制作をエイトビットが担当! 『ゆるキャン△』第3期のタイトルがTVアニメ『ゆるキャン△ SEASON3』に決定いたしました。また2024年に放送予定と発表されました。 そして、TVアニメ『ゆるキャン△』、TVアニメ『へやキャン△』、TVアニメ『ゆるキャン△ SEASON2』、映画『ゆるキャン△』とC-Stationがアニメーション制作を担当してきましたが、新シーズンとなるTVアニメ『ゆるキャン△ SEASON3』よりエイトビットがアニメーション制作を担当することが決定いたしました。 制作会社変更に伴いまして、メインスタッフも一新。監督は「ヤマノススメ Next Summit」などで演出を担当した登坂晋、シリーズ構成は「ウマ娘 プリティーダービー」でもシリーズ構成・脚本を担当した
東宝、アニメスタジオのサイエンスSARUを買収…アニメ制作能力を強化、成長中のアニメ事業の拡大スピードをさらに加速へ 東宝<9602>は、この日(5月23日)、アニメスタジオのサイエンスSARUを買収すると発表した。同社代表の崔 恩映氏より全株式を6月19日付で取得して子会社化する。今回の買収を通じて、アニメーションの制作能力を強化する。直近2024年2月期決算で、アニメ事業の営業収入が90%増の462億円と大きく伸びたが、同社グループのアニメ事業の成長スピードを加速させることが狙いだ(関連記事)。 サイエンス SARU は、2013年に設立されたアニメスタジオで、制作能力を強みとして、これまで数々のアニメシリーズ、映画作品を制作してきた。 2017年公開の「夜明け告げるルーのうた」で文化庁メディア芸術祭アニメーション部門大賞を受賞、さらに世界最大規模のアニメ映画祭であるアヌシー国際アニメ
映画制作やブランド/IPのプロデュースを行う企業・ CHOCOLATEが、オリジナル劇場アニメーション作品『KILLTUBE(キルチューブ)』の制作を発表。プロジェクトのパイロット映像を公開した。 同社が長編アニメーションを手掛けるのはこれが初めて。プロジェクト内では、制作、届け方、稼ぎ方の新たな手法を発明するべく「108の実験」が行われる。 10億円の製作費をもとに、2026年の作品公開を目指してプロジェクトが進行中。現在、制作実験パートナーを募集している。 ARuFaやしまぐち ニケも参加する『KILLTUBE』『KILLTUBE』は、とある理由で2026年まで江戸時代が続いている日本を描く作品。 厳しい身分制度が敷かれている社会で、最下層の3人組が、身分を変えることができる「決闘配信」に挑み、大衆の嘲笑をはねのけていくバトルエンターテインメントとなる。
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はなし。 ビジュアルのトラン
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション(Scroll-Driven Animations)は、スクロールによって制御されます。上下にスクロールすると、アニメーショ
先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。 今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。 Chrome 117 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @starting-styleルール overlayプロパティ transition-behaviorプロパティ CSS Gridのsubgrid値 text-wrap: pretty; contain
富野由悠季とはどんなアニメーション監督か。「演出の技」と「戯作者としての姿勢」の二つの切り口から迫る徹底評論! 書籍化にさきがけて本論の一部を連載します。 今回はシリーズ「富野由悠季概論」の第2回。富野由悠季監督の経歴を時代背景とともに振り返り、アニメーション監督として果たした役割に迫ります。 (バナーデザイン:山田和寛(nipponia)) アニメーションに「作者」はいるか? 富野がアニメーション監督の認知に大きな役割を果たしたのは、1977年から1984年いっぱいまで続いた「アニメブーム」の時期に当たる。この時期は、劇場版『宇宙戦艦ヤマト』をきっかけに、それまで子供(小学生)向けと思われていた「テレビまんが」「漫画映画」が内容的にも進化し、ティーンエイジャーの熱狂的な支持を得ていることが広く知られるようになった時期である。先述の富野のキャリアに当てはめると、1977年から1988年にか
「このWebサイト、素敵。」と感じさせるモノとは、一体何でしょう。 それはデザインなのか、それとも機能性なのか、または「このフォント、配色が好き」といった特定のデザイン要素かもしれません。 ずばり、この問題の答えはポンと出せるほど単純ではなく、これらの要素を組みあわせることで、素晴らしいWebサイトは生まれます。 この1年間で、デザイン制作の参考にしたいWebサイトを200以上紹介してきました。 製品やサービスを販売、紹介するサイトや、実験的なサイト、情報を提供する教育的なサイト、政治的なサイト、そして夢中になる体験型サイトまで、業種もさまざまです。 この記事では、デザインアイデアにしたり、トレンドを分析したり、2023年の振り返りに最適な50のWebデザインを厳選してご紹介します。
「Webサイト制作がもっと楽になる方法ってないの?」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
CSSだけでスクロールアニメーションが作れる!? 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ
2014年から先端テクノロジーの研究を論文単位で記事にして紹介しているWebメディアのSeamless(シームレス)を運営し、執筆しています。 1週間分の生成AI関連論文の中から重要なものをピックアップし、解説をする連載です。第3回目は、GoogleのDreamBooth改良、静止画1枚からアニメーション作成など5つの論文をまとめました。 生成AI論文ピックアップGoogle、キャラ学習手法のDreamBoothを高速・小型化 さらに1枚の学習元から可能にする「HyperDreamBooth」開発 DreamBoothより25倍高速 画像1枚から動画を生成するAI「AnimateDiff」 DreamBoothやLoRAなどにも対応 動画内の被写体を変えて別の動画を生成できるAI「Animate-A-Story」 テンセント含む研究者らが開発 テキスト、画像、動画を同時に処理し生成する大規
【はじめに】この記事はBaaaaと何の関係もないただの学生(25卒)が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ
37冊奇跡の同時復刻!「おジャ魔女どれみ」シリーズ&「明日のナージャ」の絶版絵本が電子書籍で!東映アニメーションの貴重な作画による往年の名作絵本が緊急復刻! 株式会社講談社 2024年6月6日 07時10分 講談社おともだち・たのしい幼稚園編集チーム(編集長:浅野聡子)は、2024年6月6日(木)に「おジャ魔女どれみ」シリーズおよび「明日のナージャ」の絶版絵本を電子書籍にて37冊同時復刻致します。 今回電子復刻されるのは、1999年2月より放映スタートされた『おジャ魔女どれみ』、2000年2月開始の『おジャ魔女どれみ#』、2001年2月開始の『も〜っと! おジャ魔女どれみ』、2002年2月開始の『おジャ魔女どれみドッカ〜ン!』の全4シリーズの絵本30冊です。 また、2003年2月に放映がスタートされた『明日のナージャ』からは絵本7冊が電子復刻されます。 37冊は、すべて東映アニメーション社
▼本編(114分)フル視聴は以下のURLから(「文藝春秋 電子版」初回登録は「月あたり450円」から) https://bunshun.jp/bungeishunju/articles/h6051 【フル動画】小泉悠×太田啓之×高橋杉雄「アニメの戦争と兵器」 ▼「文藝春秋 電子版」掲載のテキスト記事はこちら 小泉悠×高橋杉雄「ウクライナ戦争『超精密解説』」(2023年5月号掲載) https://bunshun.jp/bungeishunju/articles/h5941 太田啓之「《語り残した事は多い》宮﨑駿が漫画版「ナウシカ」に描いた“最後の1コマ”の真意とは?」 https://bunshun.jp/bungeishunju/articles/h6151 小泉悠×高橋杉雄「ウクライナ戦争『超精密解説』」(2022年9月号掲載) https://bunshun.jp/bungei
2014年から先端テクノロジーの研究を論文単位で記事にして紹介しているWebメディアのSeamless(シームレス)を運営し、執筆しています。 1週間分の生成AI関連論文の中から重要なものをピックアップし、解説をする連載です。第49回目は、生成AI最新論文の概要5つを紹介します。 生成AI論文ピックアップ アニメの“中割り”を生成してアニメーションに仕上げる「ToonCrafter」 1枚の画像とモーションデータからダンス動画を生成するAIモデル「MusePose」 リアルタイムでストリーミング動画を変換するAIモデル「StreamV2V」 写真1枚から人物やキャラクターの話す動画を生成するモデル「V-Express」 人の手で塗った数枚の線画から、残りのアニメーションを自動彩色できるAIモデル アニメの“中割り”を生成してアニメーションに仕上げる「ToonCrafter」アニメーション制
2023年7月28日、東映アニメーションは2024年3月期第1四半期の決算を発表した。連結売上高は198億8400万円(10.1%増)と第1四半期としては再び過去最高を記録した。 好調だったのは版権事業と商品販売事業で、いずれも前期に大ヒットした『ONE PIECE FILM RED』、『THE FIRST SLAM DUNK』、『ドラゴンボール超 スーパーヒーロー』などの劇場映画関連の影響が大きかった。版権事業は売上高97億9300万円(2.4%増)、商品販売は24億100万円(348.7%増)だった。 映像製作・販売事業は、5.2%減の72億8300万円。大型映画の公開がなかったこと、テレビアニメの作品数が減少したことで、劇場アニメとテレビアニメの売上が落ち込んだ。海外向けの映像販売でも映画『ドラゴンボール超スーパーヒーロー』の海外上映権販売の反動減があったが、映画『THE FIRST
とにかくおもしろがって進めることを優先。それがジブリの精神でもあった ジブリパークであらかじめ計画されていた5つのエリアは、来春にすべてオープンの運びとなる。制作を統括する監督の立場として、この仕事の満足度はいかばかりか。 「僕のキャリアは公園をつくる仕事から始まったので、長い時間をかけてまた原点へ戻ってきた感はあります。本当に自由にやらせてもらいました。ここはジブリの拠点がある東京からほどよく離れているので、すぐには細かいチェックや横槍が入ったりしません(笑)。その隙にこちらでどんどん進めてしまえという方針でやってきました。 ©杉山拓也/文藝春秋 ここはジブリパークなので、ジブリらしさを尊重しながらつくるのは大前提ですが、それ以外に細かい制約事項はありませんでした。現場で制作する身としては、とにかくおもしろがって進めました。それがジブリの精神に適うやり方でもあるので。ジブリはもともと宮﨑
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1:異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2:アニメーションがCSSで自由自在 アニメー
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの?」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS(2024年春版)CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション(Scroll-Driven Animations)はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
元となる画像データと「動作」のデータを入力することで元の画像を動作データの通りにアニメーションさせる技術の論文がAlibabaの研究チームから発表されました。「Animate Anyone」と名付けられたこの技術を使用することで、ちらつきの少ない高品質なアニメーションが生成可能です。 Animate Anyone https://humanaigc.github.io/animate-anyone/ 下記のムービーで生成されるアニメーションの品質を確認可能です。 Animate Anyone: Consistent and Controllable Image-to-Video Synthesis for Character Animation - YouTube 今回登場した「Animate Anyone」は、下図左端のような1枚の「元画像」を元に、中央の「動作」データを入力することで右
自分のデザインに合ったローダーを簡単に実装したい! そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
先週発表されたiPhone 15のWebページに、面白い仕掛けが実装されていました。Appleは新製品のページにはスクロール駆動のアニメーションを多数取り入れており、今回のはスクロール駆動のダイナミックアイランドです。 このスクロール駆動のダイナミックアイランドをCSSで実装するテクニックを紹介します。下記のアニメーションは少しゆっくりめにしています。 ダイナミックアイランド(Dynamic Island)とは、iPhone 14 Proで実装された機能で、カメラのパンチホール部分のスペースを利用して実行しているアプリのアクティビティを表示します。サイズはアプリごとに最適化されます。 参考: iPhone 14 ProのDynamic Islandの使い方 | Appleサポート で、今回のiPhone 15 Proのページにスクロール駆動のダイナミックアイランドが多数実装されています。コ
ポップオバーAPI 最新版Chrome 114に搭載された新機能で、コンテンツの一番上に重ねて表示するUI「ポップオバー」。補足の情報やユーザーにアクションを促すことができます。 Introducing the popover APIでは、具体的な使い方や実装例が紹介されています。 範囲スライダーをCSSでカスタマイズ How to Create a Custom Range Slider Using CSSでは、モダンなCSSテクニックを使って、ネイティブHTMLの<input>要素だけで人目を引く、カスタム範囲スライダーを作成する方法が紹介されています。 See the Pen CSS only custom range sliders by Temani Afif (@t_afif) on CodePen.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く