backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA
CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に
Animate.css | A cross-browser library of CSS animations.
Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t
【CSS】animation・keyframesを徹底解説
【CSS】animation・keyframesを徹底解説 公開日:2019/01/20 /最終更新日:2019/07/05 CSS Technique 今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。 しかし、当サイトのGALLERYに掲載するサイトを日々収集していると、面白いアニメーションをさせているサイトにたくさん出会います。気になるとコードまで調べて見てみるのですが、たくさんのサイトで「animation」、「keyframes」が使われておりました。 そこで、私もWeb制作者の端くれとして、これを機にしっかりと身につけようと、今回の記事をアップするに至りました。
センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA
パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
現実の動きをそのままアニメーションに変換できる無料サービス「Plask」に開発者からの注目集まる。AI技術で映像から手軽にモーションキャプチャーを生成可能
「Plask」は、韓国・ソウルに拠点を置く同名のソフトウェア会社が開発。現実の動きをAIが自動で取り込み、単純な操作でモーションデータを作成できることからアニメーターやゲーム開発者らを中心とした界隈で大きな注目を浴びている。 編集画面では、各ターゲットの配置やキーフレームの調整といった機能を搭載。今後は複数人での共同編集も実装する予定とのこと。データの出力は汎用フォーマットのGLB、FBX、BVH形式などに対応し、BlenderやMayaといった3DCGソフトでも扱うことができる。 （画像はYouTube「Meet Plask – Plask – AI Motion Capture and 3D Animation Tool」より）（画像はYouTube「Meet Plask – Plask – AI Motion Capture and 3D Animation Tool」より）（画像は
Google Earth Studio
Inside Earth Studio Powerful motion design, all in the browser. Earth Studio gives you the tools you need to create professional content with Google Earth imagery. Read more in the Documentation. Keyframe Animation Earth Studio uses keyframes, just like other industry-standard animation tools. Move the globe, set a keyframe, rinse and repeat. It’s that easy. Quick-Start Projects Create an orbit, o
クリエイター界激震 簡単にキーフレームアニメを作れるソフトに「無料で公開していいクオリティじゃない」の声
簡単にキーフレームアニメーションを作れるフリーウェア、「AnimeEffects」が「無料で公開していいクオリティーじゃない」と話題になっています。ニコニコ動画に使い方の紹介動画が公開されているのですが、非常に大きな可能性を感じさせてくれます。 同ソフトは、1枚の絵をアニメーションさせるためのソフト。pngやjpgなどの画像ファイルも使えますが、psd（Photoshop用の画像ファイル）を読み込ませるとレイヤーなども読み込んでくれるため、より多彩な動きを実現できます。 動画では、走るポーズをとったサーバルちゃん（テレビアニメ「けものフレンズ」の主人公の1人）のpsdファイルから走るアニメーションを作製しています。手足を別パーツとして動かすことで、自然な走る動きが作成できるもよう。 psdファイルを読み込んで いろいろと作業をすると 走るアニメーションが完成 どのパーツを上に表示するかを決
「楽園追放」のエフェクト作画から見る、CGと手描きの差異とその見所 : GOMISTATION.FY
「楽園追放」とはグラフィニカによって制作された、SF作品です（劇場公開）。キャラから爆発まで、ほぼすべてCG。いやあグラフィニカの絵作りって凄いですね。公開されてから、ずっと色んなところで絶賛の嵐だったので、そんなにすごいのかという感じで猜疑的だったんですが、百聞は一見に如かずという感じで。実際に見てみると、確かにこれは一定の評価はされるなあと。 そんで、本題は、劇中に出てくる「エフェクト」です。ええ、ここからはアンジェラちゃんがどうのこうのとかそういう話は一切しません。お尻にも触れません。徹頭徹尾、「エフェクト」のお話しかしません。煙、爆煙、砂埃、爆発。CG、作画を問わずにまとめて紹介したいと思う。 （「楽園追放」において、演出を務められた京田さんから色々と指摘をいただいたので、一部訂正しました。雑でごめんなさいね。そーす→１、２、３、４。京田さん、ありがとうございます。） さて大きな見
京都アニメーションはなぜ回すのか？ 「さすがの猿飛」をみよ！ - subculic
最初に断っておくと、これはトンデモ理論の類かもしれない。資料も少なく、証言も取れていない。「もし、そうだったら面白いな」というレベルの小話だ。さて、つきましては京都アニメーション。よく回す。どうしてだか回転大好き。『けいおん!!』『日常』『中二病でも恋がしたい!戀』それぞれのオープニングで回しているし、『エンドレスエイト』でも回転のモチーフが取り入れられていた。主犯は取締役・石原立也。そこで下記の記事を参照して欲しい。「中二病でも恋がしたい！戀」OPの回転カット「だって昔のアニメとかって背景とかも、引いたりぐるぐる回したりとかしながらキャラクターがぐるぐる回り込みで走ったりしてましたよ」と石原さんは話されているが、これはいわゆる「作画回り込み」を指しているのだろう。「作画回り込み」とは、カメラワークに合わせて背景まですべて作画で描く高カロリーのアニメート（細かく分類すれば、全背動回り込みと
押井監督、スタジオジブリのリストラ暴露 - シネマニュース : nikkansports.com
押井守監督（６３）が１１日夜、東京・新宿ピカデリーで行われた自身の総監督作品「ＴＨＥ ＮＥＸＴ ＧＥＮＥＲＡＴＩＯＮ－ＰＡＴＬＡＢＯＲ－ 第４章」上映記念トークイベント「第４回 マモルの部屋」で、スタジオジブリの鈴木敏夫プロデューサー（６６）に、ジブリの今後について直撃した。 押井総監督はまず、「聞きたいことは、ただ１つしかない。ジブリ、どうするつもりなの？」と質問。宮崎駿監督（７３）が昨年９月、長編アニメーションからの引退を発表し、現在公開中の最新作「思い出のマーニー」（米林宏昌監督）以降の動向が注目される中、その真意を問うた形だが、鈴木プロデューサーが「パトレイバーの話、するんでしょ？」とかわそうとした。すると、押井監督は「そんな話、聞いてない。どうするも、こうするも、リストラも必要だろうけど、リストラしたいから、こうするの？」と、スタジオジブリがアニメーターをリストラしていると暴露し
アナログアニメーションの透過光を撮ってみる。 - Futene.
コミックマーケット86、Futon.新作のGravitationに加えて、PRINTGEEKのPLOTTER vol.4に連載コラムを寄稿してます。 ボクは「撮される光、映される光」というタイトルで多重露光や投影のハナシを書きました。 「アナログセルアニメの透過光やオプチカル合成、80年代のCGIって光を放っているよね。アレ、凄く好きだ」という話題。記事ではその演出の技術面についても軽く触れたのだけれど、どうにも文章じゃ書ききれない。 そこで、執筆中にちょっとした実験を行いました。ということで「アナログアニメーションの透過光を実際にカメラで撮って、画像を作ってみる」メモ。 用意するもの 光を乗せたいキャラとか、ベースになる絵。光らせたい部分を黒く塗りつぶしたマスク型。ベース・マスク型と同じサイズの黒いラシャ紙。ハンズなんかの画材コーナーで手に入るハズ。カッター。紙を重ねて切り抜くのでカッタ
アニメOPEDの“スピード感” - OTACTURE
ノリの良いオープニングには“スピード感”がある。 楽曲に合わせて映像が流れていく快感は本編では味わえない特別なものだ。 今期だと『ノーゲーム・ノーライフ』のOPとか、スピード感があってとても良い。 オープニング映像というのは基本的には そういった「スピード感」や「変化」の連続で出来ている。 具体的に分類すると「加速」、「減速」、「等速」、「（急）停止」、「高速カッティング」、「色彩変化」、「フレームイン／アウト」等々。 これらの要素をうまく継ぎ接ぎして、楽曲のリズムと合わせていくのである。 等速 「等速」表現の場合、 基本的にはオブジェクトが画面の横に（あるいは縦に）等速で通過していくのを撮ることになる。 『ノーゲーム・ノーライフ』OP 密着マルチは「等速」を表現するのに使われる。 複数のセルがそれぞれ横にスライドし、「奥行き」や「等速」の動きを生みつつも、 この画面全体のスピード感は一番
TVアニメ『境界の彼方』の舞台が奈良だと聞いたので行ってみた - 戯れ言（はてなダイアリー版跡地）
サイトの更新休止したあと、ネタが溜まってると言いつつブログも放置してたのですが、 旬のネタだったので更新することにしました。こういうのは賞味期限切れるとあれなので。 今期始まった京アニの新作TVアニメ『境界の彼方』。 放送前に公開されていたPV等から近鉄電車が走ってるということで、舞台探訪クラスタの間で橿原神宮前駅や大和西大寺駅のカット比較が行われてましたが、実際に1話が放送されたのを見てみると、橿原市界隈以外にも見覚えのある奈良県各所の舞台が出てきたので自分も行ってきました。 サイゼリヤ JR奈良三条通り店 通りがかかったところを撮っただけなので構図が合わず。まぁでも大体こんな感じで。 ちなみに内装は別物らしいです。 奈良県某所 栗山さんが弁当を買っていた弁当屋。ちなみにここは15時で閉まるので早めに行きましょう。 同じ敷地内にある公園。左の方は実際は駐車場になっています。 むせ返るほど
日本にフルCGアニメは根付くのか？ 第11回：樋口真嗣（映画監督・特技監督）
日本におけるフル 3DCG アニメーション制作への理解と振興を目指す本連載。今回は映画監督あるいは特技監督として、多彩な映像作品を発表し続けている樋口真嗣氏にご登場いただく。『ゴジラ』（1984）の怪獣造形で映画業界に入った樋口氏は、実写・特撮・VFX・アニメなどの幅広い分野で、画づくりの才能を発揮してきた。2012年には『巨神兵東京に現わる』、『のぼうの城』（共に監督）、『ヱヴァンゲリヲン新劇場版：Q』（絵コンテなど）といった数多くの話題作に携わった樋口氏に、映像表現における3DCGの可能性について語ってもらった。 【聞き手：野口光一（東映アニメーション）】 Supported by EnhancedEndorphin Shinji Higuchi 1965年生まれ。東京都出身の映画監督・特技監督・映像作家・装幀家。高校卒業後、『ゴジラ』（1984）の怪獣造形に携わることで映画業界へ入る
JavaScriptなし!! CSSだけで実現する3Dアニメーション | HTML5GOGO
CSS3のアニメーションサンプルで、立方体を扱ったものは数あれど、それ以上の多面体のサンプルが見当たらなかったので、倍の12面体を作りました。 イメージ 概要 今回はそのサンプルを題材に、CSS3で新たに追加されたアニメーション系のプロパティをご紹介します。 ※今回ご紹介するプロパティは、執筆時点では全て要ベンダープレフィックスです。 ※対応ブラウザ：Chrome 12～, Safari 5～ Mozillaは「現時点では Z 軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D 変換はサポートされていません。」だそうです。 MDN – CSS transforms の利用 ※グラフィックボードが3Dの表現に対応している必要があります。 ※動作にはCPUパワーが少々必要になります。 HTMLサンプル ※各面はリンクになっています。 回転方向を指定できるコントローラー付きのサン
[JS]多彩なエフェクトが面白い、ボックスにパネルをスライド・フェード表示するスクリプト -Mosaic
デモページ ダイナミックな斜め方向のスライドのアニメーションで表示 Mosaicの実装 HTML: circle 上記の一番上のキャプチャ、「circle」の実装例です。 <div class="mosaic-block circle"> <a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay"> </a> <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/></div> </div> JavaScript:circle $(document).ready(function($){ $('.circle').mosaic({ opaci
Sencha - Sencha Animator
Sencha Animatorを使えば、これまでのリッチメディア広告に匹敵するCSS３広告を作成することができます。文字や画像をスムーズに遷移させるアニメーションを作成したり、グラデーションがかかったボタンをデザインしたり、さらに分析用のトラッキングコードを埋め込んだりすることがSencha Animatorの中で行えます。また、これらは全てWeb標準技術を使ってできることです。 これらの標準技術を使えば、現在デスクトップ用のブラウザ向けのリッチメディア広告で使われているほぼ全ての機能は、Apple iOS、BlackBerry Torch、そしてGoogle Android向けに移植・再現することが可能です。 CSS３広告について企画・検討されている広告代理店、広告制作会社の皆様、Sencha Animatorの広告作成者向けオプションについてお問い合わせください。 Contact Us
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons
cakes（ケイクス）
