もののけ姫のCG周り、何回見ても97年時点でできると思えなくてオーパーツにしか見えない「これってCGだったの！？」ふっくん @fukkunmania Indies Animation Compositor/版権特効/3DCG reel:youtu.be/RHxmmO82Xas Email:fukkunmania@gmail.com Wish List:amzn.asia/bvpS7hM🕺 fukkunmania.tumblr.com
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
動く流体シェイプをコピペで作成 Blob Animation + SVGおすすめツール
液体が波打つような、ゆるやかなスライムのような曲線をもつBlob流体シェイプ。ウェブサイトに取り入れることで、直線的で無機質な印象から、ナチュラルで優しい印象を与えることができます。 スムーズでなめらかな動きを加えたBlog流体シェイプを手軽に作成できるオンラインツール「Blob Animation」が公開されています。 Blob Animationで作成したアニメーションは、コピペ可能なCSSコードでダウンロード、利用可能です。 Blob Animation https://blobanimation.com/ アクセスすると以下のような画面が表示されます。 左側にBlogアニメーション、右側にアニメーションをより細かく設定できる調整ツールとして、「Animation Speed（アニメーション速度）」、「Gradient（グラデーション）」、「Blob Layers（Blobレイヤー数
100年の歴史をもつウォルト・ディズニー・アニメーション・スタジオが「アニメ映画の作り方」を公開中
ウォルト・ディズニー・スタジオのアニメーション制作主要部門の1つで1923年から100年近くにわたって長編アニメーション映画を制作しているウォルト・ディズニー・アニメーション・スタジオが、アニメーション映画の作り方を解説する「Filmmaking Process」を公開しています。 Filmmaking Process https://disneyanimation.com/process/ ウォルト・ディズニー・アニメーション・スタジオは、まず最初に「アニメーション映画はどのように構成されているのか」を説明しています。アニメーション映画に限らず、映画の最低構成単位はカメラのフィルムがスタートして止まるまでの「カット」です。このカットを集めて作られる1つの区切りが「シークエンス」となります。 「ミラベルと魔法だらけの家」の上映時間は90分28秒で、40個のシークエンスで構成されています。各
マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現 - ICS MEDIA
ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2020年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2020 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されているとは思えない、シンプルながら効果的なテクニックが多数ランクインしていた2020年。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Animated clip-path slider Concept 画面を縦半分に二分割した画像スライダーで、画像にマウスホバ
サイトの質が向上！コピペできるHTML/CSS便利スニペット100個まとめ
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のデザイン制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて最新HTML／CSSスニペットをまとめています。 コンテンツ目次 1. 小技テクニック系（15個） 2. 面白、ユニーク系（16個） 3. ホバーエフェクト系（6個） 4. テキストエフェクト系（10個） 5. ページレイアウト系（10個） 6. イメージスライダー系（9個） 7. ナビゲーションメニュー系（2個） 8. ローディングアニメーション系（4個） 9. ボタンエフェクト系（13個） 10. CSSマジック（10個） 11.
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
「製作委員会」とはどんなものか・どんな仕事をしているのか現場担当者たちがAnimeJapan 2015の座談会で具体的に語った
多くのアニメで見かける「製作委員会」のメンバーはどういった人たちなのか、どのように話を進めて、どう仕事をしているのかを、実際に現場で仕事をしている担当プロデューサーが語る場がAnimeJapan 2015で設けられました。 進行はProduction I.GのプロデューサーでSTEVE N' STEVEN取締役の石井朋彦さんが担当し、WIT STUDIO代表取締役社長の和田丈嗣さん、東宝プロデューサーの川村元気さん、スタジオジブリプロデューサーの西村義明さんが出演しました。 左から石井さん、和田さん、川村さん、西村さん。 ◆アニメを仕事にしたプロデューサーたち WIT STUDIO 和田丈嗣プロデューサー(以下、和田)： 僕は最初は通信機器メーカーで営業をやっていました。ある時、ふと好きだったアニメに携わらないと一生後悔すると思いいたって、Production I.Gの石川さんに直接連絡を
アルゴリズムとプログラミングをビジュアルで一挙に理解できる「VisuAlgo」
アルゴリズムを理解するのにビジュアル化することは非常に有効で、プログラムをビジュアル化することで理解が進むのもまた同じ。そこで、アルゴリズム・プログラミングの理解が進むようにと、アルゴリズムを記述したプログラムコードを一挙にビジュアル化することで、アルゴリズム＆プログラミングを同時に学習できる一挙両得なサービス「VisuAlgo」が公開されています。 VisuAlgo - visualising data structures and algorithms through animation https://visualgo.net/en 上記のVisuAlgoサイトで試しにソートアルゴリズムの基本プログラム「バブルソート」をビジュアル化してみます。「Sorting」の「bubble」をクリック。 検索窓の下に「bubble」と表示されたのを確認したら「Sorting」の画像をクリック。
YouTubeで見られる短編アニメ7本 新海誠さんなどプロの作品からアマチュアの作品まで - はてなニュース
YouTubeでは、プロの作品からアマチュアの自主制作作品まで、数多くの短編アニメーションが公開されています。その中から、はてなブックマークで話題を集めた作品を紹介します。企業とコラボして制作されたアニメ、学生が卒業制作で作った作品など、個性的な7本です。 ■ 新海誠さん「クロスロード」 ▽ http://www.youtube.com/watch?v=AfbNS_GKhPw&hd=1 「クロスロード」は、アニメーション監督・新海誠さんと、Z会がコラボレートした動画です。大学進学を目指し勉強に励む離島住まいの「海帆（みほ）」と、都内在住の「翔太」。関わりのないはずの2人の人生が、Z会の通信教育を通じて知らない間に交差していくというストーリーです。キャラクターデザインと作画監督は、「とらドラ！」「あの日見た花の名前を僕達はまだ知らない。」などで知られる田中将賀さんが担当しています。2月にテレ
アニメGIFに縦線2本を入れるだけで3D化できることが話題に | Token Spoken
アニメGIFに何本か縦線を入れるだけで、アニメGIFを3D化出来ると言う信じられない話が、本日欧米で話題になっておりました。 それでは早速12連発でどうぞ！ 1 2 3 4 5 6 7 8 9 10 11 12 縦線の奥行きでの位置（Y）を決めて、その前後に物をはみ出させたり引っ込めたりすることによって、人間の目があたかも本当に奥行きがあるかのように錯覚してしまうんですねぇ。 いやしかし、我々人間の脳と、こんな事を思いつく方が素晴らしい！ 普段は欧米の最先端テクノロジー業界情報を配信しておりますので、twitterやFacebookページ、Google+で是非フォローをお待ちしております。 また、記事の買い取り行ってますのでKataribeも是非よろしくお願いします！ GIFs: 3D pictures become possible with two straight lines
Protovis - Examples
Gallery Enjoy these sample visualizations built with Protovis. For any example, use your browser to view the source or the backing dataset. Protovis is no longer under active development. The final release of Protovis was v3.3.1 (4.7 MB). The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in
最近話題になったイケてるWebサービス・アプリ9選（2013年9月編）
こんにちは。 もうすぐ9月も終わりということで、今月中に話題になったイケてるwebサービスやアプリをご紹介します。 Cookie Clicker（クッキー・クリッカー） 突如としてブームとなったブラウザゲームです。 遊び方は簡単で、画面左側に表示されているクッキーをクリックしてクッキーを獲得するゲーム。そのクッキーを貯めていき右側に並んでいるアイテムや設備を購入し、効率よくクッキーを増殖させるというゲーム。1秒間に得られるクッキーの枚数をいかに増やせるかなどがゲームのポイントです。 Nature Sounds 雨、ビーチ、川、鳥の鳴き声などが聞けるBGMサービスです。 音楽に合わせて、背景の映像が変わるのもステキ。作業がはかどりそう！ ほしふる 流星群お知らせアプリです。 忘れてしまいがちな流星群がやってくる日を、3日前に通知して教えてくれます。 あらかじめ通知してくれるのは便利ですね。2
CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。 CSS3 Animation Cheat Sheet CSS3 Animation Cheat Sheetのデモ CSS3 Animation Cheat Sheetの使い方 CSS3 Animation Cheat Sheetのデモ デモは2種類あります。 CSS3のキーフレームアニメーションを使用しているため、モダンブラウザでご覧ください、IEは10で。 まずは、
[CSS]モーダルウインドウをシンプルな操作とアニメーションでどれだけかっこよく表示できるかのデモ
トリガーはシンプルなクリック操作、そしてシンプルなアニメーションを使って、モーダルウインドウをいかにかっこよく表示するかのデモンストレーションを紹介します。 NIFTY MODAL WINDOW EFFECTS デモはCSS3アニメーションを使用しているので、Chrome, Safari, Firefox, Operaなどのモダンブラウザでご覧ください。 モーダルウインドウのエフェクト19種類 アニメーションgifにして紹介しようと思ったけど、ちょっと重すぎるので断念。 どれもかっこいいのですが、オススメは下記でしょうか。 Fade in & Scale フェードで拡大しながら表示 Fall 縮小しながら集まるように表示 Sticky Up 上から張り付くように表示 3D Flip(Horizontal) 水平にくるっと回転して表示 Just Me 全画面に表示 Slit 真ん中に筋をいれ
lainとは何だったのか読めば分かる詳細解説ムック「visual experiments lain」
1998年に放送されて今もカルト的な人気を誇り、名作アニメをラインナップしたときに必ず誰かが1度は名前を出す作品が「serial experiments lain」。その作品の詳細データや、内容についての理解を助けるスタッフの“lain観”などを収録したビジュアルムック「visual experiments lain」が長い時を経て復刊したので、購入してみました。 『visual experiments lain ／ ビジュアルエクスペリメンツ レイン（）』 販売ページ http://www.fukkan.com/fk/CartSearchDetail?i_no=68321439 「伝説のアニメ『lain』、唯一の公式ガイド本――ついに復刊!!」と帯に大書されている通り、長らく絶版となっていた書籍です。 背表紙はクマ。復刊にあたってはオリジナル書籍を作ったときの印刷フィルムを発掘してきて使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Prott - Prototyping tool for Web iOS Android apps
IDEA * IDEA
https://ameblo.jp/ca-1pixel/entry-11497184837.html