あいさつ ほんとはミライアカリになりきって、記事書きたかったんですが怒られそうだったんでやめます ↓ ニートに教わっても面白くないと思うので、僕のことを美少女だと思い込んで講座を受けてください。 はい。改めまして。 ハロー、yuki540だよ！ﾋﾟﾛﾘﾝ 結構、需要があったみたいなので今回から僕が今まで作ったcss animation作品の演出パターンを解説していくよ！ ホントにやってることは単純でcssの初歩的な知識で再現できるものなので、みんななら10秒あれば理解できると思います！ この講座では、sassとかpugは使わず、あくまで素のhtml, cssを使っていきます。 それでは、早速やっていきまーしょう！ 今回のアニメーション 「ミライアカリに学ぶCSS Animation演出講座」として最初にこれを解説します pic.twitter.com/rgHKA0TWpy— yuki540

スクウェア・エニックスの公式サイト。ゲーム、コミック、アニメ、音楽、グッズ、カフェなどの最新情報をご紹介。オンラインショッピングも！

デザイン通りに実装するだけじゃない！フロントエンドエンジニアが考えるべきデザインのこと。〜アニメーションと印象〜 Webサイトのマークアップするとき、参考にするデザインはほとんどは静止画の状態ですよね。 しかしWebサイトは「見るだけ」ではなく「使うもの」ですので、実際には様々な「動き」や「状態」が存在します。 そんな動きや状態については都度デザイナーとエンジニアが一緒に検討していくのが理想ではあるのですが、それが難しいケースもあるでしょう。 そんな時には事細かにデザイナーに確認したりデザインデータを要求するのではなく、ある程度はエンジニアが意図を汲み取って実装することが必要ではないでしょうか。 今回はそんな「デザインに鋭いフロントエンドエンジニア」になるために、実装機会の多い「ホバーアニメーション」を例にしてフロントエンドエンジニアがどのように実装を決めていけばよいのかを考えてみたいと思

ここ数年でちょっとしたアニメーションはJSではなくCSSで実装するということが増えたと思いますが、それを手軽に実装したいときに便利なCSSアニメーションライブラリをまとめてみました。 いずれも必要なCSSを読み込んで要素に特定のclassを付与するだけと使い方も簡単で、デモもしっかり用意されているものばかりなので動きの確認も容易です。 また、簡単な操作でCSSアニメーションを実装するのに必要なコードを出力してくれる便利なジェネレータも併せて紹介します。 Animate.css 共通classである.animatedと各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass（.infinite）も用意されています。 76アニメーション用意されており、ライセンスはMITです。 cssanimation.io 基本的には共通classである.cssanima

イントロダクション 京都を舞台に描かれる、ちょっと風変わりなベストセラー青春恋愛小説が最高のキャスト＆スタッフでアニメーション映画化！ 第20回山本周五郎賞受賞、並びに2007年本屋大賞2位に選ばれ、累計売上１２0万部を超えるベストセラー、森見登美彦著作の『夜は短し歩けよ乙女』(角川文庫刊)のアニメーション映画化が決定！京都を舞台に描かれる、どこかファンタジックな青春恋愛物語である本作は、大学生が選ぶ本第1位に選ばれ続けるなど、森見登美彦作品の中でも最もファンの多い作品の一つで、満を持しての初映像化。２０１７年４月７日（金）に全国公開となる。 主人公“先輩”のボイスキャストには、社会現象となったTBS系火曜ドラマ『逃げるは恥だが役に立つ』など役者としての活動の他、シンガーソングライター、文筆家と様々な分野で活躍する、今最も注目の集まる星野源を起用。アニメ声優として単独初主演の星野は、“黒髪

※ Newsタグを作ってみました。シンプルにリンクを紹介する時等にどうぞ。 CSS3で作った格好いいスクロールエフェクトのデモ。 CSS Scroll Effects ソースコードはこちら hakimel/Scroll-Effects main.css Flip (CSS 3D) とかお気に入り(79行目 辺り？)。 ベンダープレフィックスをつらつらと並べながらcss3D関連の機能を設定している、のかな？ /** * Flip styles */ .flip { -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-pers

TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS

HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。 HTML5 Canvasを利用した簡易的な冷気の演出 最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。 社内でもそうした簡単にできる（けど簡単そうに見えない）簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。 ※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。 さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code) 今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。 当初は

ページやコンテンツのローディング時によく使われる、アニメーションが気持ちよく、デザインもかわいいCSSで実装されたスピナーを紹介します。 実装はdivひとつのミニマルなHTMLで、とっても簡単です。

はじめに マテリアルデザインという言葉は知っていましたが、それが一体なんなのかを正しく理解しないまま、 「これからは、マテリアルデザインだぜ」のような顔して、生活していましたが、 知ったかぶりしているのがバレる前に、少し学んでおこうと思いました。 マテリアルデザインとは 2014年にGoogleが発表した「デザインのガイドライン」。 直訳すると「物質デザイン」。 マテリアルデザインの目的 スマートフォン、タブレット、テレビ、メガネ、腕時計などのデバイスで、 統一されたデザインを取り入れることにより、操作性も統一され デバイスが変わっても使いやすいUIを実現できるとか。 現実世界のルール(奥行きや、影など、質量)を取り入れることで、直感的な操作を実現します。 マテリアルデザイン誕生までの歴史 1.スキューモフィズムでのデザイン スキューモフィズムとは スキューモーフィズム（skeuomorp

A little exploration I did for the Tool website (http://toolofna.com/). 12 buttons with a unique rollover effect each using only CSS. Most work on most...