셀세이프 클론 코딩

 

URL :  https://developedbyssony.github.io/cellSafe/

셀세이프

 

header, main, footer로 구분되는 간단한 HTML 구조에 미디어쿼리는 1200px를 기점으로 PC와 Mobile에 대응하는 웹사이트이다. 클론을 하면서 간단한 코드로 효과적인 인터랙션을 만드는 것에 중점을 두었다. jQuery를 사용하였으며 1)인터랙티브 헤더, 2)메인 슬라이드(swiper 슬라이드 라이브러리 사용), 3)간단한 모션을 중점으로 문서를 정리하였다.  

 

1) 헤더

 

- 상위 메뉴 호버

// .depth01 요소에 마우스를 올리면 하위 메뉴 .depth02가 0.3초 동안 슬라이드 다운, header에 on 클래스 추가하여 스타일 변경
$(document).on("mouseenter", ".gnb-menu .depth01", function () {
	$(".depth02").stop().slideDown(300);
	$("header").addClass("on");
});
// .depth01 요소에 마우스 벗어나면 하위 메뉴 슬라이드 업, header에 on 클래스 제거
$(document).on("mouseleave", ".gnb-menu .depth01", function () {
	$(".depth02").stop().slideUp(0);
	$("header").removeClass("on");
});

// 각 메뉴 항목에 마우스 올리면 on 클래스 추가하여 메뉴명 강조 효과
$(document).on("mouseenter", ".gnb-menu .depth01 > li", function () {
    $(this).addClass("on");
});
// 각 메뉴 항목에 마우스 벗어나면 on 클래스 제거
$(document).on("mouseleave", ".gnb-menu .depth01 > li", function () {
    $(this).removeClass("on");
});

 

 

- 호버 시 노출되는 2단 메뉴에서 3단 메뉴 클릭 시

// 3단 메뉴 클릭 시 
$(document).on("click", ".gnb-menu .more", function (e) {
    e.preventDefault();
    $(".depth02").css("height", "auto"); // 상위 메뉴 높이 자동 조정
    $(".depth03").slideUp(300); // 다른 모든 .depth03 슬라이드 업
    $(this).parent().siblings().removeClass("on"); // 클릭한 버튼의 상위 태그의 같은 레벨의 다른 태그들의 항목에서 on 클래스 제거 (클릭한 메뉴 외에는 다 remove)
    $(this).parent().toggleClass("on"); // 클릭한 버튼의 상위 태그에 on 클래스 토글
    $(this).parent().find(".depth03").stop().slideToggle(300); // 클릭한 메뉴의 하위 3단 메뉴 열기/닫기 애니메이션
});

 

 

 

2. 메인 슬라이드

 

 

visualArr = ['For a Safer, Healthier World', 'In Pursuit of Excellence']; // 슬라이더의 페이지네이션에 표시할 텍스트 배열

var visSwiper = new Swiper(".visual .swiper",{ // .visual .swiper 선택자에 Swipter 슬라이더 적용
    autoplay: {
        delay:3000, // 3초마다 자동 슬라이드 전환
    },
    pagination: {
        el: ".pagination", // 페이지 네비게이션 요소
        clickable:true, // 클릭 시 슬라이드 이동 가능
        renderBullet: function(index, className) { 
            return '<span class="' + className + '">' + (visualArr[index]) + '</span>';
        } // 기본 불릿 대신 리턴 값으로 표시할 수 있음
    }
});

  // .visual 안의 .controls 안에 있는 .slide-btn 버튼이 클릭되었을 때 실행
  $(".visual .controls .slide-btn").on("click", function () {
    if ($(this).hasClass("pause")) { // 버튼의 클래스명이 pause라면
      $(this).removeClass("pause");
      $(this).addClass("play"); // 버튼의 클래스명을 pause-> play로 교체
      visSwiper.autoplay.stop(); // 자동재생 중지
    } else if ($(this).hasClass("play")) { // 버튼의 클래스명이 play라면
      $(this).removeClass("play"); 
      $(this).addClass("pause"); // 버튼의 클래스명을 play->pause로 교체
      visSwiper.autoplay.start(); // 자동재생 시작
    }
  });

 

덧붙여, 슬라이드의 경우 처음 active 상태가 되었을 때 scale값을 1.2로, active에서 해제가 되면 scale값을 1로 만드는 css 코드를 작성하여 슬라이드가 움직일 때마다 추가적인 애니메이션을 주었다.

.visual .swiper-slide .img-sect img {
    transform: scale(1);
    transition: transform 1s;
}

.visual .swiper-slide-active .img-sect img {
    transform: scale(1.2);
}

 

 

3. 간단한 모션

 

- 무한으로 반복되는 모션의 스크롤 화살표

 

- 무한으로 반복되는 모션의 스크롤 화살표

@keyframes scroll {
    from {
        transform: translateY(10px);
    }

    to {
        transform: translateY(-10px);
    }
}

.visual .scroll-ico img {
	animation: scroll 1s infinite alternate linear;
}

 

 

호버 시 반응하는 View More 마이크로 인터랙션

- 호버 시 반응하는 View More 마이크로 인터랙션

.view-more a::after {
    content: url('../img/more-ico.svg');
    position: absolute;
    top: 0;
    right: 0;
    transform: scale(0.7);
    transition: 0.5s ease-in-out;
    z-index: 999;
}

.view-more a:hover::after {
    transform: scale(0.7) translateX(10px);
}