뷰티 라이프스타일 크리에이터&인플루언서

엔터테인먼트 레페리 홈페이지 클린코딩을 해보았습니다.

html, css, js, jquery 모두 저만의 방식을 사용하였고

스크롤 이벤트, 배열과 반응형 jquery를 접목시켜 봤습니다.

Main Point

• 스크롤 업&다운
• 랜덤 배열
• 반응형 jquery
• gsap scrollTrigger를 사용한 가로 스크롤

1. Scroll Up&Down Wheel

최상단이 아닌 어느 위치에서든

scroll down 시 메뉴가 사라지고 up할 때는 드러나는 움직임을 구현하기 위해

아래의 방법을 사용하였다.

// 스크롤시 헤더
    $('body').on('mousewheel',function(e){
        var wheel = e.originalEvent.wheelDelta;
        if(! $('body').hasClass('menuon')){//! : 부정. 만약 body에 menuon클래쓰가 없다면
            if (wheel > 0) { //wheel 양수가 스크롤다운, 음수가 스크롤업
                $('header').removeClass('hide');
            } else {
                $('header').addClass('hide');
            }
        }
    })

2. 랜덤 배열