클론코딩: Canal Street Market

홈페이지를 클론하면서, 원래 홈페이지와 달리 개인적으로 구현하고 싶은 기능들은 따로 추가하였습니다.
👉 https://github.com/SumiSeo/canalstreet-clonecoding

📅 작업기간
2021/5/22 ~ 5/30

🕹 기술스텍
HTML/CSS
JavaScript(ES6+)
Git

🙆🏻‍♀️ 주요구현사항
모든 페이지의 레이아웃 구현
Navbar와 클릭에 따른 홈페이지 스크롤인
Event bubbling, Intersection observer API을 활용한 이미지 로딩
Slider 구현 (클릭넘김, 버튼넘김)
Async/Await을 통한 Map API 구현

1. 트랜지션을 활용한 슬라이드 인

브라우저에 접속하면 nav bar들이 위에서 아래로 떨어지는 기능이 구현됩니다. 처음엔 저도 JS로 접근하려고 했지만, CSS를 이용해 애니메이션을 주고 슬라이드를 줄 수 있지 않을까 싶었고 만족스러운 결과가 나왔습니다.

• 한 개의 애니메이션을 만들고 animiation delay를 각각 주어 시간차가 나도록 하였습니다.
• 애니메이션이 자기 역할만 하고 뿅-사라져버리길래, 그 자리에서 고정될 수 있도록 forwards도 추가하였습니다.

.nav__box--1 {
  transform: translateY(-90em);
  animation: slidedown 2s ease-in-out forwards;
  animation-delay: 0.9s;
}

또한, nav bar이기 때문에 position:fixed;하였습니다.

.header__container {
  font-family: "Cairo", sans-serif;
  position: fixed;
  top: 0;
  right: 0;
  width: 15%;
}

2. Intersection observer API

• 화면 스크롤을 내리면서 section2를 Intersection obserer API가 감지하여 transition과 opacity에 변화를 줄 수 있게 하였습니다.

const displaySection2 = function(entries,observer){
    const [entry] = entries;
    if(!entry.isIntersecting) return;
    else {
       section2.classList.remove("active");
    }
    observer.unobserve(section2);
};

const observerMainSecond = new IntersectionObserver(displaySection2 , {
    root: null,
    threshold:0.15,
})

observerMainSecond.observe(section2);

• transition이 일어날 때, 갑작스러운 느낌을 주고 싶지 않아 SCSS에 transition 효과를 주었습니다.

.main__second {
  width: 85%;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1566954979172-eaba308acdf0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1489&q=80");
  background-size: cover;
  background-position: center;
  transition: transform 1s, opacity 1s;
}

• 아래도 같은 효과이나, 이미지 각각에 observer api사용하지 않고, 부모 element에게 이벤트를 주어 event bubbling을 활용하였습니다.
  

const displaySection3 = function(entries, observer){
    const [entry] = entries;
    console.log(entry);
    if (!entry.isIntersecting) return;
    else {
    const allboxes =entry.target.closest(".third__boxes").querySelectorAll(".third__box")
    allboxes.forEach(function(box){
        box.classList.remove("active2")
    })
}};

3. 슬라이드 구현

슬라이드를 만들 때, position absolute를 주어 차곡차곡 슬라이드들을 겹친후에 자바스크립트로 positionX를 바꿔주었습니다. 중요한 점은 슬라이드를 감싸고 있는 div에 아래와 같이 CSS를 구현해줘야 한다는 점입니다. 그렇지 않으면 position absolute가 효과가 없고, 옆으로 쭉 늘려준 각각의 슬라이드를 가려주기 위해 overflow도 필수입니다.

.main__slides {
  overflow: hidden;
  position: relative;
}

• 버튼을 클릭하면 그 다음 슬라이드로 넘어갑니다. 마지막 슬라이드 버튼을 클릭하면 다시 첫번째로 돌아오는 것을 볼 수 있습니다. 현재 슬라이드와 마지막 슬라이드를 변수로 설정해줘야 합니다.

let curSlide = 0;
const maxSlide = slide.length;

• 동그란 dot을 클릭해도 슬라이드가 넘어갑니다. 처음엔 저 dots을 html, css로 하나하나 만들어줬는데 결국 JS로 슬라이드 개수만큼 만들어주었습니다.
  

const createDots = function(){
    slide.forEach(function(s,i){
    dotContainer.insertAdjacentHTML("beforeend",
    `<button class="dots__dot" data-slide="${i}"></button>`) })
}

• DOM과 코드를 연결해주기 위해 dataset을 설정해주었습니다.

dotContainer.addEventListener("click", function(e){
    if(e.target.classList.contains("dots__dot"))
    {   const slide = e.target.dataset.slide;
        console.log(slide);
        goToSlide(slide);
        activateDot(slide);
    }
});

4. Slide into View 구현

이제 nav bar를 선택해주면, 그 컨텐츠에 알맞는 섹션으로 이동합니다. 딱 떨어지는 느낌보단 부드러운 느낌을 원했기 때문에 behavior에 smooth를 입혔습니다.

btnFood.addEventListener("click", function(){
    section5.scrollIntoView({behavior:'smooth'});
})

하얀색 빈 페이지에서 html,css로 레이아웃을 구성하고 JS효과까지 처음 해본 클론코딩이었습니다. :)