웹에서 만나는 전기차의 미학: 포르쉐 디자인 개발기

 

 

 

웹사이트의 핵심 요소: FOOTER, LOGOS, 네비게이션 메뉴 구현하기
웹 개발의 세계에서, 사용자 경험(UX)는 최우선입니다. 오늘은 웹사이트에서 중요한 세 부분인 FOOTER, LOGOS, 그리고 네비게이션 메뉴를 어떻게 구현하는지 살펴보겠습니다.

1. FOOTER의 중요성과 구현
웹사이트의 하단에 위치하는 FOOTER는 사용자에게 유용한 정보를 제공하는 중요한 영역입니다. 여기에는 저작권 정보, 연락처, 사이트 맵, 소셜 미디어 링크 등이 포함될 수 있습니다. 효과적인 FOOTER 디자인은 사용자의 웹사이트 탐색을 돕고, 필요한 정보를 쉽게 찾을 수 있도록 합니다.

 

(이전 코드사용시 메뉴바가 열린이후 하단 스크롤링시 함께 블러처리가되서 화면구성이 투명하게 보이는 오류를

제작중 만나게 되었습니다 자바스크립트코드에 그래서 메뉴가 열리고 닫힐때 블러효과가 적용되고 제거되도록 다시 설계하였습니다)

2. LOGOS 섹션
LOGOS 섹션은 브랜드 인지도를 높이는 데 중요한 역할을 합니다. 여기에서는 웹사이트가 협력하는 다양한 브랜드나 후원사의 로고를 표시할 수 있습니다. 로고는 시각적으로 매력적이면서도 웹사이트의 전반적인 디자인과 조화를 이루어야 합니다.

3. 동적인 네비게이션 메뉴
사용자의 웹사이트 내 탐색을 쉽게 만드는 요소 중 하나는 네비게이션 메뉴입니다. 자바스크립트를 이용해 메뉴를 효과적으로 제어할 수 있습니다. 예를 들어, 메뉴 표시 및 숨김, 블러 효과 적용, 모바일에서의 메뉴 관리 등이 있습니다. 이러한 기능은 웹사이트의 사용자 친화성을 크게 향상시킵니다.

이 포스트에서는 각 섹션의 구체적인 구현 방법과 코드 예시를 제공하겠습니다. 웹 개발에 관심 있는 분들에게 이 정보가 도움이 되기를 바랍니다.

 

변경된 자바스크립트 코드

const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close'),
      header = document.getElementById('header'); // 헤더 요소

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu');
        header.style.backdropFilter = 'none'; // 메뉴가 열릴 때 블러 효과 제거
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu');
        header.style.backdropFilter = 'blur(10px)'; // 메뉴가 닫힐 때 블러 효과 적용
    })
}

/*===== SCROLL EVENT FOR BLUR EFFECT =====*/
window.addEventListener('scroll', () => {
  if (!navMenu.classList.contains('show-menu')) {
    // 메뉴가 닫혀 있을 때 스크롤에 따라 블러 효과 조절
    header.style.backdropFilter = window.scrollY > 50 ? 'blur(10px)' : 'none';
  }
});

/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

