-gsap 라이브러리
- 특정 구간에서 스크롤시, 횡으로 이동하는 효과
(ex. 아래로 넘기다가 옆으로 넘겨지게끔 만들어 줄 수 있음) - 제이쿼리와 gsap 링크 가져와야함
-앵커로 페이지 이동
<<html>>
<section style="position:fixed; top:0; left:0; background-color:orange;">
<a href="#sec1">위치 1</a>
<a href="#sec2">위치 2</a>
<a href="#sec3">위치 3</a>
</section>
<div id="sec1" style="height:1000px; background-color:skyblue;"></div>
<div id="sec2" style="height:1000px; background-color:gold;"></div>
<div id="sec3" style="height:1000px; background-color:pink;"></div>
<<css>>
html{
scroll-behavior:smooth;
}a 태그에 id 이름을 쓰면 해당 페이지로 이동하게 된다
scroll-behavior:smooth; : 해당 페이지로 이동하게 될 때 자연스럽게 이동하게 된다
-이미지를 css에 넣는 방법
background-image:url(https://picsum.photos/seed/picsum/1000/700);
background-attachment:fixed;-
background-image
url를 넣고 이미지 주소 복사
-
background-attachment
기본값이 scroll
fixed로 바꾸면 해당 위치에 이미지가 고정됨 그래서 스크롤 할 때 고정된 것을 볼 수 있음
-fullpage js 효과 구현
html 한 번에 쓰기
section#section-$*5.section.section-$
ul>li*5>a[href=#section-$]{섹션$}-
스크롤 진행
scroll-snap-type:y mandatory;
세로로 스크롤 할 때 자동정렬scroll-snap-align:start;
해당 부분이 컨테이너 시작점에 맞춘 것
css코드
.section-group{
overflow-y:scroll;
height:100vh;
scroll-behavior:smooth;
scroll-snap-type:y mandatory;
}
.section-group> .section{
min-height:100vh;
border:10px solid red;
box-sizing:border-box;
scroll-snap-align:start;
}tip: 부모격부터 차례로 쓰는 것이 좋다
-특정 시작에 글자들이 순서대로 하나씩 회전하면서 나타나는 애니메이션
<CSS>
.box-1 {
font-size: 5rem;
font-weight: bold;
display: flex;
border: 1px solid black;
}
/* display flex로 애매한 여백 없애기 */
.box-1 > * {
transform: rotateY(180deg);
transition: all 0.3s;
opacity: 0;
}
/* box-1 > * : 박스 안에 있는 모든 자식들 */
/* 뒤집혀있게 만들기 */
.box-1:hover > * {
transform: rotateY(0);
opacity: 1;
}
/* 다시 제자리로 */
.box-1:hover > :nth-child(1){
transition-delay:0.0s;
}
/* 모든 첫번째 아이 */
/* 바로 뒤집히게 하기 */
.box-1:hover > :nth-child(2){
transition-delay:0.1s;
}
.box-1:hover > :nth-child(4){
transition-delay:0.3s;
}
.box-1:hover > :nth-child(5){
transition-delay:0.4s;
}delay를 점점 느리게 줘서 순차적으로 글자를 뒤집히게 만들어 준다.
반응형 swiper(참고)
