https://github.com/YeJinii/myAIMAX_renewal.git

• 환경 셋팅

• [x] header

  • [x] 375

  • [x] 768

  • [x] 1024

  • [x] 1280

  • [x] 1920

  • [x] hover시 색 반전되는 효과 넣기 (transition 적용)

  • [x] nav에 hover시 확대되는 애니메이션 적용

  • [x] 스크롤시 축소되는 애니메이션 적용 (jquery)

  • [x] 아래 그림자 주기

• main_banner

• winged_copy

• performance

• [x] 기능 추가

  • [x] 에이아이맥스 유튜브 링크 달기
  • [x] 사이드 메뉴 기능 만들기 (1024, 768, 375)

• animation

  화면에 보일때 애니메이션 추가 코드

  $(document).ready(function(){
  
      const $val_name = $(".tag_name");
  
      const exposurePercentage = 100;
      const loop = true;
  
      $(window).on('scroll', function() {
  
          $val_name.each(function() {
  
              const $el = $(this);
              
              const rect = $el[0].getBoundingClientRect();
              const winHeight = window.innerHeight;
              const contentHeight = rect.bottom - rect.top;
                      
              if (rect.top <= winHeight - (contentHeight * exposurePercentage / 100) && rect.bottom >= (contentHeight * exposurePercentage / 100)) {
                  $('tag_name').addClass('on');
              }
              if (loop && (rect.bottom <= 0 || rect.top >= window.innerHeight)) {
                  $('tag_name').removeClass('on');
              }
  
          });
  
      }).scroll();
  
  });
  
  function numberWithCommas(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
  

• 고도화