プログラミング

jQuery/CSSアニメーション15選【コピペでサイト制作】

2018年12月30日

TOTO
TOTO
ポートフォリオサイトが完成したので、参考にしたサイトをまとめてみました!
GIGLIO
GIGLIO
アニメーションだけじゃないけどね。

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

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

この記事はこんな人にオススメ

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

ローディング画面の実装

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

JavaScript使用。

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

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

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

CSSのみ使用。

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

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

JavaScript使用。

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

ホントは「何枚かのヘッダー画像が自動で切り替わるアレ」を実装するつもりで見てたのですが、ウチの犬が「ひょっこりはん」するのが偶然できたため即採用!となりました 笑

CSSのみ使用。

グラデーションの実装

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

CSSのみ使用。

スクロールフェードイン

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

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

JavaScript/jQuery使用。

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

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

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

CSSのみ使用。

海外のテーブルデザイン

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

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

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

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

CSSのみ使用。

縦書きの実装

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

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

CSSのみ使用。

縦書きのレイアウト

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

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

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

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

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

JavaScript使用。

» CSS 3D Carousel

画像の下をカーブさせる

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

CSSのみ使用。

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

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

CSSのみ使用。

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

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

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

CSSのみ使用。

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

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

が、セキュリティ対策をしないとスパムの発射台となってしまい最悪サーバーが潰れたり、相手(メール送信者)にも迷惑をかけてしまいます。

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

TOPへ戻るボタンの実装

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

JavaScript[jQuery]使用。

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

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

jQuery使用。

おわり

今回は以上です。

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

これを読んでいるあなたもぜひ試してみてください!

人気記事【30代後半+未経験】プログラミングで月100万稼ぐロードマップ

-プログラミング
-

テキストのコピーはできません。

© 2018 ONE PIECE THE BIBLE