Webデザイン学科1年生のオンラインでの進級作品展示です。【期間限定:2021年2月4日(木)〜 2月10日(水) 2月12日(金)】※延長しました。

03. CAFーCSSアニメーションフレームワーク

作品概要 #

日頃ゲームサイトやアニメのサイトを見ていて面白いアニメーションがされていたり、会社のWebサイトでもきれいなアニメーションを見たときにどのように出来ているのか、自分でも作ってみたいと常日頃、少し興味を持っていたので作ろうと思いました。
ただ単にアニメーションを作って表示するのだけではシンプルかなと思い、丁度少し触れていたフレームワークを自分なりに作ってみるのは勉強になるし、今後にも活用することができると思ったので制作しました。 制作目的としては、今回行ったことをこれからの作品制作やポートフォリオに活用していき就職活動に役立てたいというのが主な制作目的です。

プレゼンテーション動画 #

アピールポイント #

アピールポイントは、cssアニメーションフレームワークを制作したので、アニメーションを、色々なものを参考にして自分なりに最初は分からないことだらけでどのようにすればプロの方がされているようなアニメーションなるのかそこに近づけるのかをアレンジしながら作りました。cssフレームワークの有名なものほど多くの数は作れませんでしたが、見てほしいです。cssアニメーションフレームワークを紹介するページもどのように表示すればいいか自分なりに考えて他のフレームワークを載せているサイトも参考にしながら作ったのでそこを見てほしいです。

スライド #

制作者 #

  • 浅尾 英士
  • フロントエンドエンジニア志望
  • HTML+CSS、JavaScript

制作者感想 #

HTML+CSSの授業でちょっとしたアニメーションはやったことがあったが、ゲームサイトやアニメサイトで見るようなアニメーションはやったことがなかったので、最初はまずCSSで作るにはどのようなプロパティで作るのかを調べるところから入りそこから自分でカスタマイズして作るところが難しく、中々自分が思い描いていたようなアニメーションは作れませんでした。
フレームワークも授業で少し触れた程度だったのでどのようにして作られているか分からなかったが、実際作ってみてcssフレームワークの有名なものを見たときに細かい所まで作り込んでいるのがよくわかり勉強になった。

コメント #

作品ならびにプレゼン動画の閲覧ありがとうございました。
さらに学生作品への評価・アドバイス、感想などコメントいただけると、今後の制作、就職活動の励みになります。よろしくお願いいたします。