cssanimationをつかってポートフォリオサイトを作る②

こんにちは、くりちゃんと言います。

前回の記事の続きです。↓

ひとまずver1として完成しました～。やった～。

こだわったところはアニメーションです。見る人をワクワクさせるようなサイトにすることを心掛けました。

特にクリックして別ページに遷移する際の表現はこだわりました。普通のサイトだとリンクから遷移した際に画面が一瞬白くなるサイトが多いと思います。遷移した際のアニメーションまで作りこむことによってそのサイトの世界観を表現できるのかなと思います。

コードについて、少しだけ書きたいと思います。

今回作ったポートフォリオサイトはPCで見ると、立体的な表現になっていると思います。

この表現はtilt.jsを使用しました。htmlに少しコードを加えるだけで簡単に立体的な表現ができます。とても素晴らしいライブラリですね。

画面遷移する際のアニメーションですが、今回自分が作ったポートフォリオはリンクさせないで、クリックしたら、.xxx_hideのクラスをつけてアニメーションを発火させて別ページに遷移したような表現をさせています。

例えばworksをクリックした時に、.worksに.works-activeのクラスをつけて、そのコンテンツをフェードインさせる。同時に.animation01_hiddenに.activeを加えて、アニメーションが終わるアニメーションを発火させる。みたいな感じです。

一つのhtmlページに全ページの内容が書かれていて、普段は見えないようにしているコンテンツをクリックしてクラスがついたら見えるようにさせています。

ひとまずver1として完成しました。

ver2では、ロードアニメーションを作ろうと思います。

また、今のままの一つのhtmlページに全部書くと、ページを読み込んだ際に全部のコンテンツを読み込んでしまうので良くないんですね。やっぱり別ページに遷移させてアニメーションもスムーズに繋げるやり方にしようと思います。

あとは終了したアニメーションは不要なDOMとして残ってしまう(特に繰り返し処理しているようなアニメーションは削除した方が良い)ので、それをremove()削除するのを忘れていたので、これもやらないとですね。

あと、コンテンツをもっと充実した内容に!（笑）

やることたくさんですね。ではまた来月かな。お楽しみ～。

cssanimationをつかってポートフォリオを作る②