Camera shake CSS / JS?

2 Antworten

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/

Woher ich das weiß:Hobby – Erfahrener Programmierer und Informatik-Student
Von Experte MrAmazing2 bestätigt

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)

Ok danke schaue ich mir mal an :)

0

Was möchtest Du wissen?