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