MENU

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

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

今回も疑似要素の使い方と、あとは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 を使った。

not(last-child)を使えば最後のお問い合わせの右のborder以外を消せる。

【CSS】
.gNav-item {
 border: 1px solid;
}
.gNav-item:not(last-child) {
 border-right: 0;
}

アニメーションを付ける

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

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

以下の条件で考えてみます。
①マウスが乗ったら
②棒が下に出てくる
③幅を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;
 });
});

モーダル機能

画像をクリックするとポップアップのようにアップで見えるやり方です。jQueryを使ったプラグイン、MODALを使います。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js” integrity=”sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=” crossorigin=”anonymous”></script> ←先ほど追加したjQuery
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css” />  ←★
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js”></script> ←★
<script src=”js/script.js”></script> ←Javascript

★:MODAALの位置はjQueryのプラグインなので、jQueryより必ず下に配置すること。

MODAAL(モーダル)って?
特定の要素をクリックすると、その要素が拡大して表示される仕掛け。
一般的には「ポップアップ」と呼ばれるが、Webではポップアップは別の機能を指すことが多いため、「モーダル」と呼ばれているとのこと。

ひとまず今日はここまでとなります。
疑似要素の使いこなしとjQuery、Javascript の理解が私も追い付いていなくて、今回は特にメモを写しただけの記事になってしまいました…。

この後コーディングの復習をして、もう少しわかりやすく書けるように勉強してきます!理解できたところを追記するようにします。がんばります!

ここまでお読みいただきありがとうございました◎

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる