gsap
사이트 특정 구간에서 스크롤시 애니메이션을 넣을수 있는 라이브러리,
스크롤 트리거 애니메이션을 조절하여 이용할수 있다.
횡으로 이동하는 효과
1. 제이쿼리, gsap , scrollRriger 스크립트를 불러옴
2. 스크롤 트리거 플러그인 활성화
gsap.registerPlugin(scrollTriger);
3. 섹션그룹으로 묶고
4. 제이쿼리 이름을 잘맞추기만 하면된다.
each : 반복문(index<엘리먼트>,node)
xpercent: 수평이동 거리 (ex: 오른쪽으로 이동시키겠다.)
ease : "none"애니메이션 추가할지
scrollTigger:어느 부분을 묶을지
start: 닿는순간 시작지점
end: 끝나는 지점
pin: 고정을 시키겠다.
scrub: 속도에 따라서 애니메이션이 자연스럽게 연결되는것.
scroll-snap-type, scroll-behavior로 fullpage js 효과 구현
스크롤할때 자연스럽게 창이 넘어가고 구간마다 멈추게함
- scroll-snap-type: y mandatory 세로축 사용자가 스크롤 멈추면 가장가까운곳에 멈추겠다.(고정포인트)
- scroll-behavior: smooth 스크롤부드럽게 움직이게
.section {
scroll-snap-align: start; 시작부분에 스크롤을 멈추게 하겠다.}
호버애니메이션
transform: rotateY(180deg) 축을 지정해주면 돌아간다.
transition : all .3s(duration) .3s(delay)
:hover
transform: rotateY(0);
반응형 스와이퍼
스와이퍼 기능에도 자체적으로 반응형기능이 있다.
js
breakpoints: {
0: {
slidesPerView: 1
},
768: {
slidesPerView: 2
},
1024: {
slidesPerView: 3
},
1280: {
slidesPerView: 4
},
1536: {
slidesPerView: 5
}
반응형이 자연스러워진다.
스와이퍼, 현재 활성화된 슬라이드의 내용을 별도의 공간에 표시
함수를 추가하고 싶을땐
js
on:afterInit<초기화시켜준다고 생각하면됨> : function(_swiper){
1번
2번
멀티 숫자 카운터, 제이쿼리 each
user-select: none; 드래그를 막는법
num을 숫자처럼 보여주게하는 함수 parseInt
삼항연산자를 이용하여 조건문걸기
const newNum = num -1 >- 0 ? num -1 : 0;
