こんにちは、「ふ」です。
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コード、読み方（構成を知る）。
チュートリアル。
SVGアニメーション、エンドレスに流れる画像。
2020.07.23
〽️ タイトル部分に使えそう？ふふふ。
SVGアニメーション06、アニメーションに合わせてテキストの色を反転。
2020.07.15
〽️ ３つの長方形を動かします。
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所有なら無料。
Vectornator 使い方。
iPadでSVGデータを作成、◼︎ net環境さえあれば。ただし￥が少々掛かります。
BOXY SVG 〜お手軽SVG作成アプリを使ってみる。HTMLに配置。
作成したSVGファイルをHTMLファイルに貼りましょう。CSSなどを使って編集も可能です。
HTML：SVGファイルでくっきり画像。
SVG画像に影を落とす。
SVG、オブジェクト単位でCSSを適用させる。
SVGをCSSで編集。
Vectornator、SVGを書き出してwebに配置。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