personaje css corriendo
Traducido del inglés
by:@yoguyu_
CRÉDITO : @kouryde_i
si no das crédito te atraparé
<!-- =========================================================
PAGE DOLL CORREDOR
NOTA: necesitas 4 sprites corriendo para esto. o sea, cuatro imágenes diferentes de tu personaje caminando.
========================================================= -->
<div class="pagedoll-runner" id="pagedoll-runner">
<!--
Los cuatro fotogramas de carrera se cargan todos a la vez. El CSS maneja la animación haciendo un fundido entre ellos.
-->
<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"
>
<!-- sprite de derrota -->
<img
src="your_image_link"
alt=""
class="pagedoll-defeat"
draggable="false"
>
</div>
<style>
/* =========================================================
PAGE DOLL PRINCIPAL
========================================================= */
.pagedoll-runner {
/* tamaño */
width: 120px;
height: 120px;
/* posición */
position: fixed;
/*
Comienza completamente fuera del lado IZQUIERDO de la pantalla.
*/
left: -140px;
bottom: 12px;
/*
Orden de apilamiento MUY alto.
Algunos CSS existentes usan valores como 3000 y 20000, así que esto es deliberadamente mucho más alto.
*/
: 2147483647 !important;
/*
Crea su propio contexto de apilamiento.
*/
isolation: isolate;
/*
No dejes que se vea afectado por el diseño de las cajas de tu perfil.
*/
margin: 0 !important;
padding: 0 !important;
/*
El muñeco entero se mueve a través del viewport.
*/
animation:
pagedoll-cross-screen
8s
linear
infinite;
/*
Asegúrate de que realmente pueda recibir clics.
*/
pointer-events: auto;
cursor: pointer;
/*
Evita la selección extraña de texto/imágenes.
*/
user-select: none;
-webkit-user-select: none;
/*
No permitas que cree una barra de desplazamiento horizontal.
*/
overflow: visible;
}
/* =========================================================
TODOS LOS SPRITES
========================================================= */
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 120px !important;
height: 120px !important;
/*
Esto evita que el estilo de imagen normal de Janitor estire/recorte los sprites.
*/
object-fit: contain !important;
/*
IMPORTANTE:
todos los sprites se colocan directamente uno encima de otro.
*/
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
/*
NO deberían interceptar el clic.
El padre .pagedoll-runner lo recibe.
*/
pointer-events: none;
/*
Evita arrastrar la imagen.
*/
user-select: none;
-webkit-user-drag: none;
}
/* =========================================================
FOTOGRAMAS DEL SPRITE CORRIENDO
========================================================= */
/*
Solo UN fotograma es visible a la vez.
La animación dura 0.64 segundos:
1 → 2 → 3 → 4 → repetir
Esto es aproximadamente 6.25 fotogramas por segundo.
*/
.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;
}
/* FOTOGRAMA 1 */
@keyframes pagedoll-frame-1 {
0%,
24.999% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
/* FOTOGRAMA 2 */
@keyframes pagedoll-frame-2 {
0%,
24.999% {
opacity: 0;
}
25%,
49.999% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
/* FOTOGRAMA 3 */
@keyframes pagedoll-frame-3 {
0%,
49.999% {
opacity: 0;
}
50%,
74.999% {
opacity: 1;
}
75%,
100% {
opacity: 0;
}
}
/* FOTOGRAMA 4 */
@keyframes pagedoll-frame-4 {
0%,
74.999% {
opacity: 0;
}
75%,
99.999% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* =========================================================
MOVIMIENTO A TRAVÉS DE TODA LA PANTALLA
========================================================= */
@keyframes pagedoll-cross-screen {
/*
Comienza fuera del borde izquierdo.
*/
0% {
left: -140px;
}
/*
Corre de lado a lado de la pantalla.
*/
100% {
left: calc(100vw + 140px);
}
}
/* =========================================================
SPRITE DE DERROTA
========================================================= */
.pagedoll-defeat {
/*
Oculto mientras corre.
*/
opacity: 0 !important;
/*
Colócalo por encima de los fotogramas de carrera cuando se active.
*/
: 20 !important;
}
/* =========================================================
ESTADO DE CLIC / TOQUE
========================================================= */
/*
El truco ingenioso: :focus-within se activa cuando se toca/hace clic en el page doll. El padre deja de correr. Los cuatro sprites corriendo desaparecen. Aparece el sprite de derrota. (esto no funciona por alguna razón, así que tu personaje simplemente corre en un bucle completo)
*/
.pagedoll-runner:focus-within {
animation-play-state: paused;
cursor: default;
}
/* oculta los sprites corriendo tras el clic */
.pagedoll-runner:focus-within .pagedoll-frame {
animation-play-state: paused;
opacity: 0 !important;
}
/* muestra el sprite de derrota */
.pagedoll-runner:focus-within .pagedoll-defeat {
opacity: 1 !important;
}
/* =========================================================
PEQUEÑO EFECTO DE DERROTA
========================================================= */
.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);
}
}
/* =========================================================
ESCRITORIO
========================================================= */
@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;
}
}
/* =========================================================
MÓVIL
========================================================= */
@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;
}
}
/* =========================================================
ACCESIBILIDAD DE REDUCCIÓN DE MOVIMIENTO
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pagedoll-runner {
animation-duration: 12s;
}
.pagedoll-runner .pagedoll-frame {
animation-duration: 1.2s;
}
}
</style>
ten paciencia conmigo, todavía estoy averiguando cómo arreglar la animación de derrota
Creado 19 sept
Actualizado 19 sept
Publicado 19 sept
- Sin límite