CREDIT : @kouryde_i

if you dont credit i will get you

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

RUNNING PAGE DOLL

NOTE: you need 4 running sprites for this. like, four different images of your character walking.

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

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

<!--

The four running frames are all loaded at once. CSS handles the animation by fading between them.

-->

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

>

<!-- defeat sprite -->

<img

src="your_image_link"

alt=""

class="pagedoll-defeat"

draggable="false"

>

</div>

<style>

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

MAIN PAGE DOLL

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

.pagedoll-runner {

/* size */

width: 120px;

height: 120px;

/* position */

position: fixed;

/*

Starts completely outside the LEFT side of the screen.

*/

left: -140px;

bottom: 12px;

/*

VERY high stacking order.

Some existing CSS uses values like 3000 and 20000 so this is deliberately much higher.

*/

: 2147483647 !important;

/*

Make its own stacking context.

*/

isolation: isolate;

/*

Don't let it get affected by the layout of your profile boxes.

*/

margin: 0 !important;

padding: 0 !important;

/*

The entire doll moves across the viewport.

*/

animation:

pagedoll-cross-screen

8s

linear

infinite;

/*

Make sure it can actually receive clicks.

*/

pointer-events: auto;

cursor: pointer;

/*

Prevent weird text/image selection.

*/

user-select: none;

-webkit-user-select: none;

/*

Don't allow it to create a horizontal scrollbar.

*/

overflow: visible;

}

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

ALL SPRITES

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

.pagedoll-runner .pagedoll-frame,

.pagedoll-runner .pagedoll-defeat {

position: absolute !important;

left: 0 !important;

top: 0 !important;

width: 120px !important;

height: 120px !important;

/*

This prevents Janitor's normal image styling from stretching/cropping the sprites.

*/

object-fit: contain !important;

/*

IMPORTANT:

all sprites sit directly on top of each other.

*/

margin: 0 !important;

padding: 0 !important;

border: 0 !important;

outline: none !important;

box-shadow: none !important;

/*

They should NOT intercept the click.

The parent .pagedoll-runner receives it.

*/

pointer-events: none;

/*

Prevent dragging the image.

*/

user-select: none;

-webkit-user-drag: none;

}

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

RUNNING SPRITE FRAMES

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

/*

Only ONE frame is visible at a time.

The animation lasts 0.64 seconds:

1 → 2 → 3 → 4 → repeat

This is roughly 6.25 frames per second.

*/

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

}

/* FRAME 1 */

@keyframes pagedoll-frame-1 {

0%,

24.999% {

opacity: 1;

}

25%,

100% {

opacity: 0;

}

}

/* FRAME 2 */

@keyframes pagedoll-frame-2 {

0%,

24.999% {

opacity: 0;

}

25%,

49.999% {

opacity: 1;

}

50%,

100% {

opacity: 0;

}

}

/* FRAME 3 */

@keyframes pagedoll-frame-3 {

0%,

49.999% {

opacity: 0;

}

50%,

74.999% {

opacity: 1;

}

75%,

100% {

opacity: 0;

}

}

/* FRAME 4 */

@keyframes pagedoll-frame-4 {

0%,

74.999% {

opacity: 0;

}

75%,

99.999% {

opacity: 1;

}

100% {

opacity: 0;

}

}

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

MOVEMENT ACROSS THE WHOLE SCREEN

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

@keyframes pagedoll-cross-screen {

/*

Start outside the left edge.

*/

0% {

left: -140px;

}

/*

Run all the way across the screen.

*/

100% {

left: calc(100vw + 140px);

}

}

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

DEFEAT SPRITE

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

.pagedoll-defeat {

/*

Hidden while running.

*/

opacity: 0 !important;

/*

Put it above the running frames when activated.

*/

: 20 !important;

}

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

CLICK / TAP STATE

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

/*

The neat trick: :focus-within activates when the page doll is tapped/clicked. The parent stops running. The four running sprites disappear. The defeat sprite appears. (this doesn't work for some reason so your character just runs in a whole loop)

*/

.pagedoll-runner:focus-within {

animation-play-state: paused;

cursor: default;

}

/* hide running sprites after click */

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

animation-play-state: paused;

opacity: 0 !important;

}

/* show defeat sprite */

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

opacity: 1 !important;

}

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

LITTLE DEFEAT EFFECT

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

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

}

}

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

REDUCE MOTION ACCESSIBILITY

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

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

.pagedoll-runner {

animation-duration: 12s;

}

.pagedoll-runner .pagedoll-frame {

animation-duration: 1.2s;

}

}

</style>

bear with me im still figuring out how to fix the defeat animation