技術 - アニメーションの記事一覧
Bounce.js – ユーザビリティ向上に使えそうなCSS3によるアニメーションライブラリ
Webは基本的に表示されると全く動かないか、Flashによるスプラッシュのように最初だけアニメーションするかのどちらかが多いように思います。最近ではパララックスのようにスクロールによるアニメーションもありますが、それでも一旦表示されてしまえばそこで終わりです。ユーザアクションによるアニメーションを実装したかったらBou...
Animated WWDC 2014 Logo - WWDCのロゴをアニメーションさせるスクリプト
WWDC 2014が発表されました。今年はどんな面白い話題が出てくるでしょう、今からわくわくしている人も多いはずです。そんなWWDC 2014のページにはカラフルなタイルが並んだ中にAppleマークが浮かぶデザインがされています。そのデザインを真似し、さらにアニメーションまで行ってしまうのがAnimated WWDC ...
<x-gif> – アニメーションGIFに新しい魅力を提供するJavaScriptライブラリ
速度変更、音楽同期など面白い機能がいっぱいですよ！動画がどれだけインターネット上に溢れようともアニメーションGIFの人気は衰えません。音が出ない、何度も繰り返すと言った特徴が見ている人の心をとらえます。256色までの表現力もノスタルジックで楽しまれるポイントです。そんなアニメーションGIFを自在に操作するライブラリがで...
After Dark in CSS - 往年の名作。アフターダークをスタイルシートで再現
これはおっさんほいほい過ぎる！After Darkという名称を聞いて懐かしい！と思う方はどれくらいいるでしょうか。After Darkは元々はMac OSXの、その後Windows版も販売されたスクリーンセーバソフトウェアです。最初は89年から販売されているとのことで、長い歴史があります。今でこそスクリーンセーバのため...
Tilted Content Slideshow - ぜひ見て欲しい！超格好いいスライドショー
何これ格好いい！CSS3でアニメーションができるようになったとは言え、どこで使って良いものか悩んでしまいますよね。あまり使いすぎるとくどくなりますし、あまりに些細だと気付いても貰えない。そんな中、一つの例としてTilted Content Slideshowを紹介します。カルーセル的にヘッダーコンテンツを切り替えるライ...
ScrollMagic - スクロールアニメーションを実装する際に使えるjQueryプラグイン
シングルページアプリケーションの人気もあって、スクロールアニメーションが流行っています。しかしスクラッチで組むとなるとスクロールイベントの感知やアニメーションの制御など非常に難しいでしょう。そこで使ってみたいのが専用のライブラリです。今回はjQueryプラグインのScrollMagicを紹介します。## ScrollM...
CSS Shake – CSS3で実現するシェイクアニメーション
CSS3を使えばアニメーションも実現できますが、敷居はまだ高いように思います。せっかくの機能が使われないのは非常に勿体ない訳で、一つのライブラリとして提供されれば使いやすくなるのではないでしょうか。ということで今回はCSS Shakeを紹介します。CSS3を使ってシェイクジェスチャーを実現するアニメーションライブラリで...
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です。見ているだけで非常に面白いイフェクトになっ...