Camera shake CSS / JS?
Hallo. Gibt es eine möglichkeit, oder library, ein camera shake zu erzeugen in html / css / js? Also dass die ganze website wackelt, alswenn es ein erdbeben gibt oderso haha also hoffe ihr wisst was Ich meine und dass mir jmd weiterhelfen kann
LG
2 Antworten
sollte über css realisierbar sein.
du kannst mit transfor: translateX (oder Y) dein div nach links/rechts bzw rauf/runter verschieben. wennst da einfach paar hintereinander machst in kurzer zeit, sollte es wie ein erdbebe wirken.
https://developer.mozilla.org/de/docs/Web/CSS/transform-function/translateX
vermutlich brauchste auch keyframes dazu.
https://blog.kulturbanause.de/2015/10/css-keyframe-animationen/
(bin da nicht ganz so fit mit den animationen :D)
Kannst du per CSS Animation machen.
In dieser Animation per transform: translate das ganze Bild um ein paar Pixel verschieben, und es zudem noch per transform: rotate drehen. Und das einfach in zufällige Richtungen und Winkel.
Folgender Code schüttelt die Seite wenn man die Maus drauf hat. Natürlich kannst du das in eine Klasse packen, und die Klasse dann per JavaScript zuweisen und entfernen, anstatt body:hover zu benutzen.
body:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
Hier kannst du dir anschauen, wie es aussieht: https://jsfiddle.net/z6josxL2/1/