JAVASCRIPT - 2021. 5. 16.

이벤트 기획전 페이지

안녕하세요 TriplexLab 입니다.

오늘은 이벤트 기획전 페에지에 관해서 살펴보도록 하겠습니다.

참고로 이번에 다룰 내용에는 예전에 올려놓은 이야기들과 조금 종복된 내용이 있습니다.

자세한 내용은 아래 링크를 확인 해주시면 됩니다.

스크롤 방향 감지하기

안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: bo..

triplexlab.tistory.com

jquery 이벤트 연결하기(event binding)

안녕하세요 TriplexLab 입니다 :) 오늘은 event binding에 대해서 작성해 보겠습니다. jquery 이벤트 연결하기(event binding) tabs 기능 페이(MP)구매정보 쇼핑포인트(SP)구매정보 ... ... Left Right $(function..

triplexlab.tistory.com

해당 내용은
기업,혹은 회사에서 특별 행사, 또는 기획전이라고 해서 흔하게들 많이 사용하는
Tab버튼 스크롤이동에 관한 내용 입니다.

상세한 기능 보단, 러프하게 자주하는기능들 중심으로 코드를 정리했습니다.

<!DOCTYPE html>
<html>
<head>
  <title>이벤트 기획전 페이지 DEMO</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <!-- navigation bar -->
  <div class="navbar">
    <ul class="menu-right">
      <li data-tab="about"> About</li>
      <li data-tab="contact">Contact</li>
    </ul>
  </div>

  <section class="header">
    <div class="helper"></div><div class="vertical-center">
      <h1>I'm an engineer</h1>
      <h2>FRONT-END DEVELOPER</h2>
    </div>
  </section>

  <!-- about me -->
  <section class="about" id="about">
    <div class="helper"></div><div class="vertical-center">
      <h3>About Me</h3>
      <p>안녕하세요. 저는 프론트엔드와 백엔드를 넘나드는 개발자입니다. 만나서 반가워요!</p>
    </div>
  </section>

  <!-- contact me -->
  <section class="contact" id="contact">
    <div class="helper"></div><div class="vertical-center">
      <h3>Contact Me</h3>
      <p>언제든지 편하게 연락주세요. 감사합니다.</p>

    </div>
  </section>
    
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="module" src="./index.js"></script>
</body>
</html>

* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: 'Noto Sans KR', sans-serif;
    min-width: 768px;
  }
  
  /* navbar */
  
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0 60px;
  }
  
  .navbar img {
    vertical-align: middle;
  }
  
  .navbar .menu-right {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .navbar .menu-right li {
    float: left;
    color: white;
  }
  
  .navbar .menu-right li button {
    
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
    transition: color 1s;
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
  }
  
  .navbar .menu-right li:last-child {
    margin-left: 30px;
  }

  .menu-right li.active::before {content: '-';} 
  
  /* vertical center */
  
  .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  
  .vertical-center {
    display: inline-block;
    vertical-align: middle;
    color: white;
    opacity: 0;
    position: relative;
    top: 100px;
  }
  
  /* header */
  
  .header {
    background-image: url('../images/hero_background1.jpg');
    background-size: cover;
    background-position: center center;
    height: 100vh;
    min-height: 600px;
    text-align: center;
  }
  
  .header h1 {
    font-size: 40px;
    margin: 0;
    margin-bottom: 33px;
  }
  
  .header h2 {
    font-size: 20px;
    margin: 0;
    font-weight: normal;
  }
  
  /* about */
  
  .about {
    height: 100vh;
    min-height: 600px;
    text-align: center;
    background-image: url('../images/hero_background2.jpg');
    background-size: cover;
  }
 
  .about h3 {
    font-size: 40px;
    color: #4a4a4a;
    margin: 0;
    margin-bottom: 37px;
  }
  
  .about p {
    font-size: 16px;
    color: #4a4a4a;
    margin: 0;
    margin-bottom: 61px;
  }
  
  .about .skillset {
    display: inline-block;
  }
  
  .about .skill:not(:last-child) {
    margin-bottom: 17px;
  }
  
  .about .skill .title {
    display: inline-block;
    width: 50px;
    vertical-align: middle;
    margin-right: 15px;
    font-size: 16px;
    color: #4a4a4a;
  }
  
  .about .skill .bar {
    display: inline-block;
    vertical-align: middle;
    width: 646px;
    height: 33px;
    border-radius: 25px;
    background-color: #f9f9f9;
    position: relative;
    line-height: 33px;
  }
  
  .about .skill .bar .inner-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 33px;
    background: #bbe6ff;
    border-radius: 25px;
  }
  
  .about .skill .bar .percentage {
    font-size: 14px;
    color: #9b9b9b;
    position: absolute;
    right: 20px;
    top: 0;
  }
  
  /* contact */
  
  .contact {
    height: 100vh;
    min-height: 600px;
    background-color: #f9f9f9;
    text-align: center;
    background-image: url('../images/hero_background3.jpg');
    background-size: cover;
  }
  
  .contact h3 {
    font-size: 40px;
    color: #4a4a4a;
    margin: 0;
    margin-bottom: 37px;
  }
  
  .contact p {
    font-size: 16px;
    color: #4a4a4a;
    margin: 0;
    margin-bottom: 61px;
  }
  
  .contact form {
    display: inline-block;
    vertical-align: middle;
    width: 646px;
  }
  
  .contact input,
  .contact textarea {
    display: block;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #ebebeb;
    font-size: 16px;
    padding: 10px 30px;
  }
  
  .contact input {
    margin-bottom: 24px;
  }
  
  .contact textarea {
    resize: none;
    height: 222px;
  }

  .contact2 {
    height: 100vh;
    min-height: 600px;
    background-color: #f9f9f9;
    text-align: center;
    background-image: url('../images/hero_background3.jpg');
    background-size: cover;
  }

