gsap(2)
-
gsap) progress bar vertical (프로그레스 바 세로)
HTML progress 태그는 진행의 정도를 나타내는 바를 만드는 태그입니다. 주요 속성은 value와 max 입니다. max를 전체로 봤을 때 value에 해당하는 정도를 나타냅니다. CSS progress { position:fixed; top:0; left:0; width: 100vh; height:6px; appearance:none; transform:translate(calc(-50% + 3px), calc(50vh - 50%)) rotate(90deg); } /* progress 배경 */ progress::-webkit-progress-bar { background: transparent; } /* progress 진행바 색상 */ progress::-webkit-progress-valu..
2022.07.29 -
gsap) full page/full screen page 만들기 (+ScrollTrigger, ScrollToPlugin)
gsap 라이브러리를 이용해서 스크롤 할 때 마다 풀페이지로 넘어가는 스크립트 작성하기 gsap CDN HTML Page 1 Page 2 Page 3 Page 4 CSS * {box-sizing: border-box;} html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .panel { width: 100%; height: 100%; display: flex; align-item: center; justify-contents: center; } .p {font-size: 6vw;} .s1 {background: red;} .s2 {background: green;} .s3 {background: blue;} .s4 {background: o..
2022.07.25