初めに
今回の頭骨は、…「投稿」は、前回書かせて頂いた
HTML & CSS & JavaScript でwebページに雪を降らせましょう！（寒いです）
という記事の、Part_2です！
書く予定ゼロでしたが、書いていきましょう！
今回は、背景を写真にしたり、前回説明不足なとこなどの説明を（私なりに）しっかりとやっていきたいと思います！
それでは生きましょう！…行きましょう！
書いていこう！
それでは、書いていきます。
が、
今回は、CSS（スタイルシート）をいじくるだけです！
大変ご不便をおかけしますが、HTML及びJavaScriptにつきましては、初めに記載させていただいたリンクから見てみてください。
それではやってきます！
まず、前回のCSS（コメント無し）
* {
margin: 0;
padding: 0;
}
.snow-container {
width: 100%;
height: 100vh;
background-color: black;
position: relative;
overflow: hidden;
}
.title {
color: snow;
font-size: 4.8em;
text-shadow: 2px 3px 7px;
position: absolute;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
}
.snow {
background-color: snow;
border-radius: 50%;
position: absolute;
animation: snowFall 10s linear;
}
@keyframes snowFall {
0% {
opacity: 0;
top: 0;
}
10% {
opacity: 1;
transform: translateX(5px);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-5px);
}
90% {
opacity: 1;
transform: translateX(-5px);
}
100% {
opacity: 0;
top: 100vh;
}
}
これを元に、背景を画像にしていきたいと思います！
画像探します～♪
見つけました～♪
今回は、これ を使って行きましょう！
さっそく、コードです、解説はコメントと、後でちょっとやります！
* {
margin: 0;
padding: 0;
}
.snow-container {
width: 100%;
height: 100vh;
/* 背景画像の設定 */
background-image: url("https://raw.githubusercontent.com/Shin-sibainu/snow-animation-website/main/images/snowfall.jpg");
/* 背景画像をこの要素いっぱいに表示 */
background-size: cover;
position: relative;
overflow: hidden;
}
/* 背景を薄暗くするために、snow-containerの疑似要素を作成 */
.snow-container::after {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
/* ここまでで、snow-containerの上にピッタリ重なるようになりました！ */
content: "";
background-color: black;
opacity: 0.6;
/* 背景色を黒に、不透明度を0.6にして、薄暗い感じにさせます */
}
/*
しかし、この様にすると、雪やタイトルも薄暗くなります。
よって、要素の重なりの順をz-indexで調整し、雪とタイトルを全面に持ってきます
*/
.title {
color: snow;
font-size: 4.8em;
text-shadow: 2px 3px 7px;
position: absolute;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
/* これで、前面に */
z-index: 2;
}
.snow {
background-color: snow;
border-radius: 50%;
position: absolute;
animation: snowFall 10s linear;
/* これで、前面に */
z-index: 2;
}
@keyframes snowFall {
0% {
opacity: 0;
top: 0;
}
10% {
opacity: 1;
transform: translateX(5px);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-5px);
}
90% {
opacity: 1;
transform: translateX(-5px);
}
100% {
opacity: 0;
top: 100vh;
}
}
結果として、次のようになります！
そうなっていればおＫです！
お疲れ様でした！
コード解説（ぽいやつ）
* {
margin: 0;
padding: 0;
}
前回のやつでもちょこっと解説させて頂きましたが、こうすることで、デフォルトで設定されている余白をなくすことができます。
-- 余白あり
See the Pen Untitled by chi1180 (@chi1180) on CodePen.
-- 余白なし
See the Pen Untitled by chi1180 (@chi1180) on CodePen.
/* 背景画像の設定 */
background-image: url("https://raw.githubusercontent.com/Shin-sibainu/snow-animation-website/main/images/snowfall.jpg");
/* 背景画像をこの要素いっぱいに表示 */
background-size: cover;
background-imageではurl()に画像のurlを入れています。
そして、その画像をcover()でページいっぱいに表示しています！
-- coverなし
See the Pen Untitled by chi1180 (@chi1180) on CodePen.
なんのこちゃという感じですね(笑)
-- coverあり
See the Pen Untitled by chi1180 (@chi1180) on CodePen.
あ～♪
coverはすばらしいっ♪
overflow: hidden;
これにより、雪がsnow-containerをはみ出しても画像がぶれたりしません！
-- overflow: hidden;なし
See the Pen Untitled by chi1180 (@chi1180) on CodePen.
これではあまり気づけませんが、下のスクロールバーが出たり消えたり、長さが変わったりとかは気づけると思います。
実際にはページががぐがぐと動いてしまいます！
-- overflow: hidden;あり
See the Pen Untitled by chi1180 (@chi1180) on CodePen.
overflow:hidden;を記述することで、このように下のスクロールバーも出たりしませんし、実際のページでがぐがぐ動くといったようなこともありません！
最後に
まだ説明が不十分なところもあると思いますが、そこはググっていただくもしくはコメントして頂くとたいへんありがたいです∮
今回は初めてCodePenでのコードを埋め込むという作業をしてみました！
乾燥、…感想、ご意見、ご提案、ご注意、その他ありましたらば、是非ともコメントしていただけると幸いです！めちゃありがたいです！
今回は以上です∮
最後目で読んでくれてありがとう！！！