Wie bekomme ich diese 3d Animation auf meine Website?
http://atacac.com/drop/2017/. Wie bekomme ich ein Video so hin, dass ich genau so wie da interagieren kann
1 Antwort
Diese Animation ist ein Zusammenspiel aus gut zusammengeschnittenem Video (es endet in der Position, in der es auch startet, die Szenenänderung erfolgt nur auf einer Koordinatenachse) und einem Skript, welches während des Drags die Timeline des Videos (vor oder zurück) bewegt.
Für Ersteres bräuchtest du also entsprechendes Videomaterial und ein Programm zur Videobearbeitung/Postproduktion (Adobe After Effects, Natron, o.ä.).
Für Zweiteres brauchst du HTML- und JavaScript-Kenntnisse. Bei dem Player muss die Kontrollleiste ausgeblendet werden, außerdem musst du das Videoelement mit verschiedenen Event Listenern ausstatten, die auf Mausereignisse (click, mousemove, etc.) reagieren. Anhand des Starten/Enden eines Drags kann ermittelt werden, ob bei Mausbewegung die Timeline (mittels der Video API) verändert werden soll. Indem man bei jeder Mausbewegung die Mausposition mit der vorherigen Mausposition vergleicht, lässt sich die Mausrichtung ermitteln und somit auch Richtung, in die die Timeline verschoben werden muss. Der Aufruf von Standard Event Handlers (die bspw. das Abspielen/Pausieren des Videos bei Klick bewirken) müssen verhindert werden.
Könntest du mir das vielleicht in einem Gespräch erläutern, gegen eine kleine Aufwandsentschädigung?