(function(){
    let lastScrollY = 0;
    let st;
    let currentItem; //활성화된 el 자기자신을 저장해놓는다. 1)
    
     // 활성화
    const activate = function(el) {
        console.log(el.dataset.tab)
        document.querySelector('#'+el.dataset.tab).classList.add('active')
        el.classList.add('active');
        currentItem = el;    //활성화된 el 자기자신을 저장해놓는다. 1)번에 저장이된다. 2)
    };

    // 비활성화
    const unactivate = function(el) { //3)에서 활성화된 애를 취소시킨다. 4)
        document.querySelector('#'+el.dataset.tab).classList.remove('active')
        el.classList.remove('active');    
    };

    // 특정 엘리먼트 영역의 TOP부분을 감지하는 함수
    const onScrollTop = function(el){
        const selfTab = el.dataset.tab;
        
        if(selfTab === 'about'){
            $("html, body").animate({
                scrollTop: $(".about").position().top
            },1000);
        } else if (selfTab === 'contact'){
            $("html, body").animate({
                scrollTop: $(".contact").position().top
            },1000);
        }
    };

    // 스크롤 이벤트 방향 감지하는 함수
    const scrollEv = function(){
        st = window.scrollY;
        const menuLi = Array.from(document.querySelectorAll('.menu-right li'));
        const aboutTop = document.querySelector('.about').getBoundingClientRect().top;
        const contactTop = document.querySelector('.contact').getBoundingClientRect().top;

        menuLi.forEach((el) => {
            aboutTop <= 0 ? el.style.color = '#4A4A4A' : el.style.color = '#fff';
            contactTop <= 0 ? el.style.color = '#fff' : null;

            el.classList.remove('active');
        });
        
        if(st > lastScrollY) { // 스크롤 방향이 아랫쪽 일 때 감지함
            // console.log('다운')
        } else {  // 스크롤 방향이 윗쪽 일 때 감지함
            // console.log('업')
        }
       
        // 스크롤 이벤트시 특정 엘리먼트에 클래스를 순차적으로 넣는 조건.
        if(aboutTop <= 0 && 0 < contactTop) { // 특정 엘리먼트 영역의 TOP부분을 기준으로 0보다 크고, 작음을 비교 합니다.
            menuLi[0].classList.add('active');
        } else if(contactTop <= 0) {
            menuLi[1].classList.add('active');
        }

        lastScrollY = st;
    };

    // 이벤트 핸들러
    const elementthis = function({target} = e){
        //1)번에서 활성화가 된 애를 가져와서 활성가되었다면 밑에를 실행한다. 3)
        currentItem && unactivate(currentItem);
        activate(target);
        onScrollTop(target);
    };

    const tit = document.querySelector('.menu-right');
    tit.addEventListener('click', elementthis);
    window.addEventListener('scroll', scrollEv.bind(this));
})();

위에 코드를 파일로 제공합니다.
필요하신분들은 다운받아서 사용하세요~
(참고로 ES6 + jquery를 사용했습니다.)