Wie macht Apple das mit den interaktiven Websites?

Wie macht Apple das mit den Interaktiven Animationen wie zB auf dieser Seite? https://www.apple.com/de/iphone-12/

Ich kann mir vorstellen das man normale Videos erstellt hat und die dann normal in die Seite einbettet. Aber die erstellen ja richtige animierte Websites mit Animationen die nur abgespielt werden, wenn man scrollt. Wie machen die das? Kann man das auch machen mit "normalen" Mitteln?

Ich habe gehört, dass man mit beispielsweise Motion oder Blender so 360Grad Animationen hinbekommt. Aber wie kann man so welche Animationen dann interaktiv machen wie auf der oben verlinkten Seite?

Answer 1

[MrAmazing2]

Das macht man mit JavaScript.

Genauergesamt mithilfe vom Scroll-Event. Bei manchen Animationen (wenn sich ein Objekt beim Scroll bewegen soll) mit CSS transform.

Lässt sich alles mit normalen Mitteln machen. CSS und JavaScript sollte man halt können.

Woher ich das weiß: Hobby – Programmieren ist mein Hobby & Beruf

Comments

[MrAmazing2]

Frag mich aber auch, ob's da Tools dafür gibt..

Answer 2

[MxGNO]

Schau dir einfach mal den Quelltext an

view-source:https://www.apple.com/de/iphone-12/

Edit: Es ist dieses Video: https://www.apple.com/105/media/ww/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/hero-purple/non-5g/large.mp4

Woher ich das weiß: eigene Erfahrung

Comments

[AnakinZockt]

Später wenn du scrollst scrollen die handys mit deinem mausrad

Answer 3

[Asporc]

Direkt auf der Seite die du verlinkt hast ist nichts interaktives.

Comments

[AnakinZockt]

Klar

[Asporc]

@AnakinZockt

Direkt das Video das da zu sehen ist ist nicht interaktiv.

Wenn ich dann runter scrolle habe ich aber kein Video sondern einzelne Bilder die durch bedienen des Mausrades zum nächsten Bild weiterschalten.

Wo ist da eine interaktives Video ? Ich finde da nichts.

[MrAmazing2]

@Asporc

Er meint die Bilder denke ich. Scroll mal weiter runter, zu ca. 1/3. Das ist schon halbwegs krass. :D

Bei "Super Retina XDR Display Hier kommt OLED."

[Asporc]

@MrAmazing2

Vermutlich aber woher dann diese Überraschung ? Sind ja nur ein paar Bilder die per Tastendruck (bzw. Mausdrehung) weiter geschaltet werden.

[MrAmazing2]

@Asporc

In dem Fall sind es keine "paar Bilder" sondern nur eins, wobei per JavaScript der passende transform: matrix(..,..,..) Wert gesetzt wird.

Answer 4

[fentanylfan]

view-source:https://www.apple.com/de/iphone-12/

Hier findest du den source-code der website. Es ist ein video-container, der dieses Video abspielt:

https://www.apple.com/105/media/ww/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/hero-purple/non-5g/large_2x.mp4

Answer 5

[mompf03231]

Javascript