홈페이지를 클론하면서, 원래 홈페이지와 달리 개인적으로 구현하고 싶은 기능들은 따로 추가하였습니다.
👉 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 구현
브라우저에 접속하면 nav bar들이 위에서 아래로 떨어지는 기능이 구현됩니다. 처음엔 저도 JS로 접근하려고 했지만, CSS를 이용해 애니메이션을 주고 슬라이드를 줄 수 있지 않을까 싶었고 만족스러운 결과가 나왔습니다.
.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%;
}
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);
.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;
}
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")
})
}};
슬라이드를 만들 때, position absolute를 주어 차곡차곡 슬라이드들을 겹친후에 자바스크립트로 positionX를 바꿔주었습니다. 중요한 점은 슬라이드를 감싸고 있는 div에 아래와 같이 CSS를 구현해줘야 한다는 점입니다. 그렇지 않으면 position absolute가 효과가 없고, 옆으로 쭉 늘려준 각각의 슬라이드를 가려주기 위해 overflow도 필수입니다.
.main__slides {
overflow: hidden;
position: relative;
}
let curSlide = 0;
const maxSlide = slide.length;
const createDots = function(){
slide.forEach(function(s,i){
dotContainer.insertAdjacentHTML("beforeend",
`<button class="dots__dot" data-slide="${i}"></button>`) })
}
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);
}
});
이제 nav bar를 선택해주면, 그 컨텐츠에 알맞는 섹션으로 이동합니다. 딱 떨어지는 느낌보단 부드러운 느낌을 원했기 때문에 behavior에 smooth를 입혔습니다.
btnFood.addEventListener("click", function(){
section5.scrollIntoView({behavior:'smooth'});
})
하얀색 빈 페이지에서 html,css로 레이아웃을 구성하고 JS효과까지 처음 해본 클론코딩이었습니다. :)