5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

第2弾! html & css & javascript で かっこいいサイト を 作る[アニメーション]

Last updated at Posted at 2022-08-18

前回この記事が私にとって絶好だったので2弾目を作りました。
是非、LGTMお願いします。


最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。

しかしhtmlには弱点があります。
それは 「専門知識が必要になる」 ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
動くwebデザインアイデア帳というサイトを参考に作っていこうと思います。

私が気に入ってるサイトです。

では、ここから役に立ちそうな背景のアニメーションを紹介していこうと思います。

役に立つ背景のアニメーション

スクロールするとヘッダー背景画像が拡大

See the Pen 6-7 スクロールするとヘッダー背景画像が拡大 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

サイトのホームの部分に背景で使うのがおすすめです

プログレスバー+数字カウントアップ

See the Pen 4-1-2プログレスバー+数字カウントアップ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

サイトのロード中に使うのがおすすめです。

波打つ(1 つ 重なりあり)

See the Pen 5-11 波打つ(1 つ 重なりあり) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

これも背景に使うといいですね。

ホタルが舞う

See the Pen 5-7 ホタルが舞う by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

サイトの夜の演出にいいかもしれません。
落ち着いています。

サンプルサイト(coco-factory.jp)

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?