こんにちは、「ふ」です。
SVG画像って知ってますか？
SVGをあなたのwebに取り入れれば、どんなデバイスでも、どんなに拡大してもくっきり表示することができます。
さらにラスター画像とは違い「線」や「色」の情報を持っているので、コードで部分的にカスタマイズすることもできます。
そして。
アニメーションさせましょう。webサイトに動きをつけることで、静止コンテンツの枠から飛び出した、素敵なページを演出できるでしょう。
◼︎目次は画面右上↗︎のアイコンからご覧ください。
新着。
SVGとCSSで、
見開きページ風に画像切り替え。
2021.01.24
SVG領域を確保すると便利。
HTMLで画像を重ねる、便利な方法。
2021.01.20
positionやz-index指定なし。
SVG、波を表現する。
2021.01.16
合成されたリアルな波を目指す。
SVG モーフィングが動かない！
2021.01.11
３つの確認ポイント。
SVGでモーフィングアニメーション。
2021.01.10
オブジェクトをなめらかに変形させる。
始めてみましょう。
シンプルなアニメーションを用意しました。まづはココから始めてみましょう。
SVGアニメーション01、画面内にフェードインさせる方法。
2020.05.10
〽️ 新シリーズはじめました。
SVGアニメーション02、画像を宙に浮かべる。
2020.05.22
〽️ 要素を変形させるtransformプロパティ。
SVGアニメーション03、中心を基準に拡大/縮小 〜transform:scale（ ）。
2020.06.06
〽️ 映画のタイトルのような‥
SVGアニメーション04、軸を基準に拡大/縮小 〜
2020.06.13
〽️ 「切実な一言」に使おう。
webパーツ。
ボタンや吹き出しなど、webサイトで即戦力なSVGアニメーション。
SVGとCSSで作る、吹き出しアニメーション。
2020.08.10
〽️ 吹き出しの形は自由自在。
SVG、ボタンのon/offを表現。
2020.12.03
イベントにも効率よく対応。
SVGでボタンアニメーション【Web Animations API】。
2020.12.19
event.targetからオブジェクトを動かす。
SVGアニメーション、 複数のボタンを一括制御。
2020.12.29
１度作っておけば楽チン ♬
HTMLで画像を重ねる、便利な方法。
2021.01.20
positionやz-index指定なし。
工夫ワザいろいろ。
画像の重ね方などを工夫して、コードだけでは実装できない色んな効果に挑戦してみます。
SVGアニメーション、エンドレスに流れる画像。
2020.07.23
〽️ タイトル部分に使えそう？ふふふ。
SVGアニメーション06、アニメーションに合わせてテキストの色を反転。
2020.07.15
〽️ ３つの長方形を動かします。
SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。
2020.07.06
〽️ テキストの内部だけアニメーション。
モーションパス。
SVGならではのアニメーション。パスに沿って要素を動かします。
SVGでモーションパス（基本編）。
2020.08.18
〽️ 好きな軌道で画像を動かす。
SVG、モーションパスで複数の要素を動かす。
2020.08.29
〽️ 小技を集結させて実装します。
SVG、use要素を使ったモーションパス。
2020.09.07
〽️ ポイントは‥「マイナスの遅れ」。
3Dに挑戦。
SVG画像を3D空間で動かしてみましょう。SVG自体は3Dをサポートしていないので、CSSも活躍させます。
SVGアニメーション、裏表を見せながら回転。
2020.10.09
〽️ X軸を基準に回転。
CSSで3D回転アニメーション。
2020.10.21
〽️ rotate3dに挑戦。
perspectiveで奥行きのあるアニメーション。
2020.11.01
〽️ 1点透視の環境を再現。
SVG、3D空間に配置してアニメーション〜preserve-3d。
2020.11.20
〽️ オブジェクトごとに重ねて配置。
アニメーションを制御。
アニメーションそのものを実装しただけでは、ブラウザがロードされた瞬間に実行されてしまいます。
スクロールやユーザのイベントへの対応を研究。
CSSアニメーション、発火のタイミングを制御する。
2020.05.31
〽️ 好きなタイミングで発火/消火。
要素が画面内に表示されたらアニメーション、Intersection Observer。
2020.06.22
〽️ コピペで試してみてね。
SVGでWeb Animations API。
2020.11.12
〽️ ネイティブJavaScriptでのアニメーション。
線を操る。
SVGのオブジェクト本体ではなく、「線」を動かすアニメーションに挑戦。
SVG、線を描くアニメーション。
2020.09.23
〽️ 破線のプロパティをつかいます。
SVGアニメーション、mask要素で手書き風テキスト。
2020.10.01
〽️ <mask>要素について理解しましょう。
画像作成。
SVG画像を作成しましょう。構築環境としては、イラレのような万能しかし高額なものもありますが、無料のアプリやブラウザ上で作成する方法もあります。
◼︎ iPhone/iPad/Mac所有なら無料。
Vectornator 使い方。
iPadでSVGデータを作成、◼︎ net環境さえあれば。ただし￥が少々掛かります。
BOXY SVG 〜お手軽SVG作成アプリを使ってみる。HTMLに配置。
作成したSVGファイルをHTMLファイルに貼りましょう。CSSなどを使って編集も可能です。
HTML：SVGファイルでくっきり画像。
SVG画像に影を落とす。
SVG、オブジェクト単位でCSSを適用させる。
SVGをCSSで編集。
Vectornator、SVGを書き出してwebに配置。
SVGコード、読み方（構成を知る）。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。