타임라인 CSS 애니메이션 9종 — 스테퍼까지 복붙
타임라인 CSS 애니메이션은 이벤트나 결제 같은 여러 단계를 선과 원으로 이어 순서대로 보여주는 장치입니다. AOS·GSAP 없이, JS 0줄로 아홉 가지를 모았고, 그중 셋은 스크롤 위치를 CSS가 직접 읽는 sc
읽기스크롤
동작
CSS 히어로 섹션 애니메이션 9종
히어로 섹션은 사이트에 들어가자마자 가장 먼저 보이는 큰 화면 하나, 큰 제목과 버튼이 자리 잡은 그 첫인상을 말한다. AOS·GSAP 없이, JS 0줄로 그 화면에 움직임을 주는 CSS 애니메이션 9가지를 모았다.
이미지 슬라이드 만들기 9종 — CSS 캐러셀 그대로 복사
이미지 슬라이드 만들기는 쇼핑몰이나 포트폴리오 사이트에서 사진 몇 장이 옆으로 넘어가며 순서대로 보이는 화면을 만드는 일입니다. AOS·GSAP 없이, JS 0줄로 CSS만 붙여 넣어도 아홉 가지 방식으로 만들 수
CSS 프로그레스바 애니메이션 9종 — 스크롤 읽기 진행 표시
CSS 프로그레스바 애니메이션은 지금까지 얼마나 읽었는지를 스크롤 위치만으로 계산해 보여주는 장치입니다. AOS·GSAP 없이, JS 0줄로 아홉 가지 형태를 모았습니다 — 상단 바, 원형 배지, 점 내비, 세로 바
CSS 무한 롤링 배너 9종 — AOS·GSAP 없이, JS 0줄
css 무한 롤링 배너는 로고나 문구를 담은 콘텐츠 줄이 끊김 없이 한 방향으로 계속 흘러가는 애니메이션입니다. AOS·GSAP 없이, JS 0줄로 아홉 가지를 전부 만들었고, 그중 하나(09)는 화면이 아니라 사용
CSS 헤더 고정 스티키 9종 — AOS·GSAP 없이, JS 0줄
CSS 헤더 고정 스티키는 페이지를 스크롤해도 헤더가 화면 위에 계속 붙어 있게 만드는 방식입니다. 아홉 개 중 넷(04·05·08·09 중 04·05)은 자바스크립트 없이 CSS만으로 움직입니다. 아래 격자에서 자
CSS 패럴랙스 스크롤 9종 — AOS·GSAP 없이, JS 0줄
CSS 패럴랙스 스크롤 아홉 개를 모았습니다. 레이어마다 이동 속도를 다르게 주는 원리 하나로 배경이 내용보다 느리게 움직이는 착시를 만듭니다. 격자에서는 아홉 개가 2초 간격으로 자동 반복되니 먼저 눈으로 훑고 마
CSS 스크롤 애니메이션 9종 — AOS·GSAP 없이 JS 0줄로
CSS 스크롤 애니메이션 아홉 개를 모았습니다. AOS·GSAP 없이 브라우저 내장 animation-timeline 하나로 스크롤 위치 자체를 애니메이션 시계로 씁니다. JS는 0줄이고, 격자에서는 아홉 개 효과가