[패스트캠퍼스] 웹퍼블리싱 강의 7주차 - 자바스크립트 응용예제(2)

 오늘도 이어서 국비지원교육 과정으로 이뤄지는 "웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인" 강의 중 자바스크립트와 SCSS을 통해 만드는 응용 예제를 다룰 것이다. 마우스의 움직임에 따라 배경이 동영상 재생되는거처럼 보이는 UI를 만드는 예제와 원형의 슬라이더 UI로 된 뮤직플레이어를 소개할 것이다. 각 예제의 핵심 포인트에 대해 소개하고 설명할 것이다. 

---

요약

1. 마우스 움직임에 따른 시퀀스 모션 UI
2. 인터렉티브 뮤직 플레이어

---

1. 마우스 움직임에 따른 시퀀스 모션 UI

마우스 움직임에 따른 시퀀스 모션

HTML

• 자바스크립트를 통해 태그를 생성하기 때문에 index.html 파일에는 큰 틀의 레이아웃만을 제작함.

 

JS

img 태그 만들기

for (let i = 0; i < 200; i++) {
  const imgNode = document.createElement("img");
  imgNode.setAttribute("src", `./img/pic${i}.jpg`);
  main.append(imgNode);
}

• 사진 개수만큼 for문 반복
• document.createElement("태그이름")을 통해 태그 생성
• setAttribute을 통해 속성을 추가
• 추가될요소의 부모요소.append(추가될 요소);

 

로딩화면 만들기

function imgLoaded() {
  const len = imgs.length;
  let total = 0;
  let percent = 0;

  imgs.forEach((img) => {
    // ?
    img.addEventListener("load", () => {
      total++;
      percent = parseInt((total / len) * 100);
      loading.innerText = `${total} / ${len} (${percent}%)`;

      if (total == len) {
        main.classList.add("on");
        loading.classList.add("off");

        setTimeout(() => {
          // ?
          loading.remove();
        }, convertSpeed(loading));
      }
    });
  });
}

• 사진의 총 개수를 로드가 완료된 사진으로 100% 단위로 변환
• 로딩이 완료되면 로딩화면은 보이지 않고 시퀀스 화면 출력
• loading.remove(); // loading 요소를 삭제

 

시퀀스 모션 만들기

window.addEventListener("mousemove", (e) => {
  let x = e.pageX;
  let y = e.pageY;
  let cx = -(x / 10)+50;
  let cy = -(y / 10)+25;

  logo.style.transform = `translate(${cx}px, ${cy}px)`;

  let wid = window.innerWidth;
  let percent = parseInt((x / wid) * 200);
  console.log("🚀 ~ file: main.js:69 ~ percent:", percent);

  for (let img of imgs) {
    img.style.display = "none";
    imgs[percent].style.display = "block";
  }
});

• 화면 가로 비율을 200%로 변환해서 각 위치의 퍼센트값 번째의 이미지만을 보이게 하는 원리

 

2. 인터렉티브 뮤직 플레이어

인터렉티브 뮤직 플레이어

CSS

• 시계방향: +degree, 반시계방향: -degree

transform("각도") 맞추는 팁

사용자가 원하는 기준을 "transform-origin"으로 맞춘 뒤,

"rotate(0deg)"를 주어 초기 위치를 확인하고 요소를 돌리고 싶은 방향을 정하고

반시계방향이면 음수값을, 시계방향이면 양수값을 주면 됨.

 

align-items과 align-content 차이점

 

• align-items는 수직축의 라인을 기준으로 아이템들이 정렬이 되고,
• align-content는 수직축의 라인을 기준으로 (두 줄 이상 일 때만) 라인 자체가 정렬이 된다

 

부모요소와 같은 색상의 그라데이션 그림자 효과 주는 방법

1. 부모요소에 원하는 backgroundImage를 넣는다.
2. ::before요소를 만들고 backgroundImage를 inherit하려 상속 받게 한다.
3. transform: translateY(10%) 값을 주어 약간 아래로 내린다.
4. translateY의 기준은 브라우저가 아닌 요소의 수직 방향이다.
5. filter 속성을 통해 블러 효과를 주어 그라데이션 효과를 준다.

 

JS

const names = ['Blizzards', 'Calm', 'Dusty_Road', 'Escape', 'Payday', 'Retreat', 'Seasonal', 'Vespers']

names.forEach((name, index)=>{
    pic.style.backgroundImage = `url(./img/${name}.jpg)`
})

• 미리 이미지와 동일한 이름을 가진 배열을 만든 뒤, 그것을 스크립트 코드를 통해 스타일링을 하는 기법
• 추가되는 요소가 있으면 배열값만 추가하면 되는 장점이 있다.

 

prev.addEventListener('click', ()=>{
    frame.style.transform = `rotate(${deg * ++num}deg)`;

    ((active === 0) ? active = len-1 : active--);
})

next.addEventListener('click', ()=>{
    frame.style.transform = `rotate(${deg * --num}deg)`;
    
    ((active === len-1) ? active = 0 : active++);
})

• 돌아가는 슬라이드를 rotate 속성을 통해 변화를 줌
• 각도값이기 때문에 어느 지점을 넘어도 num값을 초기화할 필요가 없음

 

play, pause, load

DOM(audio).play() // 재생
DOM(audio).pause() // 정지
DOM(audio).load() // 처음으로 되돌리기