work_tip

탭메뉴 클릭시 탭메뉴 기능과 하이라이트 부분이 움직이는 기능을만들어 보았습니다.html 에서 li 탭메뉴 버튼과 div 컨텐츠부분을 만들어줍니다.forEach 문을 사용하여 각 메뉴 클릭시 각 순서의 인자를 받는 showContent, moveHightlight 를 실

tab메뉴에 data 이름과 클래스를 지정해줍니다.tab메뉴에 스티키를 넣어주고 active시 보여지는 스타일을 만들어줍니다.href, attr을 이용해 클릭시 이동스크롤을 지정해주고,스크롤시 특정 함수를 실행시켜주어영역 패널의 위치값 - 스크롤값이 50보다 작을시ac

버튼과 화살표 이미지를 변수로잡고,반복문을 돌려 toggle 기능으로 클래스를 더하고 제거를 하며그에따른 컨텐츠 보이기 숨김 동작과, 우측 화살표이미지를 setAttribute로 변경 하였습니다.

window 스크롤을하면scrollHeight (스크롤 전체화면) - clientHeight (보이는 실제화면)을 height 변수로 잡아준다.scrollY(스크롤양) 을 height로 나누어 준뒤 \* 100을 한것을.progress_bar 의 width 값으로 넣어

forEach문을 활용하여 메뉴와 컨텐츠를 클릭시 반복문을돌리도록만들어보았다.

무한 롤링이 되는 간단한 배너를 만들어보자!setInterval 기능을 활용하여 count가 -될수록anibox style이 왼쪽으로 흘러가도록 설정을 해두고,count 값이 절반값보다 작아지면 다시 0으로 원래자리로 설정을 해둔뒤또 - 값으로 설정을 해 두었습니다.

업무를 하다보면 부모의 padding을 자식요소가 무시해야할 필요가 생길 때가 있다. 그럴때 자식요소에이처럼 적용해주면 자식요소가 부모의 padding을 무시하게된다.

ex html첫번째로 모두체크할때 실행할 함수를 만들어준다.모두체크박스가 변화할때 checked 상태면 각 체크박스를 checked true 처리하고 on클래스추가한다. checked 상태가 아니면 checked false처리후 on 클래스를 제거한다.if 함수로 ch

기본적으로 배경을 만들어주고 내용물을 중앙정렬해준다. 입체적인 효과를위해 perspective를 넣어 준다. 앞뒤 카드를 감싸고있는 .card 를 position relative 와 가로세로 크기를 주고 transition을 주고 형식상 transform: rotate

cssjs배너의 top 값을 변수로 잡아준다.스크롤할때 스크롤양과, 배너의 top값을 더해준다.배너에 animate 함수를 사용하여 스크롤양과 배너의 top을 더해준것을 top으로 설정해준다.

elem2를 클릭하거나 elem3를 클릭해도 바깥쪽 elem1의 data id 인 about이 출려되게하려면elem2의 pointer-events: none; 를 설정해준다.ex 2)css pointer event를 사용하지않고 script로만 처리하기closest를

스크롤 하는도중에만 실행하고 스크롤이 멈추면 멈추는 기능 sample

함수안에 requestAnimationFrame(함수이름) 을 적용해주면60분의1초의 속도로 반복해서 나타내어준다.취소를 원하면 cancelAnimationFrame(함수이름)을 해주면 취소다 된다.

참고 https://shubamba.tistory.com/52

보통 overflow-x:hidden 을 주지만 그렇되면페이지에 sticky를 적용하거나 할때 이슈가 생긴다.그래서 대체방법으로contain:paint 를 쓰면 요소 밖으로 빠져 나갔을때 그려지지않게된다.

제이쿼리의 기능인 each문을 활용하여 해당번호를 구하여active된 index번호를 가져와 변수 num으로 컨트롤 해준다.

scrollY 기능으로 스크롤시 하단스크롤, 상단스크롤을 구분하는 방법입니다.

위 이미지처럼 setInterval 을 이용하여 차례대로 선택이 되는 애니메이션을 만들어보자

스크롤을 할때 하단스크롤인지 상단스크롤인지 판단하는 기능을 만들어보자

input 이벤트를 사용하여 if문으로 50글자 이상 && 체크박스 체크시 버튼에 클래스가 추가되는 기능입니다.50글자미만이거나 체크박스 미체크시 버튼활성화가 안됩니다.

그럴땐

그럴때는 탭을 눌렀을때 각 swiper의 autoplay.stop()을 해주고,해당스와이퍼를 가져온뒤 autoplay.start()를 해주면 해결된다.

step 1 >감지될 요소를 변수로잡고 new IntersectionObserver 를 생성해준뒤 콜백함수안에 실행할 요소를 넣는다.observer.observe(감지될요소)step 2 >entries 매개변수를 넣어주고.if문을 이용해 .isIntersecting로

위 gif 처럼 마우스를 따라다니는 모션을 만들어보자.mousemove 기능을 이용하여. e.pageX , e.pageY를 통해 값을 알아낸후 이동시킬 div에 left top 값에 넣어주면 마우스를 따라다니게 된다.

보이는 gif 처럼 마우스가 먼저 이동하고 이미지가 부드럽게 따라오는 기능을 만들어보자.변수를 정의해준다.let x = 0;let y = 0;let targetX = 0;let targetY = 0;requestAnimationFrame함수를 이용한다. box.styl

위 gif 와 같이 select option을 커스텀하여 제작해보자.forEach 문을 활용하여 option을 선택해주고 option의 text를 handleSelect 의 매개변수로 label에 넣어주는 방식으로 작업하였으며, text값의 따라 확인버튼의 컬러를 바꿔

업로드중..위 gif 처럼 mouseover 시 이미지들이 움직이게 만들어보자.mousemove 를 활용하여.x = e.pageX - window.innerWidth / 2; 화면의 중앙을 계산해주고,각각 의 이미지들을 translateX 로 움직여준다.requestA

이 코드는 Swiper 슬라이더를 여러 탭과 패널로 초기화하는 기능을 구현한 것이다.로드 이벤트 리스너: window.addEventListener("load", function() {...});는 페이지가 완전히 로드될 때까지 기다렸다가 내부의 코드를 실행합니다. 이

탭안에 탭메뉴 그리고 그 안에 좌우버튼으로 움직이는 탭메뉴를 만들어보자.

Scrolla.js 사용법을 알아보자.상단에 제이쿼리cdn, scrolla.js, script 순으로 script를 걸어둔다.애니메이션을 주고싶은곳에 class animation을 주고 data-animate="motion" 을 입력해준다.script파일에 이와같이 작

탭링크를 누르거나 해당영역에 진입하면 nav가 active 클래스가 붙고 해당영역으로 부드럽게 이동하는 기능입니다.

해당 jif 처럼 스크롤시 부드럽게 이동되게하는 jscdn 적용 시켜준다.Lenis 함수를 스크립트에 넣어주기만하면 끝