ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - アニメーションの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2014/11/27

vivus - SVGを解析してアニメーション表示

SVGはベクターベースのドローなので、どれだけ拡大しても綺麗に表示されます。レスポンシブや高解像度化するスマートフォン対応を考えれば画像よりもSVGのがメリットがあると言えるでしょう。もう一つのメリットとしてJavaScriptから操作するのが容易と言うことがあります。今回はその仕組みを使ったSVGアニメーションライブ...

List

  • 2014/11/23

Walkway.js – SVGコンテンツを取得して自動アニメーション

HTML5が正式勧告になり、SVGの利用も今後ますます広がっていくものと思われます。ベクターベースのドローができるので拡大表示したとしても綺麗に描けるのが特徴です。さらにもう一つ、アニメーションが書けるというのも特徴です。とはいえSVGアニメーションを作るというのはそうそう簡単ではありません。もうちょっとシンプルなアニ...

List

  • 2014/11/16

GreenSock – 高速なHTML5アニメーションライブラリ

HTML5によってかつてFlashが行っていた領域がJavaScript/CSS3によって実現されています。その一つにアニメーションがあります。これまでFlashバナーなどで提供されていたアニメーションが、Web標準の技術だけで行えるようになっています。とはいえ、できるようになったと言ってもやり方は簡単ではありません。...

List

  • 2014/11/08

Page Loading Effects - ページ読み込み中はアニメーションを表示しよう

Webアクセスで最もストレスになるのはページローディングではないかと思います。95年くらいの時は10分待って画像が表示されるなんてのはざらだった訳ですが、今はそんな悠長に待っていられる時代ではありません。画像リソースのみならずページがさくさくと表示されて欲しいものです。もし表示が遅かったとしても解決する手段がない訳では...

List

  • 2014/10/26

whirl – CSSだけで実装されたローディング表示

Webアプリケーション化が進み、Ajaxを使ってデータを取得したりJavaScriptで画面を再描画するようになると、その処理途中にユーザに触って欲しくないことが増えます。特にフォーム送信の二重処理は厄介です。そこでボタンを一時的に無効にしたり、処理中である旨を通知する必要が出てきます。そのためのライブラリがwhirl...

List

  • 2014/10/26

Letterbolt - 文字をアニメーションしながら描くライブラリ

テキストをアニメーション化するライブラリはこれまでにもありました。多いのはタイプライター風に文字を表示するものや、点滅させたり、文字色を変化させると言ったものもあります。今回はさらに高度なテキストアニメーション機能を追加するLetterboltを紹介します。アニメーションしながら文字が書かれていくという、面白いライブラ...

List

  • 2014/10/20

Gifshot – Webカム/動画/画像からアニメーションGIF生成

アニメーションGIFは今なお人気です、というかここ数年さらに人気が高まっているのではないでしょうか。動画とは違いプラグインもCPUパワーも殆ど使わずに再生できますし、音がないのが逆に創造性を働かせてくれます。そんなアニメーションGIFを各種リソースから生成してくれるソフトウェアがGifshotです。Yahoo! Inc...

List

  • 2014/07/12

Agile Css3 Engine – JavaScriptを使って高度なCSS3アニメーションを実現

CSS3を使えば簡易的なアニメーションや回転もサポートするなど、より高度な表現が自由にできるようになります。とは言え、タイミングをずらしたりするのをすべてスタイルシートで行うのは大変です。そこでJavaScriptを使ってCSS3を出力しようと言うライブラリがAgile Css3 Engineになります。アニメーション...

List

  • 2014/06/28

Bounce.js – ユーザビリティ向上に使えそうなCSS3によるアニメーションライブラリ

Webは基本的に表示されると全く動かないか、Flashによるスプラッシュのように最初だけアニメーションするかのどちらかが多いように思います。最近ではパララックスのようにスクロールによるアニメーションもありますが、それでも一旦表示されてしまえばそこで終わりです。ユーザアクションによるアニメーションを実装したかったらBou...

List

  • 2014/04/15

Animated WWDC 2014 Logo - WWDCのロゴをアニメーションさせるスクリプト

WWDC 2014が発表されました。今年はどんな面白い話題が出てくるでしょう、今からわくわくしている人も多いはずです。そんなWWDC 2014のページにはカラフルなタイルが並んだ中にAppleマークが浮かぶデザインがされています。そのデザインを真似し、さらにアニメーションまで行ってしまうのがAnimated WWDC ...

