css
/* Dynamic Element */
.form-control label span {
display: inline-block;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
min-width: 5px;
}
모든 요소를 0.3초 동안 큐빅-베지어로 이동시킨다.
js
map은 기능과 배열을 정하고. 배열의 인자들에 대해 기능을 실행한다. 그리고 기능이 적용된 아이템들에 대한 새로운 배열을 만든다.
labels.forEach(function (label) {
label.innerHTML = label.innerText
.split("")
.map(
(letter, index) =>
`<span style="transition-delay: ${index * 50}ms">${letter}</span>`
)
글자를 split으로 분해하여 한글자씩으로 만들고 순서대로 50초의 배수만큼, 이동 딜레이를 줘서 물결치는 효과를 줌.
.join("");
join으로 배열의 모든 요소 연결, 문자열 반환.
});
따라서 css의 이동이 각 문자에 대해 50 * 순서의 딜레이를 가지므로 물결치는 이펙트가 구현된 것이다.
<input type="range" id="size" min="0" max="2" step="0.1" />
step을 설정 함으로써 올라가는 단계를 설정.바를 올려도 0.1씩 상승함.
<div class="container">
<div id="block"></div>
</div>
을 자바스크립트로 제어해보자.
html
<section class="memory-game">
<!-- 1st Card -->
<div class="memory-card" data-name="baby-bear">
<img src="img/baby-bear.jpg" alt="animal" class="front-face" />
<img src="img/question-mark.jpg" alt="?" class="back-face" />
</div>
section 안에 이런 식으로 앞 뒷면의 이미지를 가지는 카드를 12개 생성.
CSS
.front-face,
.back-face {
height: 100%;
width: 100%;
position: absolute;
object-fit: cover;
/* 뒤집혔을때 앞뒷면이 서로 겹치지 않도록 한 면은 숨겨놓는다. */
backface-visibility: hidden;
}
.memory-card:active {
/* 카드를 누르면 크기가 조금 작아지며 눌리는 효과냄. */
transform: scale(0.97);
transition: transform 0.15s ease-out;
}
/* 카드를 180도 회전 turn은 단위. */
.front-face {
transform: rotateY(0.5turn);
}
3d 공간에서 회전하는 느낌을 주기 위해 perspective사용
/* Dynamic Class */
.memory-card.flip {
/* perspective 값이 작을수록화면과 가까이 있다는 뜻. 즉 변화가 커진다.*/
transform: rotateY(180deg) perspective(1000px);
}
JS
즉시 실행함수
함수가 정의된 직후 바로 실행.
함수 리터럴을 () 로 감싼 뒤 바로 실행하는 형태
(function () { console.log('Hello World') })();
다른데서 호출할 필요없이 바로 사용가능.
셔플을 할때 사용.
// IIFE -> Immediately Invoked Function Expression => 즉시 실행 함수 => 함수가 정의된 바로 직후에 실행.
(function shuffle() {
cards.forEach(function (card) {
let randomPositions = Math.floor(Math.random() * 12);
card.style.order = randomPositions;
});
})();
speech API사용.
drag Api 사용.