こんにちは、「ふ」です。
SVG画像って知ってますか？
SVGをあなたのwebに取り入れれば、どんなデバイスでも、どんなに拡大してもくっきり表示することができます。
さらにラスター画像とは違い「線」や「色」の情報を持っているので、コードで部分的にカスタマイズすることもできます。
そして。
アニメーションさせましょう。webサイトに動きをつけることで、静止コンテンツの枠から飛び出した、素敵なページを演出できるでしょう。
◼︎目次は画面右上↗︎のアイコンからご覧ください。
新着。
transform:matrixを理解する。
2021.06.14
行列計算は必要なし。
雨のアニメーションをSVGで作ろう。
2021.05.30
webページ上に雨を降らせます。
SVGで円グラフアニメーション。
2021.05.21
SVGの「破線」と「円周率」。
SVGで棒グラフのアニメーション。
2021.05.09
SVGを「htmlの部品」として利用する。
SVG アニメーション、ランダムにキラキラ。
2021.04.25
〜SVG in SVG。
SVG アニメーション、カメラのシャッターを再現。
2021.04.11
「アニメーションごと」重ねていく。
SVG アニメーション、パスの内側を切り抜いて透過させる。
2021.03.18
不透明度を移植する。
SVGアニメーション、 回転の中心を指定する。
2021.03.09
座標を取得して％変換。
SVGアニメーション、 回転スワイプで画像切り替え。
2021.02.27
ポイントは「２重クリップ」。
SVGに画像をぴったりと配置〜
preserveAspectRatio。
2021.02.19
縦横比が違っても安心。
clip-pathをアニメーションさせる。
2021.02.09
「覗き窓」自体を動かす。
ページめくりアニメーション 作り方。
2021.02.02
画像を読み込むだけで実装。
始めてみましょう。
シンプルなアニメーションを用意しました。まづはココから始めてみましょう。
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領域には、.pngや.jpgなどの画像を配置する事ができます。
そこにアニメーションを使う事で、効果的な画像の切り替えを実現。
HTMLで画像を重ねる、便利な方法。
2021.01.20
positionやz-index指定なし。
SVGとCSSで、
見開きページ風に画像切り替え。
2021.01.24
SVG領域を確保すると便利。
ページめくりアニメーション 作り方。
2021.02.02
画像を読み込むだけで実装。
SVGに画像をぴったりと配置〜
preserveAspectRatio。
2021.02.19
縦横比が違っても安心。
SVGアニメーション、 回転スワイプで画像切り替え。
2021.02.27
ポイントは「２重クリップ」。
SVG アニメーション、カメラのシャッターを再現。
2021.04.11
「アニメーションごと」重ねていく。
モーフィング。
SVGオブジェクトのパスデータ自体をアニメーションさせます。
SVGでモーフィングアニメーション。
2021.01.10
オブジェクトをなめらかに変形させる。
SVG モーフィングが動かない！
2021.01.11
３つの確認ポイント。
SVG、波を表現する。
2021.01.16
合成されたリアルな波を目指す。
線を操る。
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、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。