50 프로젝트 - 2

심민기·2022년 5월 5일
0

웹 개발

목록 보기
31/33

물결치는 입력 효과.

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 * 순서의 딜레이를 가지므로 물결치는 이펙트가 구현된 것이다.

Css 속성 변화자.

<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;
  });
})();

비밀번호 생성기 -- 이해가 안되는 부분 있음.

ASCII 코드 시트

글자 읽어 주기

speech API사용.

드래그 앤 드롭 -- 이해 안됨.

drag Api 사용.

동물 카드 게임.

profile
왕초보

0개의 댓글