CREDIT : @kouryde_i

wenn du keinen Credit gibst, kriege ich dich

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

LAUFENDE SEITENPUPPE

HINWEIS: Du brauchst dafür 4 Lauf-Sprites. Also vier verschiedene Bilder deiner Figur beim Gehen.

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

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

<!--

Die vier Lauf-Frames werden alle auf einmal geladen. CSS übernimmt die Animation, indem es zwischen ihnen überblendet.

-->

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

>

<!-- Besiegt-Sprite -->

<img

src="your_image_link"

alt=""

class="pagedoll-defeat"

draggable="false"

>

</div>

<style>

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

HAUPT-SEITENPUPPE

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

.pagedoll-runner {

/* Größe */

width: 120px;

height: 120px;

/* Position */

position: fixed;

/*

Startet komplett außerhalb der LINKEN Seite des Bildschirms.

*/

left: -140px;

bottom: 12px;

/*

SEHR hohe Stapelreihenfolge.

Manches vorhandene CSS nutzt Werte wie 3000 und 20000, daher ist dieser absichtlich viel höher.

*/

: 2147483647 !important;

/*

Erzeugt einen eigenen Stapelkontext.

*/

isolation: isolate;

/*

Soll nicht vom Layout deiner Profil-Boxen beeinflusst werden.

*/

margin: 0 !important;

padding: 0 !important;

/*

Die gesamte Puppe bewegt sich über den Viewport.

*/

animation:

pagedoll-cross-screen

8s

linear

infinite;

/*

Stell sicher, dass sie tatsächlich Klicks empfangen kann.

*/

pointer-events: auto;

cursor: pointer;

/*

Verhindert seltsame Text-/Bildauswahl.

*/

user-select: none;

-webkit-user-select: none;

/*

Erlaube ihr nicht, eine horizontale Scrollleiste zu erzeugen.

*/

overflow: visible;

}

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

ALLE SPRITES

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

.pagedoll-runner .pagedoll-frame,

.pagedoll-runner .pagedoll-defeat {

position: absolute !important;

left: 0 !important;

top: 0 !important;

width: 120px !important;

height: 120px !important;

/*

Das verhindert, dass das normale Bild-Styling von Janitor die Sprites verzerrt/zuschneidet.

*/

object-fit: contain !important;

/*

WICHTIG:

alle Sprites liegen direkt übereinander.

*/

margin: 0 !important;

padding: 0 !important;

border: 0 !important;

outline: none !important;

box-shadow: none !important;

/*

Sie sollten den Klick NICHT abfangen.

Das Elternelement .pagedoll-runner empfängt ihn.

*/

pointer-events: none;

/*

Verhindert das Ziehen des Bildes.

*/

user-select: none;

-webkit-user-drag: none;

}

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

LAUF-SPRITE-FRAMES

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

/*

Es ist immer nur EIN Frame sichtbar.

Die Animation dauert 0,64 Sekunden:

1 → 2 → 3 → 4 → wiederholen

Das sind ungefähr 6,25 Frames pro Sekunde.

*/

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

}

}

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

BEWEGUNG ÜBER DEN GESAMTEN BILDSCHIRM

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

@keyframes pagedoll-cross-screen {

/*

Startet außerhalb des linken Randes.

*/

0% {

left: -140px;

}

/*

Läuft den ganzen Weg über den Bildschirm.

*/

100% {

left: calc(100vw + 140px);

}

}

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

BESIEGT-SPRITE

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

.pagedoll-defeat {

/*

Versteckt während des Laufens.

*/

opacity: 0 !important;

/*

Wenn aktiviert, über die Lauf-Frames legen.

*/

: 20 !important;

}

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

KLICK-/TIPP-ZUSTAND

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

/*

Der clevere Trick: :focus-within wird aktiviert, wenn die Seitenpuppe angetippt/angeklickt wird. Das Elternelement hört auf zu laufen. Die vier Lauf-Sprites verschwinden. Das Besiegt-Sprite erscheint. (das funktioniert aus irgendeinem Grund nicht, also läuft deine Figur einfach in einer endlosen Schleife)

*/

.pagedoll-runner:focus-within {

animation-play-state: paused;

cursor: default;

}

/* Lauf-Sprites nach dem Klick ausblenden */

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

animation-play-state: paused;

opacity: 0 !important;

}

/* Besiegt-Sprite anzeigen */

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

opacity: 1 !important;

}

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

KLEINER BESIEGT-EFFEKT

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

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

}

}

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

MOBIL

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

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

}

}

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

BARRIEREFREIHEIT: BEWEGUNG REDUZIEREN

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

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

.pagedoll-runner {

animation-duration: 12s;

}

.pagedoll-runner .pagedoll-frame {

animation-duration: 1.2s;

}

}

</style>

habt Geduld mit mir, ich finde noch heraus, wie ich die Besiegt-Animation reparieren kann