技術 - アニメーションの記事一覧
WOW.js - JavaScript/CSS3でスクロール連動型アニメーション
最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがW...
scrollReveal.js - data要素で制御するシンプルなアニメーションライブラリ
CSS3やJavaScriptによってWebベースのアニメーションは実装しやすくはなっていますが、だからといって誰でも簡単にできるものではありません。単純に右から左へ動かすならまだしも、雰囲気のいい感じに流れていくとなれば細かな制御が必要になります。!
simple-vscroller - 新着表示で使いたい。縦型スクロールアニメーションライブラリ
Web訪問者の目を引く方法の一つにアニメーションがあります。静的に表示しただけでは無視されてしまうコンテンツも、アニメーションさせることで目に留まりやすくなります。これは随時データが追加される場合に特に有効です。例えば新着のお知らせなどで使ってみたいのがsimple-vscrollerです。定期的に流れていくコンテンツ...
Animations for Thumbnail Grids – サムネイルで並べた写真用アニメーション
複数の写真が変わるアニメーションは格好いいですよ。Animations for Thumbnail Gridsは複数の写真を切り替える際にアニメーションしながら表示してくれるライブラリです。アニメーションの種類も豊富で、印象深いエフェクトが実現できます。!このように奇麗にイラストが並んでいます。こういったエフェクトは実...
Animated SVG Icons - Snap.svgを使ったアニメーションするアイコン
これは覚えておくと良さそうですよ！スタイルシートやJavaScriptを使ってマウスオーバーで画像を差し替えたりする操作は良くありますが、その発展版とも言えるのがAnimated SVG Iconsです。SVGを使ったアイコンをクリックやマウスオーバー時にアニメーションしながら表示変更してくれるライブラリです。画像だと...
Snap.svg – アニメーションもサポートしたJavaScript連携可能なSVGライブラリ
HTML5の時代になってSVGにも注目が集まっていますが、個人的に思うのはAdobeはその何年も前からSVGに取り組んでいたなということです。IEで使えるSVGプラグインビューワーも早い段階から出していましたし、IllustratorもSVG書き出しを相当前のバージョンからサポートしています。そんな中、Adobeがさら...
IFTTTで使っているiOS用キーフレームアニメーションライブラリ「Jazz Hands」
Jazz HandsはiOS用、MIT Licenseのオープンソース・ソフトウェアです。iOSアプリの中でシンプルなアニメーションを実現したいと思ったらチェックして欲しいのがJazz Handsです。IFTTTで実際に使われているキーフレームベースのアニメーションライブラリです。最初の場面。スワイプ操作でアニメーショ...
Webでここまで！Google製のHTML5広告アニメーションツール「Google Web Designer」
Google Web DesignerはWindows/Mac OSX用のソフトウェアです。これまでアニメーションできるバナーと言えばFlashで作られてきました。しかし時代はHTML5/JavaScript/CSS3です。そこでGoogleが開発したのがGoogle Web Designerです。バナーを作ります。ダ...
フォーム入力のフォーカス移動をスムーズに「Focus transition」
Focus transitionはCSS3製のオープンソース・ソフトウェア（MIT License）です。ちょっとした工夫でユーザビリティは大きく向上します。今回はWebフォームにおいてTabキーを押した時にアニメーションを実現するFocus Transitionを紹介します。インストールしました。任意のWebフォーム...
CSS3だけで実現する多彩なアニメーション「magic」
magicはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。Webページは基本的に静的で、動くものは訪問者の目を引きます。アニメーションGIF、Flash、動画などがありますが今回はユーザの操作によるインタラクティブなアニメーションを実現するmagicを紹介し...
Flash風なテキストアニメーション「Nanimator」
NanimatorはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。Flashの出番がどんどん減っています。と同時に求められるのがこれまでFlashで行っていた操作をHTML5でできるようにする事です。今回は簡易アニメーションを実現するNanim...
Web Animationsを体験できるJavaScriptライブラリ「web-animations-js」
web-animations-jsはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。HTML5/CSS3になってWeb上でアニメーションを表現する方法は幾つか存在します。しかしいずれの方法にしても一長一短はあり、そんな中で現在W3Cで考えられているのがWeb Anima...
CSS3によるパノラマ3Dイフェクト「CSS3-panorama」
CSS3-panoramaはスタイルシート製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。CSS3ではスタイルシートだけでアニメーションが実現できる機能があります。それを使って作られたサンプルソフトウェアがCSS3-panoramaです。見ているだけで非常に面白いイフェクトになっ...
ダイナミックなアニメーションを実現する「Anima」
AnimaはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。CSS3になって、スタイルシートを駆使すれば華麗なアニメーションが実現できるようになってきました。しかしそこには限界もあります。そこでより本格的なアニメーションを作り上げたいと考える方はAnimaをベースにしてみる...
紙で作ったスリットを使ったアニメーション作成「animbar」
animbarはスリットを使った紙ベースのアニメーションを制作するソフトウェアです。紙でアニメーションと聞くとパラパラ漫画を思い浮かべますが、今回はスリットを使った面白いアニメーションを紹介します。そして、それを作成できるソフトウェアがanimbarです。メイン画面です。画像を追加します。全て同じ大きさでないといけませ...
胸熱。Webブラウザ上のMikuMikuDance「MMD.js」
MMD.jsはPMD/VMDを読み込んでWebGLを使って描画するソフトウェアです。先日mmd.jsを紹介しましたが、さらに完成度の高いMMDをWebGLを使ってレンダリングするのがMMD.jsです。踊っている1シーン。かなりスムーズです。見ている向きを変更できます。上からができる、ということは…。後ろ向きだってもちろ...
JavaScriptで実現するアニメーションライブラリ「Shifty」
ShiftyはJavaScriptでスタイルタグを書き換えてアニメーションを実現するライブラリです。Webベースでアニメーションをしようと思うとCSS3を使ったり、Canvasタグを使うのが一般的です。しかし今回は素のJavaScriptのみでアニメーションを実行するShiftyを紹介します。デモです。ボールが左右に行...
CanvasタグからアニメーションGIFを生成「jsgif」
jsgifはCanvasタグに描画した内容をアニメーションGIFに変換するソフトウェアです。簡易的なアニメとしてよく使われているのがアニメーションGIFです。まだまだ意外と人気で、動画をあえてアニメーションGIFに変換して楽しむようなサイトも数多く存在します。そんなアニメーションGIFを発展させてくれそうなのがjsgi...
2013/04/09
2013/04/09業務で使えるオープンソース（71）「Webアニメーション」
今回のテーマはWebアニメーションです。Webサイト内で使うと強い印象を残すことができます。最近では実現するための技術も複数出てきています。今回はそうした技術、関連ソフトウェアをまとめて紹介します。
SVGを使ってイラスト制作過程をアニメーション化「Lazy Line Painter」
Lazy Line PainterはSVGファイルを読み込んで、描く過程をアニメーションにしてくれるJavaScriptライブラリです。イラストや絵画はアナログな世界ではできあがった作品を見るのみですが、デジタルであればその作成過程を何度も繰り返し楽しめます。そんな面白さが感じられるのがLazy Line Painte...