【WEB制作】 マウスオーバー時の動き サラリーマン投資家のFIREへの旅路 第93夜
本日は、ポートフォリオサイトの続きをやります。
これをやることで、html , cssの学習中の方々に、
そんなに難しいことしなくても
いろいろできるって思ってもらえたら嬉しいっす！
【Concept ページ実装】
今日は、Conceptページの下層ページを作ります！
制作当初は、Aboutページとして進めていたのですが
下層ページを作成するにあたり、
Aboutって言ってもあんまり書くことないね。ってことで
Conceptページに変更しました！
ここは、ひとつ、
計画性がない ではなく
臨機応変と 言っておこう。。
今回の底スキルで見栄えよしポイントは
マウスオーバー時に、文字の色と、背景色をちょいじんわり変える
ふわっと要素が現れる方向を変える
キャッチコピーを ”それっぽく”
【マウスオーバーで色変更】
これは、動画を見ていただければすぐわかりますが、
Concept のところの、「Web Design For Your Business」の
グレーの四角にマウスオーバーすると、
文字色が、白からベージュ系に
背景色が、グレーから白に変わる
というコードです、
まず、HTMLで
「Web Design For Your Business」の文字を
aタグの中に書いています。 ↓
HTML
<!--Concept---------------------------------------------->
<section class="concept">
<h1 class="scrollReveal concept-title">Concept</h1>
<div class="concept-container scrollReveal-title">
<p class="concept-container-p scrollReveal-delay">
<a href="concept.html">
W e b D e s i g n <br>
F o r <br>
Y o u r <br>
B u s i n e s s <br>
</a>
</p>
<img src="img/about-img.jpg" alt="about-img" >
</div>
</section >SCSS
/*Concept ---------------------------------------------*/
.concept{
width: 100%;
padding-top: 100px;
padding-bottom: 220px;
margin-top: 700px;
background-color: rgba($color: #928080, $alpha: .9);
.concept-title{
width: 100px;
transition: .5s;
margin-left: 5%;
padding: 0 0 0 0;
color: white;
}
.concept-container{
position: relative;
padding-top: 200px;
width: 100%;
margin: 100px auto;
text-align: right;
img{
width: 80%;
height: 700px;
}
.concept-container-p{
position: absolute;
top: 45%;
left: 15%;
text-align: left;
width: 45%;
font-size: 1.6em;
letter-spacing: .5em;
line-height: 2.2em;
overflow-wrap: break-word;
font-family: monospace;
font-weight: bold;
a{
display: block;
width: 85%;
text-decoration: none;
color: white;
background-color: rgba($color: #3f3f3f, $alpha: .6);
padding: 3% 0% 2% 7%;
transition: .5s;
&:hover{
background-color: rgba($color: $lightTextColor, $alpha: 1);
color: $conceptColor;
transition: .5s;
}
}
}
}
}
.concept-title.fixed{
position: fixed;
color: white;
z-index: 1000;
padding: 2% 2% 0 3%;
background-color: #6588a8;
}
.concept-title.fadeOut{
position: fixed;
padding: 0 ;
color: rgba($color: #ada2a2, $alpha: 0);
}
↑ そして、SCSSで
「aタグ」の中(入れ子)に 「&:hover」と書いています。
これがつまり、
aタグで囲まれた、要素の上にマウスオーバーしたらという意味。
マウスオーバーしたら
その後の{ } 内の内容が実行される訳です。
詳しく見ると・・
a{
display: block;
width: 85%;
text-decoration: none;
color: white; ⇦（文字色 白）
background-color: rgba($color: #3f3f3f, $alpha: .6); ⇦（背景色 グレー）
padding: 3% 0% 2% 7%;
transition: .5s; ⇦（変化の速度0.5秒)
&:hover{
background-color: rgba($color: $lightTextColor, $alpha: 1); ⇦（背景色 白）
color: $conceptColor; ⇦（文字色 ベージュ系）
transition: .5s; ⇦（変化の速度0.5秒)
}
}
※ 色の指定で、「＄conceptColor」とかなっているのやるは、SCSSの便利機能で、自分で色の名前を決めて、この名前の色は、この色を設定できるやつです。色の設定時に呼び出せて、後で色を変えたくなった時に、全てのコードを変更しなくても、$conceptColor : red ; とかいう形で、書き換えれば、全ての箇所で色の変更が行えるというやつです！
というわけで、ポイントは、
aタグの中で設定されている、
color
background-color
の中身が、
&:hoverの中では、違う色が指定されています。
これにより、マウスオーバー時だけ、色が変わる
というCSSが効きます！
で、その変化の速度を
transition で制御しています。「 .5 」っていうのは0.5秒です。
これにより、ふわっと、色が変わるように見えます！
この時間が、長すぎてもうざいし、短すぎてもあんまりなので、
色々試してベターを見つけましょう！！
【ポイント】
今回は、色の変化を扱いましたが、
背景色と、文字色を同時に、変えることで
オシャレ感でません？笑
僕の感覚がズレていたらこの話は、全てぶっ飛びますが！！
共感してくれる方が、数名でもおられることを祈ります。
【復習】
今回も多用した、ふんわり表示のscrollReveal.js
これは、こちらの記事を見てみてね！！
これを応用して、要素が出てくる位置を調整しています！
では、また
引き続き進めていきますー！
最後まで見てくれてありがとう♪