当ブログでは、ぼくが実際のWebサイト制作案件で使用したコーディングのサンプルコードやコーディングで頻繁に使う機会が多いと思われるアニメーションなどの記事を100記事以上公開しています。
この記事ではそれらを探しやすいようにお悩みごとにまとめました。
コピペしただけで、とりあえず完成するものばかりですのでぜひ、参考にして下さいまし!
CSS/jQueryアニメーション
CSSアニメーションもしくはjQueryを使用したアニメーションの実装で役立つ記事はこちらです。
要素をスライドインで表示させる方法
【CSS アニメーション】要素をスライドインで表示させる方法Twitterのいいねボタンのエフェクトを再現する方法
可視範囲に入ったら下線を引く方法
ホバーしたら左から右へ下線を引く方法
可視範囲に入ったら画像を黒いマスクと一緒に左から表示させる方法
ライブラリ「AOS」でスクロールアニメーションを実装する方法
要素を遅延表示させる方法
上から下に動き続ける円を作る方法
ボタン
ボタンの実装で役立つ記事はこちらです。
アコーディオン
アコーディオンのコーディングで役立つ記事はこちらです。
アイコンも切り替わるアコーディオンを作る方法
Vueでシンプルなアコーディオンを作る方法
タブメニュー
タブメニューのコーディングで役立つ記事はこちらです。
Vueでタブ切り替えを作る方法
スライドショー
スライドショーのコーディングで役立つ記事はこちらです。
Swiperでサムネイル付きスライドショーを作る方法
Vegas2で背景画像をスライドショーにする方法
モーダル
モーダルのコーディングもしくはモーダル・オーバーレイ周りで役立つ記事はこちらです。
シンプルなモーダルを作る方法
プログレスバー
プログレスバー(進捗バー)のコーディングで役立つ記事はこちらです。
申し込み画面で使われる円形のプログレスバーを作る方法
三角形
三角形のコーディングで役立つ記事はこちらです。
左上・右上・右下・左下自由自在に三角形を配置する方法
SVGで三角形を作って影をつける方法
吹き出し三角形を長方形の右側につける方法
画像やiframeの縦横比
画像やiframeの縦横比を調整するときのコーディングで役立つ記事はこちらです。
画像の縦横比率を自由自在に維持する方法
Google Mapの縦横比を調整してレスポンシブ対応する方法
パンくずリスト
パンくずリストのコーディングで役立つ記事はこちらです。
最もシンプルなパンくずリストの作り方
マーカー
マーカー(蛍光ペン風装飾)のコーディングで役立つ記事はこちらです。
複数行に渡って綺麗にマーカーを引く方法
平行四辺形のマーカーを引く方法
フッター
フッターのコーディングもしくはフッター周りで役立つ記事はこちらです。
フッター固定メニューを作る方法
3カラムのフッターを作る方法
フッターを最下部に固定する方法
フッター手前で止まるボタンを作る方法
ロゴ、メニュー、コピーライトで構成されたシンプルなフッターを作る方法