WEB制作

【コピペで実装】ポートフォリオサイトに使えるアニメーション15選

TOTO

ポートフォリオサイトが完成したので、
参考にしたサイトをまとめてみました!

GIGLIO

アニメーションだけじゃないけどな

まずは私のポートフォリオサイトをご覧いただけるとイメージしやすいと思います。

とにかく「カンタンに実装できて動きのあるサイトを作る」がコンセプトでした。

この記事は以下のような方にオススメです。

  • ポートフォリオサイトを作りたい。
  • 動きのあるWEBサイトを作りたい。
  • どこかで見たあの効果を使ってみたい。
  • けど自分で探すのメンドクサイ。

ローディング画面の実装

アクセスした時にロゴなんかが一瞬あらわれるアレです、ローディング画面って言うんですね。

jQuery使用。

ホバー時のアンダーラインアニメーション

ナビメニューにマウスをホバーするとアンダーラインがシャキーンと出ます。

ついついopacityで済ませてしまいがちですよね。

CSSのみ使用。

タイプライター風アニメーション

タイプライターでテキストを入力しているかのようなアニメーションもコピペでできちゃいます!

JavaScript使用。

ひょっこりはんアニメーション

ホントは「何枚かのヘッダー画像が自動で切り替わるアレ」を実装するつもりで見てたのですが、

ウチの犬が「ひょっこりはん」するのが偶然できたため即採用!となりました 笑

CSSのみ使用。

グラデーションの実装

私は画像の上にグラデーションを乗せましたが、そのまま背景色をグラデーションにするだけでもオシャレですよね。

CSSのみ使用。

スクロールフェードイン

スクロールに合わせて指定したコンテンツをふわっと表示させるアレです。

これだけでも動きが出てかっこよくなりますね。

JavaScript/jQuery使用。

おしゃれテーブルデザイン

テーブルってなんかダサいですよね?

徹底的にググってみました!

CSSのみ使用。

海外のテーブルデザイン

今回は使いませんでしたが、海外のテーブルデザインも試してみたいところです。

【決定版】CSSで実装できる綺麗なテーブルデザイン10選まとめ
Webデザインをする時に便利なのが、テーブルデザインです。CSSの工夫次第でページ全体を華やかにするような凝ったデザインにすることも可能です。そこで今回は、デザインの参考になりそうなテーブルデザインを集めてみました。

ホバー時にボタンがにょーん!

ボタンにマウスをホバーすると色が変わったり、サイズが変わったり。

こちらもついついopacityで済ませてしまいがちですよね。

CSSのみ使用。

縦書きの実装

個人的に一番苦労したのが縦書きのレイアウトです。

実装はカンタンですが、スマホでは横書きにしたかったので、切り換えが上手くいくようレイアウトを考え直したりしました。

CSSのみ使用。

縦書きのレイアウト

3Dカルーセル(スライドショー)

カルーセルはjQueryで実装するイメージですが、CSSのみで出来ます。

わかりやすく派手なので使ってみました。

3Dカルーセル(別バージョン)

さらっとコレに変えるかも。

JavaScript使用。

画像の下をカーブさせる

模写コーディングの定番 PAS-POL でも使われているアレです。

CSSのみ使用。

斜めにカットされた背景の実装

すでにレスポンシブ対応済みなのでありがたいですね。

CSSのみ使用。

お問い合わせフォーム(見た目)

まさにこんなエアメール風のフォームにしたかったので迷わずパクりました!笑

登録しないと最後まで読めません。

CSSのみ使用。

お問い合わせフォーム(中身)

お問い合わせフォームの実装は本当に難易度高いのですが、コレで出来ちゃいます。

が、セキュリティ対策をしないとスパムの発射台となってしまい最悪サーバーが潰れたり

相手(メール送信者)にも迷惑をかけてしまいます。

実装は自己責任でお願いします。

TOPへ戻るボタンの実装

スクロールすると右下に出現するTOPへ戻る矢印のやつです。

JavaScript[jQuery]使用。

ハンバーガーメニューアニメーション

スマホメニューでおなじみのハンバーガーメニューの実装とアニメーションです。

jQuery使用。

おわり

プロフィール

今回は以上です。

最後まで読んでいただき、ありがとうございました。

みなさんもぜひ試してみてください!