【HTML&CSS】課題2③疑似要素でアニメーションを付ける

2020 8/23

2020.07.04 2020.08.23

今回も疑似要素の使い方と、あとはjQueryでアニメーションを付け方を学びました。

こちらの記事の続きになります。

疑似要素の復習

メインカラムの奇数・偶数だけ背景に色を付ける

サイトでよくある、メインカラムの背景に交互に色を付けるときのやり方です。

【CSS】
.section:nth-child(〇n) {
　background-color: #f1f1f1;
}

なぜnth-childを使うのか？
カラムの情報が前後しても背景色の構成を変えないため。
ちなみに、〇に入れる数が2nなら偶数、2n＋1＝奇数のセクションに背景を入れられる。3n、4n…とnの前後を変えても可能。

※次のような書き方でも可能。
.section:nth-child(odd) =奇数
.section:nth-child(even) =偶数

疑似要素の使い方（参考）

要素の1つだけに色を付ける

2番目のリンクナビを赤くしたいときのやり方です。

<nav class=”gNav”>
　<ul class=”gNav_list”>
　　<li class=”gNav_item”>
　　　<a href=”#anc-work” class=”gNav_link”>Work</a>
　　</li>
　　<li class=”gNav_item”>
　　　<a href=”#anc-work” class=”gNav_link”>About</a>
　　</li>
　　<li class=”gNav_item”>
　　　<a href=”#anc-work” class=”gNav_link”>Contact</a>
　　</li>
　</ul>
</nav>

【CSS】
.gNav_item:nth-child(2) .gNav_link {
　color: red;
}

NG例）gNav_itemすべてが赤くなる
.gNav_item:first-child　 {
　color: red;
}

ボーダー線の重なりを調整する

ここでやったグローバルナビの線が重なってしまう問題について。
前回は border-right: 0; と last-child を使った。

アニメーションを付ける

テキストの中心から下線が出るアニメーション

疑似要素のブロックを作って、マウスオーバーでテキストの中心から下線が出るようにします。

以下の条件で考えてみます。
①マウスが乗ったら
②棒が下に出てくる
③幅を0から100に
④0.5秒かけて

【CSS】
.gNav_item {
　display: block;
　padding: 1em 2em;
　color: #333;
　position: relative;
}

.gNav_link::before {
　content: “”;
　display: block;
　width: 0%;　←マウスオーバー時以外は下線が出ない
　height: 0.2em;
　background-color: #333;
　position: absolute;
　left: 0;
　bottom: 0;
　transform: translateX(-50%);　←※下線が出る開始位置を中央にする
　transition: 0.5s;
}

.gNav_item:hover::before {
　width: 100%;　←ホバーしたら下線が出る
}
※「:」の左右にスペース空けない
※afterでもいい

画像が上がって影ができるアニメーション

3つの画像が並んでいるときに、マウスオーバーした画像だけが上に上がる＆ボックスシャドウができるアニメーションを作ります。

【HTML】
<a href=”image/work/bannar.jpg” data-modaal-desc=”温泉旅館バナー” data-group=”js-workGallery” class=”card_link js-galleryImage”>
　<img class=”card_image” src=”image/work/bannar.jpg” alt=”” />
</a>

.card_link {
　display: block;
　transition: 0.3s;
　position: relative;
}

①か②の方法でマウスオーバーしたときに上がって影ができるようにします。

①一番簡単な方法（ここ追加のみ）負荷が軽くてすっと動く
.card_link:hover {
　transform: translateY(-2%);
　box-shadow: 0px 10px 20px rgb(0, 0, 0, 0.1);
}

②余白を縮めるやり方（ただしpaddingでは不可能）
.card_link:hover {
　box-shadow: 0px 10px 20px rgb(0, 0, 0, 0.1);
　margin-top: -5px;
}

ページトップに戻るボタン

疑似要素で赤点線枠のボタンを作ったら、jQueryのコードを入れます。このボタンを押すとスクロールで下に行っていても一番上の画面表示に戻ります。

【HTML】
<script src=”https://code.jquery.com/jquery-3.5.1.min.js” integrity=”sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=” crossorigin=”anonymous”></script>

【script.js】Javascript
$(function () {
　// #にダブルクォーテーションが必要
　$(‘a[href^=”#”]’).on(“click”, function () {
　　　let speed = 400;　/*←★アニメーションの速さ、1000=1秒*/
　　　let href = $(this).attr(“href”);
　　　let target = $(href == “#” || href == “” ? ‘html’ : href);
　　　let position = target.offset().top;
　　　$(‘body,html’).animate({
　　　　scrollTop: position
　　　}, speed, ‘swing’);
　　return false;
　});
});