🖥️ 에리제론

• 사이트명 : 에리제론
• 제작기간 : 22.11.24 ~ 22.12.16 (22일 소요)
• 사용언어 : html, css, javascript, node, MySql
• 라이브러리 : swiper, AOS
• 분류 : 반응형, 개인 리뉴얼 사이트
• 에리제론 사이트 배포 : https://eriproject.herokuapp.com/
• 에리제론 깃허브 주소 : https://github.com/yoonchungah/project1216.git

🙄기존 웹사이트 분석

메인페이지에 스와이퍼를 사용한 원페이지 구성

포인트 컬러와 제품 색이 겹쳐 텍스트가 제대로 보이지 않아 답답한 느낌을 준다

비건 브랜드라는 특색을 메인 페이지에서 바로 확인할 수 없다는 점과 사용자의 환경을 고려한

반응형 페이지가 아닌 점이 아쉽다

🤓웹사이트 리뉴얼 방향

비건 브랜드의 특색이 드러나도록 포인트 컬러를 새로 잡으며 글과 이미지가 겹치는 현상을 없앤다

기본으로 보여지는 메인페이지에서 브랜드 소개, 제품에 대한 내용을 담아 길이를 늘려 브랜드가 노출되게 끔 구성한다

동적인 요소를 사용하여 사용자의 시선을 끌도록 한다

게시판을 활성화 하여 사용자와의 의사소통을 활발하게 조정한다

모바일 사용자를 고려하여 반응형으로 작업한다

👩🏻‍💻 Code Review

1.자동으로 넘어가는 키비주얼

🔎 코드분석

