Hur är de här animationerna gjorda hos Apple?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2004

Hur är de här animationerna gjorda hos Apple?

http://www.apple.com/mac-pro/

Finns det någon mjukvara där man enkelt kan syra upp det? Att "manuellt" bygga denna känner jag tar en stund :/

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jul 2016

Det är css transitions och transform, enklast högerklickar du och väljer inspektera på det som är intressant i Chrome och går sedan uppåt och markerar element tills du stöter på de css regler som styr det hela

Dessa verkar mest troliga:

transition: transform 0.8s ease-out, height 0.2s linear;
transform: translate3d(0px, 43.26px, 0px);

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2004

@jnils: eh, ja. Så långt är jag med. Men har någon gjort detta manuellt eller är det någon mjukvara som är "allmänt känd" som löser, va man nu ska kalla det. "Elementet med de mer krångliga animationerna"?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jul 2016

Jag tror det är gjort manuellt men det finns ju ett gäng olika program som kan skapa html animationer men inget jag själv har använt.

Till exempel
https://www.adobe.com/se/products/edge-animate.html
https://www.google.com/webdesigner/

Det finns också ett gäng js/css ramverk som du kan använda som WOW.js, JQuery UI, Animate.css och massa andra.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2004

@jnils: yes, har koll på dem men inte använt själv. Mest rensat upp och försökt göra andras "smarta" Edge renderingar responsiva. Vilket är "kul"

Men inser att jag nog mer menar själva datorn och när den vinklas osv, hur är det gjort?

Trädvy Permalänk
Medlem
Plats
127.0.0.1
Registrerad
Sep 2005

Inte för att jag har någon vidare koll på detta. Men det är ju inte vidare svårt att lista ut.
Texten är säkerligen animerad "manuellt" via kod.
Tänker du på datorns animationer så är ju detta gjort i ett 3D program, dom har byggt upp datorn i 3D, alla delar osv. Sedan har dom skapat animationerna där, gjort ett långt klipp av det hela som sedan styckats i mindre klipp som sedan spelas upp när du trycker på skärmen.

Anledningen till att bakgrunden blir grå runt datorn när den är animerad är för att klippen är så hårt komprimerade.

Chassi: Cooler Master Silencio, Skärm: AOC AG271QX (16:9/2560*1440/1ms/144hz), GPU: GTX 1080Ti, CPU: Ryzen 1600X, HDD: 2TB , SSD: Kingston 480GB, PSU: Corsair TX V2 750W, Mobo: MSI X370 Krait, RAM: 16GB G.Skill Ripjaws @ 3200, Mus: Logitech MX Master & G400, Matta: Steelseries QcK Heavy, Tbord: QPAD MK-50, Hörlurar: Beyerdynamic DT770 PRO 80ohm, Superlux HD-668B OS: Win10Pro. AI: Roland Quad-Capture, Monitorer: Yamaha HS7 x2.
Citera när ni svarar! :)

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2004

@Wh1spY: det du säger låter vettigt och så tror jag det också är gjort. Men kan du screenshotta var du ser dessa videoklipp i koden?

Trädvy Permalänk
Medlem
Plats
127.0.0.1
Registrerad
Sep 2005
Skrivet av -=*ThE_cRoW*=-:

@Wh1spY: det du säger låter vettigt och så tror jag det också är gjort. Men kan du screenshotta var du ser dessa videoklipp i koden?

Vad jag vet så har man aldrig kunnat se all kod "live" genom att inspektera en sida. Det är ju fortfarande massa kod som inte syns för oss innan den blivit "executad"? Eller? Var länge sedan jag höll på med sådant hära så någon kanske kan rätta mig här.

Klippen i sig kunde jag inte hitta i koden när jag inspekterade sidan med Chrome. Men som du ser i denna skärmdump så ändras koden för varje gång man klickar. Det finns i vilket fall en Div med id:t "videocontainer" som är den div som kommer inehålla videoklippen. Sedan ser du ju att det finns en div som heter "stillcontainer" vilket förmodligen är stillbilden på datorn när den inte är animerad (för att få bättre kvalitet) när all info-text syns.
Längre ned i koden finns det exempelvis massa divs med IDs så som "intro", "computing", "processor". Så det fungerar ju så som jag nämnde tidigare.

Edit*
Efter att ha grävt ytterligare då jag blev nyfiken! Så hittade jag videoklippet:

videocontainer > innerHTML:
<video src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fe..."></video>"

Det är alltså inga småklipp utan ett enda långt klipp som helt enkelt pausas på något sätt och byts ut mot en stillbild när den kommit till rätt ställe i videon. Fråga mig inte hur detta fungerar, hax helt enkelt.!

Stillbilder:
stillcontainer > innerHTML:
<img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_1 clip crossFade" style="opacity: 0;">↵ <img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_2 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_3 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_4 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_5 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_6 clip visible crossFade"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_7 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_8 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_9 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_10 clip crossFade"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_13 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_14 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_15 clip">"

Chassi: Cooler Master Silencio, Skärm: AOC AG271QX (16:9/2560*1440/1ms/144hz), GPU: GTX 1080Ti, CPU: Ryzen 1600X, HDD: 2TB , SSD: Kingston 480GB, PSU: Corsair TX V2 750W, Mobo: MSI X370 Krait, RAM: 16GB G.Skill Ripjaws @ 3200, Mus: Logitech MX Master & G400, Matta: Steelseries QcK Heavy, Tbord: QPAD MK-50, Hörlurar: Beyerdynamic DT770 PRO 80ohm, Superlux HD-668B OS: Win10Pro. AI: Roland Quad-Capture, Monitorer: Yamaha HS7 x2.
Citera när ni svarar! :)

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2004

@Wh1spY: tack, jag är med och de ar inte så magiskt som jag kanske hoppats på att det skulle vara

Den är mao gjord typ så här.
1. Videoklipp visas.
2. Landar på sista bildrutan som byts ut mot en bild för att få bättre kvalitet då videon i sig är hårt komprimerad.
3. Content som text och animationer runt om är helt i HTML med CSS animationer och JavaScript triggers.

Edit: Tack för vidioklippshittandet.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jul 2016

Ja det sköts av scriptet http://images.apple.com/v/mac-pro/home/b/scripts/overview.js

<ul> listan till höger på sidan har <li> element med data attribut som sköter index och vilken punkt i videon den ska söka till, click sköts av _handleClick funktionen i scriptet som läser data attributen och söker fram i videon. Till exempel data-seek-index="3" data-seek-time="9" för "Processor".

Det hela försvåras något av att all kod är minimerad men det går att hitta allt där. Inget magiskt

Trädvy Permalänk
Medlem
Plats
Linköping
Registrerad
Mar 2010

@-=*ThE_cRoW*=- @jnils
Det går att använda Chrome (och säkert Firefox och Safari också) för att få minifierade javascriptfiler läsbara.
Klicka på dom gulmarkerade måsvingarna på bilden: http://imgur.com/a/YpKOc

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2004

@jnils: magin jag letade efter var ett lättare sätt/mjukvara att trycka ihop allt detta Manuellt inga konstigheter men tar tid, speciellt då jag vill ha det responsivt.

@Magnetize: nice, missat den featuren.

Tack alla för svaren, jag är nöjd här.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Maj 2016

Parallax scrolling är tekniken du letar efter.
https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2004

@creativejeff: nja, inte riktigt va. Men tror vi avhandlat detta ämne och har koll på vad som ska göras, om nu kunden har budget för en sådan utsvävning vill säga.