달리는 CSS 캐릭터
영어에서 번역됨
크레딧 : @kouryde_i
크레딧 안 하면 찾아갈 거야
<!-- =========================================================
달리는 페이지 돌
참고: 이걸 위해서는 4개의 달리기 스프라이트가 필요해. 그러니까, 캐릭터가 걷는 서로 다른 이미지 4개.
========================================================= -->
<div class="pagedoll-runner" id="pagedoll-runner">
<!--
네 개의 달리기 프레임이 한 번에 모두 로드됩니다. CSS가 이들 사이를 페이드하여 애니메이션을 처리합니다.
-->
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-1"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-2"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-3"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-4"
draggable="false"
>
<!-- 패배 스프라이트 -->
<img
src="your_image_link"
alt=""
class="pagedoll-defeat"
draggable="false"
>
</div>
<style>
/* =========================================================
메인 페이지 돌
========================================================= */
.pagedoll-runner {
/* 크기 */
width: 120px;
height: 120px;
/* 위치 */
position: fixed;
/*
화면 왼쪽 바깥에서 완전히 시작합니다.
*/
left: -140px;
bottom: 12px;
/*
매우 높은 스태킹 순서.
기존 CSS 중에는 3000이나 20000 같은 값을 쓰는 것도 있으므로 의도적으로 훨씬 높게 설정합니다.
*/
: 2147483647 !important;
/*
자체적인 스태킹 컨텍스트를 만듭니다.
*/
isolation: isolate;
/*
프로필 박스의 레이아웃에 영향을 받지 않게 합니다.
*/
margin: 0 !important;
padding: 0 !important;
/*
돌 전체가 뷰포트를 가로질러 이동합니다.
*/
animation:
pagedoll-cross-screen
8s
linear
infinite;
/*
실제로 클릭을 받을 수 있게 합니다.
*/
pointer-events: auto;
cursor: pointer;
/*
이상한 텍스트/이미지 선택을 방지합니다.
*/
user-select: none;
-webkit-user-select: none;
/*
가로 스크롤바가 생기지 않게 합니다.
*/
overflow: visible;
}
/* =========================================================
모든 스프라이트
========================================================= */
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 120px !important;
height: 120px !important;
/*
이렇게 하면 Janitor의 기본 이미지 스타일이 스프라이트를 늘리거나 자르는 것을 방지합니다.
*/
object-fit: contain !important;
/*
중요:
모든 스프라이트가 서로 바로 위에 겹쳐집니다.
*/
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
/*
클릭을 가로채면 안 됩니다.
부모인 .pagedoll-runner가 클릭을 받습니다.
*/
pointer-events: none;
/*
이미지 드래그를 방지합니다.
*/
user-select: none;
-webkit-user-drag: none;
}
/* =========================================================
달리기 스프라이트 프레임
========================================================= */
/*
한 번에 오직 하나의 프레임만 보입니다.
애니메이션은 0.64초 동안 지속됩니다:
1 → 2 → 3 → 4 → 반복
대략 초당 6.25 프레임입니다.
*/
.pagedoll-frame-1 {
opacity: 1;
animation:
pagedoll-frame-1
0.64s
steps(1)
infinite;
}
.pagedoll-frame-2 {
opacity: 0;
animation:
pagedoll-frame-2
0.64s
steps(1)
infinite;
}
.pagedoll-frame-3 {
opacity: 0;
animation:
pagedoll-frame-3
0.64s
steps(1)
infinite;
}
.pagedoll-frame-4 {
opacity: 0;
animation:
pagedoll-frame-4
0.64s
steps(1)
infinite;
}
/* 프레임 1 */
@keyframes pagedoll-frame-1 {
0%,
24.999% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
/* 프레임 2 */
@keyframes pagedoll-frame-2 {
0%,
24.999% {
opacity: 0;
}
25%,
49.999% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
/* 프레임 3 */
@keyframes pagedoll-frame-3 {
0%,
49.999% {
opacity: 0;
}
50%,
74.999% {
opacity: 1;
}
75%,
100% {
opacity: 0;
}
}
/* 프레임 4 */
@keyframes pagedoll-frame-4 {
0%,
74.999% {
opacity: 0;
}
75%,
99.999% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* =========================================================
화면 전체를 가로지르는 이동
========================================================= */
@keyframes pagedoll-cross-screen {
/*
왼쪽 가장자리 바깥에서 시작합니다.
*/
0% {
left: -140px;
}
/*
화면 끝까지 달립니다.
*/
100% {
left: calc(100vw + 140px);
}
}
/* =========================================================
패배 스프라이트
========================================================= */
.pagedoll-defeat {
/*
달리는 동안에는 숨겨집니다.
*/
opacity: 0 !important;
/*
활성화되면 달리기 프레임 위에 오도록 합니다.
*/
: 20 !important;
}
/* =========================================================
클릭 / 탭 상태
========================================================= */
/*
깔끔한 트릭: 페이지 돌을 탭/클릭하면 :focus-within이 활성화됩니다. 부모가 달리기를 멈춥니다. 네 개의 달리기 스프라이트가 사라집니다. 패배 스프라이트가 나타납니다. (어째선지 이건 작동하지 않아서 캐릭터가 그냥 계속 루프로 달려)
*/
.pagedoll-runner:focus-within {
animation-play-state: paused;
cursor: default;
}
/* 클릭 후 달리기 스프라이트 숨기기 */
.pagedoll-runner:focus-within .pagedoll-frame {
animation-play-state: paused;
opacity: 0 !important;
}
/* 패배 스프라이트 표시 */
.pagedoll-runner:focus-within .pagedoll-defeat {
opacity: 1 !important;
}
/* =========================================================
작은 패배 효과
========================================================= */
.pagedoll-runner:focus-within {
animation:
pagedoll-defeat-stop
0.35s
ease-out
forwards;
}
@keyframes pagedoll-defeat-stop {
0% {
transform:
scale(1)
rotate(0deg);
}
35% {
transform:
scale(1.12)
rotate(-8deg);
}
65% {
transform:
scale(0.95)
rotate(6deg);
}
100% {
transform:
scale(1)
rotate(0deg);
}
}
/* =========================================================
데스크톱
========================================================= */
@media screen and (min-width: 769px) {
.pagedoll-runner {
width: 140px;
height: 140px;
bottom: 15px;
}
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
width: 140px !important;
height: 140px !important;
}
}
/* =========================================================
모바일
========================================================= */
@media screen and (max-width: 768px) {
.pagedoll-runner {
width: 90px;
height: 90px;
bottom: 8px;
}
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
width: 90px !important;
height: 90px !important;
}
}
/* =========================================================
동작 줄이기 접근성
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pagedoll-runner {
animation-duration: 12s;
}
.pagedoll-runner .pagedoll-frame {
animation-duration: 1.2s;
}
}
</style>
양해 부탁해 아직 패배 애니메이션 고치는 방법을 알아내는 중이야
생성됨 9월 19일
업데이트됨 9월 19일
게시됨 9월 19일
- 무제한