CRÉDITO : @kouryde_i

se você não der os créditos eu vou te pegar

<!-- =========================================================

BONECO DE PÁGINA CORRENDO

NOTA: você precisa de 4 sprites de corrida para isso. tipo, quatro imagens diferentes do seu personagem andando.

========================================================= -->

<div class="pagedoll-runner" id="pagedoll-runner">

<!--

Os quatro quadros de corrida são todos carregados de uma vez. O CSS cuida da animação alternando entre eles com fade.

-->

<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>

/* =========================================================

BONECO DE PÁGINA PRINCIPAL

========================================================= */

.pagedoll-runner {

/* tamanho */

width: 120px;

height: 120px;

/* posição */

position: fixed;

/*

Começa completamente fora do lado ESQUERDO da tela.

*/

left: -140px;

bottom: 12px;

/*

Ordem de empilhamento MUITO alta.

Alguns CSS existentes usam valores como 3000 e 20000, então este é deliberadamente muito mais alto.

*/

: 2147483647 !important;

/*

Cria seu próprio contexto de empilhamento.

*/

isolation: isolate;

/*

Não deixa ele ser afetado pelo layout das caixas do seu perfil.

*/

margin: 0 !important;

padding: 0 !important;

/*

O boneco inteiro se move pela viewport.

*/

animation:

pagedoll-cross-screen

8s

linear

infinite;

/*

Garante que ele realmente possa receber cliques.

*/

pointer-events: auto;

cursor: pointer;

/*

Impede seleção estranha de texto/imagem.

*/

user-select: none;

-webkit-user-select: none;

/*

Não permite que ele crie uma barra de rolagem horizontal.

*/

overflow: visible;

}

/* =========================================================

TODOS OS SPRITES

========================================================= */

.pagedoll-runner .pagedoll-frame,

.pagedoll-runner .pagedoll-defeat {

position: absolute !important;

left: 0 !important;

top: 0 !important;

width: 120px !important;

height: 120px !important;

/*

Isso impede que o estilo normal de imagem do Janitor estique/corte os sprites.

*/

object-fit: contain !important;

/*

IMPORTANTE:

todos os sprites ficam diretamente um em cima do outro.

*/

margin: 0 !important;

padding: 0 !important;

border: 0 !important;

outline: none !important;

box-shadow: none !important;

/*

Eles NÃO devem interceptar o clique.

O pai .pagedoll-runner recebe o clique.

*/

pointer-events: none;

/*

Impede arrastar a imagem.

*/

user-select: none;

-webkit-user-drag: none;

}

/* =========================================================

QUADROS DO SPRITE DE CORRIDA

========================================================= */

/*

Apenas UM quadro fica visível por vez.

A animação dura 0,64 segundos:

1 → 2 → 3 → 4 → repete

Isso é aproximadamente 6,25 quadros 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;

}

/* QUADRO 1 */

@keyframes pagedoll-frame-1 {

0%,

24.999% {

opacity: 1;

}

25%,

100% {

opacity: 0;

}

}

/* QUADRO 2 */

@keyframes pagedoll-frame-2 {

0%,

24.999% {

opacity: 0;

}

25%,

49.999% {

opacity: 1;

}

50%,

100% {

opacity: 0;

}

}

/* QUADRO 3 */

@keyframes pagedoll-frame-3 {

0%,

49.999% {

opacity: 0;

}

50%,

74.999% {

opacity: 1;

}

75%,

100% {

opacity: 0;

}

}

/* QUADRO 4 */

@keyframes pagedoll-frame-4 {

0%,

74.999% {

opacity: 0;

}

75%,

99.999% {

opacity: 1;

}

100% {

opacity: 0;

}

}

/* =========================================================

MOVIMENTO PELA TELA INTEIRA

========================================================= */

@keyframes pagedoll-cross-screen {

/*

Começa fora da borda esquerda.

*/

0% {

left: -140px;

}

/*

Corre pela tela inteira.

*/

100% {

left: calc(100vw + 140px);

}

}

/* =========================================================

SPRITE DE DERROTA

========================================================= */

.pagedoll-defeat {

/*

Escondido enquanto corre.

*/

opacity: 0 !important;

/*

Coloca ele acima dos quadros de corrida quando ativado.

*/

: 20 !important;

}

/* =========================================================

ESTADO DE CLIQUE / TOQUE

========================================================= */

/*

O truque legal: :focus-within ativa quando o boneco de página é tocado/clicado. O pai para de correr. Os quatro sprites de corrida desaparecem. O sprite de derrota aparece. (isso não funciona por algum motivo, então seu personagem só corre em um ciclo completo)

*/

.pagedoll-runner:focus-within {

animation-play-state: paused;

cursor: default;

}

/* esconde os sprites de corrida após o clique */

.pagedoll-runner:focus-within .pagedoll-frame {

animation-play-state: paused;

opacity: 0 !important;

}

/* mostra o sprite de derrota */

.pagedoll-runner:focus-within .pagedoll-defeat {

opacity: 1 !important;

}

/* =========================================================

PEQUENO EFEITO 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);

}

}

/* =========================================================

DESKTOP

========================================================= */

@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;

}

}

/* =========================================================

MOBILE

========================================================= */

@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;

}

}

/* =========================================================

ACESSIBILIDADE DE MOVIMENTO REDUZIDO

========================================================= */

@media (prefers-reduced-motion: reduce) {

.pagedoll-runner {

animation-duration: 12s;

}

.pagedoll-runner .pagedoll-frame {

animation-duration: 1.2s;

}

}

</style>

tenha paciência comigo, ainda estou descobrindo como consertar a animação de derrota