List

  • 2014/04/07

<x-gif> – アニメーションGIFに新しい魅力を提供するJavaScriptライブラリ

速度変更、音楽同期など面白い機能がいっぱいですよ!動画がどれだけインターネット上に溢れようともアニメーションGIFの人気は衰えません。音が出ない、何度も繰り返すと言った特徴が見ている人の心をとらえます。256色までの表現力もノスタルジックで楽しまれるポイントです。そんなアニメーションGIFを自在に操作するライブラリがで...

List

  • 2014/03/22

After Dark in CSS - 往年の名作。アフターダークをスタイルシートで再現

これはおっさんほいほい過ぎる!After Darkという名称を聞いて懐かしい!と思う方はどれくらいいるでしょうか。After Darkは元々はMac OSXの、その後Windows版も販売されたスクリーンセーバソフトウェアです。最初は89年から販売されているとのことで、長い歴史があります。今でこそスクリーンセーバのため...

Missing

  • 2014/03/20

Tilted Content Slideshow - ぜひ見て欲しい!超格好いいスライドショー

何これ格好いい!CSS3でアニメーションができるようになったとは言え、どこで使って良いものか悩んでしまいますよね。あまり使いすぎるとくどくなりますし、あまりに些細だと気付いても貰えない。そんな中、一つの例としてTilted Content Slideshowを紹介します。カルーセル的にヘッダーコンテンツを切り替えるライ...

List

  • 2014/03/11

ScrollMagic - スクロールアニメーションを実装する際に使えるjQueryプラグイン

シングルページアプリケーションの人気もあって、スクロールアニメーションが流行っています。しかしスクラッチで組むとなるとスクロールイベントの感知やアニメーションの制御など非常に難しいでしょう。そこで使ってみたいのが専用のライブラリです。今回はjQueryプラグインのScrollMagicを紹介します。## ScrollM...

List

  • 2014/03/04

CSS Shake – CSS3で実現するシェイクアニメーション

CSS3を使えばアニメーションも実現できますが、敷居はまだ高いように思います。せっかくの機能が使われないのは非常に勿体ない訳で、一つのライブラリとして提供されれば使いやすくなるのではないでしょうか。ということで今回はCSS Shakeを紹介します。CSS3を使ってシェイクジェスチャーを実現するアニメーションライブラリで...

List

  • 2014/02/07

WOW.js - JavaScript/CSS3でスクロール連動型アニメーション

最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがW...

List

  • 2014/01/28

scrollReveal.js - data要素で制御するシンプルなアニメーションライブラリ

CSS3やJavaScriptによってWebベースのアニメーションは実装しやすくはなっていますが、だからといって誰でも簡単にできるものではありません。単純に右から左へ動かすならまだしも、雰囲気のいい感じに流れていくとなれば細かな制御が必要になります。!

List

  • 2014/01/28

simple-vscroller - 新着表示で使いたい。縦型スクロールアニメーションライブラリ

Web訪問者の目を引く方法の一つにアニメーションがあります。静的に表示しただけでは無視されてしまうコンテンツも、アニメーションさせることで目に留まりやすくなります。これは随時データが追加される場合に特に有効です。例えば新着のお知らせなどで使ってみたいのがsimple-vscrollerです。定期的に流れていくコンテンツ...

List

  • 2013/11/07

Animations for Thumbnail Grids – サムネイルで並べた写真用アニメーション

複数の写真が変わるアニメーションは格好いいですよ。Animations for Thumbnail Gridsは複数の写真を切り替える際にアニメーションしながら表示してくれるライブラリです。アニメーションの種類も豊富で、印象深いエフェクトが実現できます。!このように奇麗にイラストが並んでいます。こういったエフェクトは実...

List

  • 2013/11/07

Animated SVG Icons - Snap.svgを使ったアニメーションするアイコン

これは覚えておくと良さそうですよ!スタイルシートやJavaScriptを使ってマウスオーバーで画像を差し替えたりする操作は良くありますが、その発展版とも言えるのがAnimated SVG Iconsです。SVGを使ったアイコンをクリックやマウスオーバー時にアニメーションしながら表示変更してくれるライブラリです。画像だと...