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

ポートフォリオ

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

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

8月17日のポートフォリオサイトの進捗具合

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

Myportfoliosite kuri-chan
motion-prot | Myportfoliosite kuri-chan

こだわったところ

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

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

コードについて少しだけ

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

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

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

Tilt.js - Parallax tilt effect for jQuery
Tilt.js, a small easy to use parallax hover tilt effect for jQuery.

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

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

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

まとめ

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました