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期】事前学習期間まとめ

ノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 iSara応募から合格、日本での約1ヶ月の事前学習期間を振り返ってみたいと思います。 TOTO 心はいつだってシンプル …

【iSara5期/Day 3】仕事の探し方

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 3からはiSaraの本質である「営業」についての講義が本格的に始まります。 担当講師:ケースケ(@ …

【iSara5期/Day 4】見積もり・価格表の作り方

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 4-2コマ目は「見積もり・価格表の作り方」です。 担当講師:ケースケ(@Keisukexlife) …

【初案件ゲット!】ココナラでLP作って1000円稼いだ話

TOTO 初案件の納品が完了したのでシェアします! GIGLIO ドキドキ、ワクワク ポートフォリオサイトができたら 次は今までの勉強をお金に換えるフェーズです。 ちょっと変わった方法で初案件を受注し …

【iSara5期/Day 2】はにわまんのWordPress講座 「準備編」と「テーマ作成編」

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 2より本格的に講義が始まります。 前期では事前学習の一環だった「WordPress」が5期では「現 …

プロフィール

HEBOCHANS

いつも犬と一緒にいるために
プログラミングを右手に、
ブログを左手に。

爆遅でも止まらない36歳ミニマリストが
フリーランスを目指す全記録。

TwitterのFollowボタン

Twitterのタイムライン