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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

MarcelDP

Neues Mitglied
26 November 2020
3
0
1
29
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 !


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

}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.147
428
83
68
Einen Button im Body einfügen mit Eventlistener doIt:
Code:
    <button type="button" onclick="doIt();">Do it! </button>
Und dieses Javascript einfügen:
Code:
    <script>
        const duration = 20;
        function doIt() {
            ele = document.querySelector('.flier>img');
            ele.style.animation = 'fly ' + duration + 's linear';
            setTimeout(() => {
                ele.style.animation = '';
            }, duration * 1000);
        }
    </script>
Damit die Dauer der Animation nicht doppelt definiert ist, habe ich es im CSS deaktiviert:
Code:
        .flier>* {
            /* Adjust animation duration to change the element’s speed */
            /* animation: fly 20s linear paused; */
            pointer-events: none !important;
            top: 0;
            left: 0;
            transform: translateX(-120%) translateY(-120%) rotateZ(0);
            position: fixed;
            animation-delay: 1s;
            z-index: 999999;
        }
 
  • Like
Reaktionen: MarcelDP

MarcelDP

Neues Mitglied
26 November 2020
3
0
1
29
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.

 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.147
428
83
68
Na prächtig, dann hast Du es ja geschafft, gleich mehrere Parteien mit deinem Problem zu beschäftigen :mad:
 

MarcelDP

Neues Mitglied
26 November 2020
3
0
1
29
Na prächtig, dann hast Du es ja geschafft, gleich mehrere Parteien mit deinem Problem zu beschäftigen :mad:
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.
 
Werbung: