HTML CSS "Bild fliegt durch die Webseite beim klicken auf ein Icon" (Easter egg)

[MarcelDP]

Hallo Liebes Forum,

Ich baue mir gerade mit Cargo.site ein Portfolio auf. Ich habe mich für einen Builder entschieden, da ich ein absoluter Anfänger bin, wenn es um HTML CSS geht. Ich würde gerne ein kleines Easter egg auf meiner Webseite einbauen. Folgendes hab ich vor durch das klicken auf ein Icon bzw. Text soll die folgende Animation gestartet werden. Ich habe den Code für diese Animation von der "Cargo Support" Seite siehe Link. Leider funktioniert die Animation aktuell nur so, wie der Code es erlaubt, also direkt beim betreten der Seite, auf der ich ihn eingefügt habe. Kann mir vielleicht jemand helfen, wie ich den Code umschreiben muss, damit ich daraus eine "on Click" Funktion machen kann. Das würde mir sehr helfen :) Die Erklärung zum Code ist im Link enthalten, so wie noch mal hier drunter.

Besten Dank !

Make an Image Fly Across the Screen — Cargo Support

cargo.site

support.cargo.site

<div class="flier">{image 1}</div>


CSS Code

.flier {
pointer-events: none;
}
.flier > * {
/* Adjust animation duration to change the element’s speed */

animation: fly 50s linear infinite;
pointer-events: none !important;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
animation-delay: 1s;
z-index: 999999;

}

/* Keyframe values control where the element will begin
and end its trajectory across the screen. Each rule
represents a path the element follows across the screen. */

@keyframes fly {

98.001%, 0% {

display: block;
transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}

15% {

transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}

15.001%, 18% {

transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}

40% {

transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}

40.001%, 43% {
transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}

65% {
transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}

65.001%, 68% {
transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}

95% {
transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}

}

 

[MarcelDP]

Danke für deine schnelle Antwort ! Ich hab parallel noch hier auf Englisch gefragt dort hat man mir geholfen ! Danke trotzdem :) Hier der Link falls es jemanden Interessieren sollte.

HTML CSS Flying Image on Icon click (Easter egg)

I'm build a portfolio page with cargo site. I'm not an developer and I don't have really a good Idea about HTML & CSS. I have tried some research on the Web for this but found nothing that woul...

stackoverflow.com

 

[MarcelDP]

Na prächtig, dann hast Du es ja geschafft, gleich mehrere Parteien mit deinem Problem zu beschäftigen

Sorry falls ich deine Zeit verschwendet habe, das wollte ich nicht. Mein Dank sollte nicht despektierlich klingen. Ich schätze solche Foren sehr und bin immer froh wenn Menschen aus ihrem Fachgebiet Hilfe anbieten. Genau so versuche ich das in meinem Fachgebiet auch zu machen.