mkasumi.com


もしかしたら中には難しいことをせずに、画像でマスクしてトリミングしている方もいるかもしれませんが、今回は以下の理由があり、SVGのclipPath要素を使うことにしました。

  • デザイナーさんから手書き風に画像をトリミングしたいという要望があった
  • クライアントがCMSから画像を更新するとき、画像を加工する手間を省きたい
  • パスをモーフィングアニメーションさせたい

子猫の顔が全部見えないのが悲しいですが、クリップパスの実装イメージ


実際のコードは以下のURLからご覧ください。

※Part1のソースコードはなんだかぎこちなかったので、改良したソースコードがPart2になります。

「SVGのclipPath要素を使ってモーフィングアニメーションする」のつづきを読む


Tag:SVG アニメーション 

Posted by 森田かすみ at 13:27  Permalink

2016年8月20日(土)に開催された WCAN mini 2016 Vol.2 SVG Maniax in Nagoya で、制作したSVG絵本「ピヨスケとたまごのぼうし」についてライトニングトークとして発表しました。

もともと、私は学生時代は絵本専攻を選択していて、「Webなら読者が参加できる絵本を作れるのでは?」という思いも少し持ちつつこの道を選択した理由でもあったので、個人的には念願のWebでの絵本制作でした。

今回はSVGがテーマだったため、SVGの技術を使った絵本を制作しました。私が作成した絵本は以下のリンクからご覧いただけます(※ SVGの学習用の制作物のため、一部ブラウザで正常に動かないことがあります。CSSアニメーションを使っているので、IEやEdgeでは正常に動きません。デスクトップのChrome・FireFoxでは正常に動きます。Safariでは6ページ目が動きません)。

制作した絵本



「WCAN mini 2016 Vol.2でSVG絵本「ピヨスケとたまごのぼうし」を発表しました」のつづきを読む


Tag:SVG 絵本 

Posted by 森田かすみ at 23:13  Permalink

写真:HTML5名古屋勉強会風景

HTML5NAGOYA #16ではテーマがSVGということで、「CSSでできるSVGアニメーション」というタイトルでお話ししてきました。

JSと比べるとCSSはブラウザ対応していないし、できるアニメーションも少ないのですが、 CSSでできたらお手軽ですよね。

どちらかというと私はJSはできないほうで、CSSでアニメーションできたらいいのにな、と日頃探している人なので、同じような人にちょっとでも面白いなと思ってもらえたら幸いです。

今回ご紹介した主なアニメーション

  • トランスフォーム
  • ドローイングアニメーション
  • 円グラフ

トランスフォームのアニメーションについて

スライドでもご紹介しているトランスフォームのアニメーションはpngやjpegでもできたりしますが、書き出しやCSSスプライトにわけるのがとても手間がかかってしまいます。(実は、実際に趣味で制作していたのですが、途中で挫折してしまいました…。)SVGは、イラストレーターで書いて、SVGに拡張子を変換したらすでにパーツごとに分かれていて、idやclassも適応できるので比較的楽に実装できます。

写真だとか複雑なイラストなどのSVGで表現できないものはpngやjpegのほうがいいと思いますが、簡単な図形やパーツが多いものはSVGのほうがいいんではないかなと思います。

ドローイングアニメーションについて

ドローイングアニメーションについては1年ほど前の記事ですが、説明しているものがありますので、スライドではわからないという方はこちらをご覧ください。

円グラフについて

円グラフは最近海外の記事やデモでいろんな人が作成しているので気になっていたアニメーションでした。こちらは主にSmashing Magazine の Designing Flexible Pie Charts With CSS and SVG の記事を参考にしたものを自分なりに解釈して今回ご紹介しました。英語ですが、こちらの記事はとてもわかりやすいのでおすすめです。

個人的には、学生の頃役には日常生活では立たないと思っていた円周率がSVGで大活躍して義務教育にありがたみを感じました。


最後に

今回はCSSでできる範囲でご紹介しましたが、やはりJSもできたほうが表現が広がります。日頃からJSも勉強したいと思っているので、再度エンジンをかけていきたい所存です!

今回発表させていただいたHTML5NAGOYAですが、次回は未定だそうです。発表者がいれば開催するそうなので、興味ある方はツイッターアカウントGoogle グループがあるので、こちらから連絡できると思います。

それでは、この度は貴重なご機会をありがとうございました!


Tag:SVG セミナー 

Posted by 森田かすみ at 10:11  Permalink

HTML5NAGOYA#14で今回はテーマが「フロントエンド入門」ということで、SVGについて発表しました。

スライドはこちらです。

「HTML5NAGOYAで「使う前に知っておきたいSVGのこと」を発表しました」のつづきを読む


Tag:SVG CSS HTML セミナー 

Posted by 森田かすみ at 21:26  Permalink

CSSのアニメーションやSVGを勉強している間に、SVGもアニメーションできることを知ったので触ってみました。

SVGでアニメーションさせるには3つの方法があります。

  • SMILアニメーション
  • Javascript
  • CSSアニメーション

どんなことができる?

hoverしたときの動きとか、SVGのパスで特殊な表現ができるようになる。

普段使っているCSSでもアニメーション事態は可能なので学習のハードルが低い。

「SVGのアニメーション」のつづきを読む


Tag:SVG CSS 

Posted by 森田かすみ at 13:28  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー