์ง๊ธ๊น์ง ๋ง๋ค์ด์ง momentum์ ์๊ณ, To Do List์ ์ ์ฅ๊ณผ ์ญ์ , ์ฌ์ฉ์์ ์ด๋ฆ์ ์ ์ฅํ ์ ์๋ ๊ธฐ๋ฅ์ ๊ฐ๊ณ ์๋ค. chrome์ ์ฒซ ํ๋ฉด์ผ๋ก์ ํ์ํ ๊ฒ์ ๊ฐ์ถ์ด์ก๊ณ , ์ด์ ๋ ์ด ํ์ด์ง์ Background Image๋ฅผ ์ง์ ํ๋ ์ฐ์ต์ ํด๋ณด์๋ค. ์ด๋ฏธ์ง๋ค์ ์ถ์ฒ๋ Unflash๋ผ๋ ๋ฌด๋ฃ ์ด๋ฏธ์ง ๊ณต์ ์ฌ์ดํธ์ด๋ค.
์๋ก์ด ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค๋ฉด ์ต๊ด์ฒ๋ผ Divide! bg.js
๋ผ๋ ํ์ผ์ ์์ฑํด์ฃผ๊ณ , index.html์ <script src="bg.js"></script>
๋ฅผ ์์ฑํด์ค์ผ๋ก์ ํ๋์ ๊ธฐ๋ฅ์ ๋ ์ถ๊ฐํ๋ค.
javascript์ ์ ์ญ ๊ฐ์ฒด Math๋ ๋ค๋ฅธ javascript ์ ์ญ ๊ฐ์ฒด๋ค๊ณผ ๋ฌ๋ฆฌ ์์ฑ์๊ฐ ์๋๋ค. Math.PI
๊ฐ์ ๊ฐ์ฒด๋ค์ ์ ์ ์ผ๋ก ํํ๋๊ธฐ ๋๋ฌธ์ ์์๋ก์ ์ฌ์ฉํ ์ ์๋ ํน์ง์ด ์๋ค.
Background Image๋ฅผ ์ฌ๋ฌ์ฅ Image
ํด๋์ ์ ์ฅํ์ฌ, ํ์ผ๋ช
์ 1~9์ ์ซ์๋ก ์ง์ , ํ์ด์ง๊ฐ ์๋ก ๊ณ ์นจ ๋ ๋๋ง๋ค 1๋ถํฐ 9 ์ฌ์ด์ ๋์๋ฅผ ์์ฑํ๊ณ , ํด๋น ํ์ผ์ ๋ฐฐ๊ฒฝ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ์์ผ๋ก Background Image๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋๋ก ํ๊ฒ ๋ค.
๊ธฐ๋ฅ ๊ตฌํ์ ์ํด ํ์ํ ๋ฉ์๋ ์ค ์ฒซ๋ฒ์งธ๋ Math.random()
์ด๋ค. ํด๋น ๋ฉ์๋๋ 0๋ถํฐ 1๊น์ง์ ์ค์ ์ค์์ ํ๊ฐ์ง๋ฅผ return
ํ๋ ๋ฉ์๋์ด๋ค.
Math.floor()
์ ์ํ์์์ ๋ฒ๋ฆผ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ํ๋ ๋ฉ์๋๋ก, ์ค์๋ฅผ ์ธ์๋ก ํ์ฌ ๋ฒ๋ฆผ์ ํตํด ์ ์๊ฐ์ ๋ฐํํ๋ ๋ฉ์๋์ด๋ค.
const IMG_NUM = 9;
function genRandom() {
const number = Math.floor(Math.random() * IMG_NUM);
return number;
}
๋ฐ๋ผ์ ๋ค์๊ณผ ๊ฐ์ genRandom()
ํจ์๋ฅผ ๋ง๋ค์ด 0~8์ฌ์ด์ ์ ์๋ฅผ returnํ๋๋ก ํ๋ค.
์ดํ genRandom()
์ ํตํด ์์ฑ๋ randomnumber
๋ฅผ paintImage()
ํจ์์ ์ธ์๋ก ๋๊ฒจ์ฃผ๊ณ , paintImage()
๋ฅผ ํตํด Background Image๋ฅผ ์ค์ ํด์ฃผ์๋ค.
function paintImage(imgnumber) {
const image = new Image();
image.src = `images/${imgnumber+1}.jpg`;
image.classList.add("bgImage");
body.prepend(image);
}
paintImage()
์ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ๊ณ , prepend()
๋ฅผ ํตํด body
์ ์ถ๊ฐํด์ฃผ์๋ค. prepend()๋ Node ๊ฐ์ฒด ๋๋ DOMstring ๊ฐ์ฒด๋ฅผ ์ฒซ๋ฒ์งธ ์์ Node๋ก ์ฝ์
ํด์ฃผ๋ ๋ฉ์๋์ด๋ค. Image
๋ Element
์ด๋ฏ๋ก Node ๊ฐ์ฒด์ ํฌํจ๋๋ค.
paintImage()
์์ image.classList.add("bgImage")
๋ฅผ ํตํด class๋ฅผ ์ง์ ํด์ฃผ์๋๋ฐ, CSS๋ฅผ ํตํด image
์ ํน์ฑ์ ๋ค์๊ณผ ๊ฐ์ด ์ง์ ํด์ฃผ์๋ค.
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bgImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
animation: fadeIn 0.5s linear;
}
์๋์ ๋ด์ฉ์ ๊ทธ ์ค ๊ธฐ๋กํ ๋งํ ๋ด์ฉ๋ค์ ์ผ๋ถ์ด๋ค.
z-index๋ position์ด ์ง์ ๋ Element ์ฌ์ด์ z์ถ ๊ฐ์ ์ง์ ํ ์ ์๋ CSS ์์ฑ์ ๋งํ๋ค. ์ด z์ถ์ ์์์ ์ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๋งํ์๋ฉด 0์ด ๋ชจ๋ํฐ์ด๊ณ , ๊ฐ์ด ์์ผ๋ก ์ ์ ์ปค์ง์๋ก ๋์ ๋์ ๊ฐ๊น์์ง๊ณ , ์์๋ก ์ ์ ์์์ง๋ค๋ฉด ๋ชจ๋ํฐ ์์ผ๋ก ๊น์ด ๋ค์ด๊ฐ๋ค๊ณ ์ดํดํ๋ฉด ์ดํด๊ฐ ํธํ๋ค.
javascript์ ๋์ ์์ด๋ ๋์ ์ธ ํ์ด์ง๋ฅผ ๊ตฌํํ ์ ์๋๋ฐ, css์ animation์์ฑ์ด ๋ฐ๋ก ๊ทธ ์์ฑ์ด๋ค. animation
์ ๊ฐ fadeIn 0.5s linear
๋ ๊ฐ๊ฐ animation-name
animation-duration
animation-timing-function
์ ํด๋นํ๋ค.
@keyframes
๋ animation-name์ ์ํ๋ ์์ฑ์ ์ ์ธํ๋ ๊ท์น์ผ๋ก, ์ด ์ฝ๋์์๋ fadeIn
์ ๋ํ ์ธ๋ถ์ ์ธ ์ค์ ์ @keyframes
๋ฅผ ํตํด ์ ์ธํ๊ณ ์ฌ์ฉํ๋ค.
linear
๋ animation-timing-function์ ์ผ๋ถ๋ก, animation์ ๋ฑ์์ผ๋ก ์งํํ๋ค. ์ ํํ๋ cubic_bezier(0.0,0.0,1.0,1.0)
์ผ๋ก ์งํํ๊ณ , cubic bezier๋ ์ปดํจํฐ ๊ทธ๋ํฝ์์ ๊ณก์ ์ ๊ทธ๋ฆฌ๋ ๋ฐฉ์์ผ๋ก, cubic_bezier()
์ ๋ค ์ค์ ๊ฐ์
์์๋๋ก p0
,p1
,p2
,p3
์ ๊ฐ์ ์๋ฏธํ๊ณ , cubic_bezier(0.0,0.0,1.0,1.0)
๋
์ด๋ ๊ฒ ์๊ฒผ๊ธฐ ๋๋ฌธ์ animation
์ ์๊ฐ๋น ์งํ ์๋๊ฐ ์ผ์ ํ๋ค.