TIL | 09/22/2022

블로그 이사 완료·2022년 9월 22일

오늘의 작업물

# 메인 아티클 / 브랜드 리스트 CSS

오늘은 조금 정신 없었다.

사진 상 맨 위에 퀵이미지 애니메이션부터 맨 아래 브랜드 리스트까지 CSS/Javascript 전부 코딩했다.

// 퀵메뉴 이미지
const quickSpan = document.querySelectorAll('.content1>ul>li>a>span');

// 중첩 for문을 사용해서 4개의 span에 변수로 각 이미지 20개씩 생성한다.
// span 4개 돌리는 forans
for (let i = 0; i < quickSpan.length; i++) {
  let images = '';

  // 각 span 안에 img 20개 생성 for문
  for (let j = 0; j < 20; j++) {
    if (j < 10) {
      images += `<img src="images/quick${i + 1}/quick0${i + 1}_0000${j}.png" />`;
    } else {
      images += `<img src="images/quick${i + 1}/quick0${i + 1}_000${j}.png" />`;
    }
  }
  quickSpan[i].innerHTML = images;
}

// 퀵메뉴 이미지 애니메이션
const quickList = document.querySelectorAll('.content1 > ul > li'); // 0,1,2,3

for (let i = 0; i < quickList.length; i++) {
  quickList[i].addEventListener('mouseover', (e) => {
    for (let k = 0; k < 20; k++) {
      let spanImg = e.currentTarget.children[0].children[0].children;
      spanImg[k].style.animation = `ani 1s linear ${0.05 * k}s 1`;
    }
  });
}
for (let i = 0; i < quickList.length; i++) {
  quickList[i].addEventListener('mouseout', (e) => {
    for (let k = 0; k < 20; k++) {
      let imgLi = e.currentTarget.children[0].children[0].children;
      imgLi[k].style.animation = 'none';
    }
  });
}

헤더에 있는 애니메이션과 동일한 방법으로 적용 시켰는데 다른 점은 하나, mouseout 됐을 때 animation='none'; 시켜 끝내는 것이다.

// circle 스크롤 이벤트
window.addEventListener('scroll', () => {
  let scroll = document.querySelector('html').scrollTop;
  // circle left 움직임
  const doughnut_left_l = document.querySelector('.doughnut_left_l');
  const doughnut_left_s = document.querySelector('.doughnut_left_s');
  const combine_left = document.querySelector('.combine_left');

  doughnut_left_s.style.top = `${scroll * 0.3}px`;
  doughnut_left_l.style.top = `${1310 - scroll * 0.8}px`;
  combine_left.style.top = `${scroll * 0.7}px`;

  // circle center 움직임
  const doughnut_center_m = document.querySelector('.doughnut_center_m');

  doughnut_center_m.style.top = `${1200 - scroll * 0.7}px`;

  // circle right 움직임
  const combine_right = document.querySelector('.combine_right');
  const doughnut_right_m = document.querySelector('.doughnut_right_m');

  combine_right.style.top = `${scroll * 0.7}px`;
  if (scroll * 0.7 >= 850) doughnut_right_m.style.top = `${scroll * 0.7}px`;
});

다음은 배경에 있는 원형 모양들의 움직임을 처리하는 것이였다.

윈도우가 스크롤 될 때마다 html 문서의 scrollTop 값을 가져와 해당 도형들의 top 값을 바꿔 같이 움직이도록 작성했다.

오른쪽의 right 구간은 다른 두개의 도형의 top값이 일치되면 같이 이동하도록 if문을 사용했다.

// content3
// 브랜드 li에 mouseover 시 모든 li에 .on을 지우고 mouseover한 li만 .on추가

const brandLi = document.querySelectorAll('.content3_inner>div>ul>li');

brandLi.forEach((item) => {
  item.addEventListener('mouseover', (e) => {
    e.preventDefault();
    e.currentTarget.classList.add('on');
  });
  item.addEventListener('mouseout', (e) => {
    e.preventDefault();
    e.currentTarget.classList.remove('on');
  });
});

맨 아래쪽의 브랜드들 리스트에 mouseover 되면 클래스 on 추가하고 mouseout 되면 삭제하는 간단한 Javascript코드였다.
클래스를 추가하고 삭제하는 코딩은 이제 조금 익숙해진 것 같다.

categoryLi.forEach((item) => {
  item.addEventListener('click', (e) => {
    e.preventDefault();
    categoryClass = e.currentTarget.parentElement.getAttribute('class');

    switch (categoryClass) {
      case 'all':
        categoryLi.forEach((item) => {
          item.classList.remove('on');
          categoryLi[0].classList.add('on');
        });
        brandLi.forEach((item) => {
          item.style.display = 'block';
        });
        break;
      case 'ent':
        categoryAction(1, 'ent');
        break;
      case 'shop':
        categoryAction(2, 'shop');
        break;
      case 'diner':
        categoryAction(3, 'diner');
        break;
      case 'box':
        categoryAction(4, 'box');
        break;
      default:
        break;
    }
  });
});