var swiper = new Swiper(".keySwiper", {
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

이 부분은 swiper라는 라이브러리를 사용해주었다

아래와 같이 swiper에서 지정한 특정 클래스를 그대로 사용하며 (swiper, swiper-wrapper, swipper-slide)

swiper 에 클래스명을 추가하여 조정할 수 있다

disableOnInteraction: false로 지정하여 스와이프 후 자동 재생되게끔 해주었다

<section class="main1">
  <!-- Swiper -->
  <div class="swiper keySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="desc" src="img/key1.jpg" alt="web_img">
        <img class="mobile" src="img/mkey1.png" alt="mo_img">
      </div>
      <div class="swiper-slide">
        <img class="desc" src="img/key2.jpg" alt="web_img">
        <img class="mobile" src="img/mkey2.png" alt="mo_img">
      </div>
      <div class="swiper-slide">
        <img class="desc" src="img/key3.jpg" alt="web_img">
        <img class="mobile" src="img/mkey3.png" alt="mo_img">
      </div>
      <div class="swiper-slide">
        <img class="desc" src="img/key4.jpg" alt="web_img">
        <img class="mobile" src="img/mkey4.png" alt="mo_img">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</section>

2.마우스를 올렸을때 이미지가 부드럽게 바뀌는 효과

🔎 코드분석

let newPro = document.querySelectorAll('.new_img');
  for(let i = 0; i<newPro.length; i++){
    newPro[i].addEventListener('mouseenter',()=>{
      newPro[i].classList.add('new_img_fadeout');
    });
  newPro[i].addEventListener('mouseleave',()=>{
    newPro[i].classList.remove('new_img_fadeout');
    });
}

<ul class="new_pro_manu_wrap">
      <li>
        <a class="new_bg_img new_bg_img1" href="/product"><img class="new_img" src="img/npro1.jpg" alt="newpro"></a>
        <div class="txt_wrap">
          <p class="txt_title"><a href="/product">자작나무 패키지 선물세트</a></p>
          <p class="price"><a href="#">95,800원</a></p>
        </div>
      </li>
      <li>
        <a class="new_bg_img new_bg_img2" href="/product"><img class="new_img" src="img/npro2.jpg" alt="newpro"></a>
        <div class="txt_wrap">
          <p class="txt_title"><a href="/product">하우스워밍 선물세트 비건 샴푸바</a></p>
          <p class="price"><a href="#">55,000원</a></p>
        </div>
      </li>
      <li>
        <a class="new_bg_img new_bg_img3" href="/product"><img class="new_img" src="img/npro3.jpg" alt="newpro"></a>
        <div class="txt_wrap">
          <p class="txt_title"><a href="/product">그린스타터 선물세트 비건 샴푸바</a></p>
          <p class="price"><a href="#">33,000원</a></p>
        </div>
      </li>
      <li>
        <a class="new_bg_img new_bg_img4" href="/product"><img class="new_img" src="img/npro4.jpg" alt="newpro"></a>
        <div class="txt_wrap">
          <p class="txt_title"><a href="/product">올인원 비건 뷰티볼 샴푸볼 선물세트</a></p>
          <p class="price"><a href="#">77,400원</a></p>
        </div>
      </li>
    </ul>

.new_bg_img{
  width: 100%;
  display: block;
  overflow: hidden;  
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.new_bg_img1{
  background-image: url(../img/npro1_on.jpg);
}
.new_bg_img2{
  background-image: url(../img/npro2_on.jpg);
}
.new_bg_img3{
  background-image: url(../img/npro3_on.jpg);
}
.new_bg_img4{
  background-image: url(../img/npro4_on.jpg);
}
.new_bg_img>img{
  display: block;
  width: 100%;
  height: 400px;
  opacity: 1;
  transition: all 1s;
}
.new_bg_img>img.new_img_fadeout{
  opacity: 0;
}

💣 문제발생

html에서img 태그를 사용하다보니 마우스 오버시 사진이 부드럽게 바뀌는 오파시티를 적용시키기

힘들었다

💊 문제해결

img태그를 감싸고 있는 부모 태그에 동일한 클래스명과 다른 클래스명 총 2개를 부여하였고

다른 클래스명에서는 마우스 오버 시 보일 이미지를 백그라운드로 넣어주었다

같은 클래스명은 변수로 잡아 마우스 오버, 리브가 될때 클래스명을 추가하고 빼주는 작업을 해주었으며

이 클래스명을 통해 오파시티를 조절하여 부드럽게 이미지가 바뀌는 효과를 주었다

3.스크롤 시 각 요소들이 스무스하게 나타나는 애니메이션

🔎 코드분석

<div class="eri_brand1">
  <div class="brand_imgs brand_img1" data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-out-cubic" data-aos-duration="500"></div>
  <div class="brand_text">
    <h4 data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-out-cubic" data-aos-duration="500">환경과 나의 건강한 변화를 완성하는<br class="mobile_v"> 클린 비건 뷰티 에리제론</h4>
    <p data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-out-cubic" data-aos-duration="500">강한 생명력으로 어느 곳에서도 아름답게 피어나는 에리제론은 <br>
      생명의 가치를 지키기 위해 동물실험을 배제한 천연 식물성 원료만을<br>
     사용하여 모두가 행복할 수 있는 새로운 아름다움을 제시 하는 비건 브랜드입니다</p>
  </div>
</div>

AOS라는 라이브러리를 사용했다.

link를 이용하여 css를 주소와 스크립트 주소를 연결하고

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

메인 js파일에 아래 코드를 추가해주었다.

  <script>
    AOS.init();
  </script>

AOS는 태그에 data-aos="fade-up"과 같은 속성을 적용하여 조절할 수 있는데

data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-out-cubic" data-aos-duration="500"

의 속성값을 사용하여 시간차이를 둔 애니메이션을 구현했다

4.스크롤할 때 특정포인트에서 navbar 배경을 변경하기

🔎 코드분석

const sp_ball = document.getElementById("sp_ball");
let pos = sp_ball.offsetTop;

window.onscroll = function(){
   scrollMenu();
 }

let subMenu = document.querySelector('.sub_pro_menu')
function scrollMenu(){
   if(this.scrollY >= pos){ 
      subMenu.classList.add('scroll-menu');
    } else { 
      subMenu.classList.remove('scroll-menu')
    }
 }

제일 먼저 보이는 div 박스의 offsetTop을 변수로 따로 지정했고 네비게이션 메뉴를 감싸고 있는 부모를

subMenu 라는 변수명으로 지정한 뒤 그 스크롤 Y값이 offsetTop을 저장한 pos보다 같거나 커질 때

클래스명을 추가하고 빼주는 기능을 넣었다

추가된 클래스에는 backdrop-filter: blur를 주어 특정포인트에서 블러효과를 가진 navbar를 확인 할 수 있다

5.탭메뉴를 활용한 이벤트 페이지

🔎 코드분석

function tabOpen(event, tabName){
  
  let eventTabCont = document.getElementsByClassName('event_tab_cont');
  for(i = 0; i < eventTabCont.length; i++){
    eventTabCont[i].style.display = 'none'; 
  }
  document.getElementById(tabName).style.display= "block";
  
  let eventTabLink = document.getElementsByClassName("event_tab_link");
  for(i = 0; i < eventTabLink.length; i++ ){
    eventTabLink[i].className = eventTabLink[i].className.replace(' event_active','');
  }
  event.currentTarget.className += ' event_active';
}

리스트를 클릭했을때마다 탭형식으로 보여지는 화면을 구현하려고 했다

onclick을 이용해서 html에서 클릭 이벤트를 실행시켜주었다

e, event, evt 모두 이벤트를 가르키며 이때는 event를 사용해주었다

tabName에는 매개변수로 event_tab1,event_tab2 가 들어가며

하나는 이벤트가 되고 하나는 탭이 되는 형식이다

list를 담고 있는 event_tab_cont를 변수로 선언하고 for문을 돌려 dispaly를 none으로 바꾸어준다

이어서 나머지 매개변수에는 dispaly를 block으로 주어 화면상에 보이도록 해주었다