CSSに新機能！スクロールに連動してスタイルを変化「Scroll-driven Animations（スクロールドリブンアニメーションズ）」

Рет қаралды 8,412

Күн бұрын

新しいCSSの機能が登場しました😆❗️
動画内でも話している通り、まだ実務で使えないですが、かなり期待できる新機能です🥳♪
JavaScriptのIntersection Observerのような機能です❗️
🔗 Scroll-driven AnimationsのWebサイト：scroll-driven-animations.style/
🎥 この動画の構成 🎥
00:00　Scroll-driven Animationsが登場
00:19　一般的なSVGファイルの使い方
01:10　そもそもSVGってなに？
02:00　SVGファイルの中身は？
02:51　1. SVGスプライト
03:32　- 実際の書き方
05:25　- スタイルの変更
05:52　- いろんなプロパティ
06:10　- スタイルの指定サンプル
06:53　- 別ファイルで読み込む
07:15　2. background-image（背景画像）
08:27　- 指定方法
09:05　- 色の指定
09:53　- ホバーの指定
10:24　- 自作関数
12:24　- デザインデータからsvgをコピー
ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
kzbin.info?sub_c...
⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
• 【10分でサイト公開】誰でもできる！Webサ...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋
【マウス】
✅ ロジクールアドバンスドワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【キーボード】
✅ ロジクールアドバンスドワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【パソコン】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【周辺機器】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【デザイン基礎編】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【デザイン思考編】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【書籍デバイス】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
------------------------------
BGM：トーマス大森音楽工房
/ freemusicthomasoomori
------------------------------
#webデザイナー #figma #webdesign

Пікірлер: 15

@catpolice2000 7 ай бұрын

新しい機能もわくわくしますが、まだ駆け出しなので色んな動きとか作り方を見せてもらえるのは引き出しが増えてとてもありがたいです！ヒロさんが簡単だと思われている小技なんかも色々知りたいと思いました

@hirocode 7 ай бұрын

こちらこそありがとうございます☺️♪ご意見参考に動画制作に活かせるように頑張ります😆❗️

@user-tw3ge3on2n 7 ай бұрын

前ちらっと記事見た時、おおー！と思いましたが、こうやってデモ見るとめちゃくちゃステキですね！今まではこれ実装するの大変そー、、ってなってたのがさらっと書けるの楽しみすぎます♡ flexやgrid並に奥が深そうですが両者がそうであったように絶対主流になる革命的なやつでしょうから、しっかりキャッチアップしたいですね！

@hirocode 7 ай бұрын

まさに！おっしゃる通り革命的な機能ですよね❗️未だに:hasが実装されないFirefoxに不安はありますが早く全ブラウザで対応して欲しい限りです！