最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。
しかしhtmlには弱点があります。
それは 「専門知識が必要になる」 ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
「CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ」という記事を参考に作っていこうと思います。
では、ここから役に立ちそうなアニメーションを紹介していこうと思います。
役に立つアニメーション
delet(削除)
See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.
「この記事を消しますか？」
「本当に？」
みたいな場面で使うといいかもしれません。
ナビゲーションのアイテムをスライドで表示
See the Pen CSS Fly-out menu by Ian Lunn (@IanLunn) on CodePen.
アニメーション付きなので滑らかです。
カーテンから出現
See the Pen Curtains by @TimLamber (@TimLamber) on CodePen.
サイトの冒頭の演出にいいかもしれません。
グラデーションナビゲーション
See the Pen Transparent Fading Navigation Bar by MrPirrera (@pirrera) on CodePen.
落ち着いています。
操作しているのが人間かパズルで確認する
See the Pen Puzzle Piece Human Identifier by Tim Samoff (@ProfessorSamoff) on CodePen.
右のやつをホールドしたまま左に移動させます。
サイト読み込み時に位置を変えると効果はかなり高いですね。
気に入った!!
クリックしたくなってしまう...
マウスがa要素に当たっているときの効果
See the Pen Cool CSS3 Link Ideas by Brenden Palmer (@brenden) on CodePen.
クリックしたくなる。
エコグリーンをテーマにしたボタン
See the Pen Nature-Themed Buttons by Nick Ciliak (@nickcil) on CodePen.
これもクリックしたくなる。
画像にマウスが当たるとテキストが出てくる
See the Pen "Stupid" Case Study Hover by Eric Grucza (@egrucza) on CodePen.
カーソルをあわせたらタイトルが出てくる演出です。
クリックさせたいときに使うといいかもしれません。