WEB制作

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

投稿日:2018年12月30日 更新日:

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

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

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

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

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

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

ローディング画面の実装

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

jQuery使用。

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

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

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

CSSのみ使用。

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

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

JavaScript使用。

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

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

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

CSSのみ使用。

グラデーションの実装

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

CSSのみ使用。

スクロールフェードイン

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

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

JavaScript/jQuery使用。

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

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

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

CSSのみ使用。

海外のテーブルデザイン

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



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

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

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

CSSのみ使用。

縦書きの実装

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

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

CSSのみ使用。

縦書きのレイアウト

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

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

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

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

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

JavaScript使用。

画像の下をカーブさせる

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

CSSのみ使用。

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

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

CSSのみ使用。

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

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

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

CSSのみ使用。

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

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

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

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

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

TOPへ戻るボタンの実装

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

JavaScript[jQuery]使用。

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

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

jQuery使用。

おわり

プロフィール

今回は以上です。

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

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

合わせて読んでね↓

【初心者向け】ポートフォリオサイト制作の完全ロードマップ!

-WEB制作
-, , , , , , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

【iSara5期/Day 3】SNS講座

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 3-2コマ目はSNS講座(主にTwitter)です。 担当講師:ケースケ(@Keisukexlif …

【iSara5期/Day 14】はにわまんの「爆速コーディングのコツ」

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 14-1コマ目は「爆速コーディングのコツ」です。 担当講師:はにわまん(@haniwa008)さん …

【iSara5期/Day 9】SEO内部対策と付加価値

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 9-1コマ目は「SEO内部対策と付加価値」です。 内部対策は超カンタンでも付加価値になります。(2 …

【iSara5期/Day 4】クラウドソーシング講座

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 4-1コマ目はクラウドソーシング講座です。 担当講師:ちづみ(@098ra0209)さん ちづみさ …

【iSara5期/Day 8】はにわまんの「技術ブログから仕事を獲る方法」

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 8-1コマ目は「技術ブログから仕事を獲る方法」です。 テーマは受け身の営業術です。 担当講師:はに …