2018.01.22

SVGでリアルな湯気を作ってみる

もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。それが『湯気』です。イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。…

2017.04.27

SVGのキャラクターを parallax.js で動かしてみる

先日弊社TAMサイトをリニューアルしましたが、ご覧いただけましたでしょうか？サイトリニューアルにあたり404ページでTAMくんの顔をマウスの動きに合わせて動かすというものを作ったので、今回はそれを紹介したいと思います。…

2016.12.06

突然ですが、transformプロパティのskew使っていますか？ skewを使えばX軸、Y軸へのゆがみを表現できるのでちょっとした動きを作る際にとても便利です。今回はそんなskewを使って、化粧品のクリームがぷるぷる…

2016.08.16

先日某案件で「写真が1枚しかないけど、良い感じに動かしたい！」という依頼がありました。 CSSやJSで動かすことも試みたのですが、なかなか思い通りにいかず紆余曲折を経てたどり着いたのがAdobe Animate CC（…

2016.04.12

みなさんSVGしてますか？前回SVGアニメーションについて書きましたが、今回はその延長でSnap.svgを使ったマウスオーバーアニメーションを作成してみたいと思います。まずはこちらをご覧ください。完成デモ＞＞タ…

2015.12.14

ちょっと凝った動きをつけたいけど、Canvasでガリガリ書くのはちょっと・・という方に是非お勧めしたいのがSVGアニメーション！ SVGはXMLをベースとした2次元ベクターイメージなので拡大縮小が自由というのも魅力の一…