const linkAction = () =>{
    const navMenu = document.getElementById('nav-menu')
    // When we click on each nav__link, we remove the show-menu class
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== CHANGE BACKGROUND HEADER ===============*/

function scrollHeader  () {
    const header = document.getElementById('header')
    // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
    if(this.scrollY >= 50) header.classList.add('scroll-header'); 
    else header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)


/*=============== CHANGE BACKGROUND HEADER ===============*/
document.querySelectorAll('.home__car-number').forEach(number => {
    const updateCount = () => {
        const target = +number.getAttribute('data-target');
        const count = +number.innerText;
        const increment = target / 100; 

        if (count < target) {
            number.innerText = Math.ceil(count + increment);
            number.classList.add('is-visible'); // 여기에 클래스 추가
            setTimeout(updateCount, 10);
        } else {
            number.innerText = target;
            number.classList.add('is-visible'); // 목표에 도달했을 때도 클래스 추가
        }
    };

    updateCount();
});

/*=============== POPULAR SWIPER ===============*/

let swiperPopular = new Swiper(".popular__container", {
    loop: true,
    spaceBetween: 24,
    slidesPerView: 'auto',
    grabCursor: true,

  pagination: {
    el: ".swiper-pagination",
    dynamicBullets: true,
  },
  
  breakpoints: {
  768: {
    slidesPerView: 3,
  },
  1024: {
    spaceBetween: 48,
  },
},
});

/*=============== MIXITUP FILTER FEATURED ===============*/
let mixerFeatured = mixitup('.featured__content', {
    selectors: {
        target: '.featured__card'
    },
    animation: {
        duration: 300
    }
});

/* Link active featured */ 
const linkFeatured = document.querySelectorAll('.featured__item')


function activeFeatured(){
    linkFeatured.forEach(l=> l.classList.remove('active-featured'))
    this.classList.add('active-featured')
}
linkFeatured.forEach(l=> l.addEventListener('click',activeFeatured))
/*=============== SHOW SCROLL UP ===============*/ 
const scrollUp = () =>{
	const scrollUp = document.getElementById('scroll-up')
    // When the scroll is higher than 350 viewport height, add the show-scroll class to the a tag with the scrollup class
	this.scrollY >= 350 ? scrollUp.classList.add('show-scroll')
						: scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll('section[id]')
    
const scrollActive = () =>{
  	const scrollDown = window.scrollY

	sections.forEach(current =>{
		const sectionHeight = current.offsetHeight,
			  sectionTop = current.offsetTop - 58,
			  sectionId = current.getAttribute('id'),
			  sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']')

		if(scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight){
			sectionsClass.classList.add('active-link')
		}else{
			sectionsClass.classList.remove('active-link')
		}                                                    
	})
}
window.addEventListener('scroll', scrollActive)

 

 

 

 

오작동하는 화면입니다

정상 작동하는 화면입니다

 

 

 

/*=============== OFFER ===============*/
.offer{
  position: relative;
}

.offer__container{
  grid-template-rows: max-content 224px;
}

.offer__bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.offer__data,
.offer__img{
  position: relative;
}

.offer__data{
  text-align: center;
}

.offer__title{
  margin-bottom: 2rem;
}

.offer__description{
  margin-bottom: 3rem;
}

.offer__img{
  position: absolute;
  max-width: initial;
  width: 400px;
  bottom: 2rem;
  right: -5.5rem;
}
/*=============== LOGOS ===============*/
.logos__img{
  width: 40px;
  opacity: .4;
  transition: .3s;
}

.logos__container{
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  align-items: center;
  gap: 4rem;
  padding-bottom: 2rem;
}

.logos__img:hover{
  opacity: 1;
}
/*=============== FOOTER ===============*/
.footer{
  position: relative;
  overflow: hidden;
}

.footer .shape__big,
.footer .shape__small{
  position: absolute;
}

.footer .shape__big{
  width: 300px;
  height: 300px;
  left: -12rem;
  top: 6rem;
}

.footer .shape__small{
  right: -13rem;
  bottom: -6rem;
}

.footer__container{
  row-gap: 2.5rem;
  position: relative;
}

.footer__logo{
  display: inline-flex;
  align-items: center;
  column-gap: .25rem;
  color: var(--title-color);
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: 1.25rem;
  transition: .3s;
}

.footer__logo i{
  font-size: 1.5rem;
  font-weight: 500;
}

.footer__logo:hover{
  color: var(--first-color);
}

.footer__title{
  font-size: var(--h3-font-size);
  margin-bottom: 1.25rem;
}

.footer__links{
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
}

.footer__link,
.footer__social-link{
  color: var(--text-color);
  transition: .3s;
}

.footer__link:hover,
.footer__social-link:hover{
  color: var(--title-color);
}

.footer__social{
  display: flex;
  column-gap: 1.5rem;
}

.footer__social-link{
  font-size: 1.25rem;
}

.footer__copy{
  display: block;
  margin-top: 4.5rem;
  text-align: center;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
  width: .6rem;
  background-color: hsl(219, 4%, 16%);
  border-radius: 1rem;
}

::-webkit-scrollbar-thumb{
  background-color: hsl(219, 4%, 24%);
}

::-webkit-scrollbar-thumb:hover{
  background-color: hsl(219, 4%, 32%);
}

/*=============== SCROLL UP ===============*/
.scrollup{
  position: fixed;
  right: 1rem;
  bottom: -30%;
  background-color: hsla(0, 0%, 100%, .1);
  backdrop-filter: blur(16px);
  display: inline-flex;
  padding: .45rem;
  border-radius: .5rem;
  font-size: 1.15rem;
  color: var(--white-color);
  z-index: var(--z-tooltip);
  transition: .4s;
}

.scrollup:hover{
  transform: translateY(-.25rem);
}
/* Show Scroll Up*/
.show-scroll{
  bottom: 3rem;
}

스타일링을 추가했습니다

 

이번에 사용한 라이브러리입니다

 

Featured Luxury Cars

새로운 라이브러리 kunkalabs를 사용하여 Featured Luxury Cars메뉴를 구성하였습니다

 

 

버튼 구현자체가 매우 부드럽게됩니다 ㅎㅎ

클릭시 컬러가 자연스럽게 삽입되면서 올라오는게 예쁘다고 생각됬던 부분중 하나입니다

 

 

사용된 함수 리뷰해보자면

 

 

const linkFeatured = document.querySelectorAll('.featured__item'): .featured__item 클래스를 가진 모든 요소를 선택하고, linkFeatured 상수에 이들의 목록을 저장합니다.

function activeFeatured() { ... }: activeFeatured라는 함수를 정의합니다. 

이 함수는 클릭된 요소에 'active-featured' 클래스를 추가하고, 다른 모든 요소에서 이 클래스를 제거합니다.

linkFeatured.forEach(l => l.classList.remove('active-featured')): linkFeatured에 

저장된 모든 요소를 순회하면서, 각 요소에서 'active-featured' 클래스를 제거합니다.

this.classList.add('active-featured'): 현재 클릭된 요소(this를 통해 참조)에 'active-featured' 클래스를 추가합니다. 

이는 사용자가 클릭한 요소를 시각적으로 강조하는 데 사용됩니다.

linkFeatured.forEach(l => l.addEventListener('click', activeFeatured)): linkFeatured에 저장된 모든 요소에 대해 

클릭 이벤트 리스너를 추가합니다. 사용자가 이 요소들 중 하나를 클릭하면 activeFeatured 함수가 실행되어, 

클릭된 요소에 'active-featured' 클래스가 추가되고 다른 요소들에서는 제거됩니다.

이 코드는 사용자가 'featured' 섹션의 다른 항목을 클릭할 때마다 시각적 피드백을 제공하여, 현재 선택된 항목을 명확하게 표시합니다.

 

 

scrollrevealjs의 홈페이지 메인이다

이렇게 두번째 프로젝트도 성황리에 마쳤습니다 

다음 프로젝트는 리액트로 돌아오도록 하겠습니다🤗