SVGアニメーション 作り方。

〽️ チュートリアル。 〽️ 画像作成。 〽️ HTMLに配置。







こんにちは、「ふ」です。
SVG画像って知ってますか? SVGをあなたのwebに取り入れれば、どんなデバイスでも、どんなに拡大してもくっきり表示することができます。
さらにラスター画像とは違い「線」や「色」の情報を持っているので、コードで部分的にカスタマイズすることもできます。

そして。

アニメーションさせましょう。webサイトに動きをつけることで、静止コンテンツの枠から飛び出した、素敵なページを演出できるでしょう。

新着。


SVGアニメーション、裏表を見せながら回転。

2020.10.09
〽️ X軸を基準に回転。


SVGアニメーション、mask要素で手書き風テキスト。

2020.10.01
〽️ <mask>要素について理解しましょう。


SVG、線を描くアニメーション。

2020.09.23
〽️ 破線のプロパティをつかいます。


SVG、use要素を使ったモーションパス。

2020.09.07
〽️ ポイントは‥「マイナスの遅れ」。


SVG、モーションパスで複数の要素を動かす。

2020.08.29
〽️ 小技を集結させて実装します。


SVGでモーションパス(基本編)。

2020.08.18
〽️ 好きな軌道で画像を動かす。


SVGとCSSで作る、吹き出しアニメーション。

2020.08.10
〽️ 吹き出しの形は自由自在。





 

チュートリアル。


SVGアニメーション、エンドレスに流れる画像。

2020.07.23
〽️ タイトル部分に使えそう?ふふふ。


SVGアニメーション06、アニメーションに合わせてテキストの色を反転。

2020.07.15
〽️ 3つの長方形を動かします。


SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。

2020.07.06
〽️ テキストの内部だけアニメーション。


要素が画面内に表示されたらアニメーション、Intersection Observer。

2020.06.22
〽️ コピペで試してみてね。


SVGアニメーション04、軸を基準に拡大/縮小 〜

2020.06.13
〽️ 「切実な一言」に使おう。


SVGアニメーション03、中心を基準に拡大/縮小 〜transform:scale( )。

2020.06.06
〽️ 映画のタイトルのような‥


CSSアニメーション、発火のタイミングを制御する。

2020.05.31
〽️ 好きなタイミングで発火/消火。


SVGアニメーション02、画像を宙に浮かべる。

2020.05.22
〽️ 要素を変形させるtransformプロパティ。


SVGアニメーション01、画面内にフェードインさせる方法。

2020.05.10
〽️ 新シリーズはじめました。


 

画像作成。


まづはSVG画像を作成しましょう。構築環境としては、イラレのような万能しかし高額なものもありますが、無料のアプリやブラウザ上で作成する方法もあります。

◼︎ iPhone/iPad/Mac所有なら無料。



◼︎ net環境さえあれば。ただし¥が少々掛かります。







 

HTMLに配置。


作成したSVGファイルをHTMLファイルに貼りましょう。CSSなどを使って編集も可能です。





 


「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