uiux 25일차

이명진·2024년 12월 18일

-swiper라이브러리

  • link와 script를 불러온다
  • js도 잊지않고 복붙을 한다
  • swiper 를 더 추가할 때에는 class 구분 잘 두기
  • 서로 다른 swiper이면 js 확인과 css나 class가 겹쳤는지 확인

-MousemoveEffect

  • script 불러오기
  • js 불러오기
  • data-mousemove-effect1-hor-res="0.05"
    이 숫자를 조정해서 얼만큼 따라오게 만들 수 있음

aos 커스텀

그레이브:27강

-탑바 밑줄 따라오게 하기

function TopBar__init(){
  $('.top-bar__menu-box-1>ul>li').mouseenter(function(){
    var $li=$(this);
    var $menuItemLine=$('.top-bar__menu-box-1__item-line');
    
    var left = $li.position().left;
    var width= $li.outerWidth();
   
    $menuItemLine.css({
      left:left,
      width:width
    });
  });
  
  $('.top-bar__menu-box-1>ul>li').eq(0).mouseenter();
  //탑바 줄 자연스럽게 나오게 하기
}

TopBar__init();

탑바에 있는 글자가 다 다르고 길이도 다 다르기 때문에 구분을 해줘야함
얼만큼 떨어져있는지 알아야함

탑바 밑줄 자연스럽게 나오게 하기
:css 에서 left 값을 -100을 줘서 안보이게끔 빼놓는다 (집어넣는 것)
-총알처럼 튀어나오는 효과를 줄 수 있음
:eq(0) index처럼 0번째에 있는 애를 선택한 것

0개의 댓글