Panorera bilder med HTML5/CSS3?

Permalänk
Medlem

Panorera bilder med HTML5/CSS3?

Hej,

Jag håller för tillfället på att göra om min hemsida från grunden till en responsiv HTML5-sida (är ännu bara i designstadiet, men ska snart börja koda), och insåg just ett visst problem jag lär stöta på.

Då jag är fotograf är min sida till för att huvudsakligen visa upp mina bilder, vilket är varför jag tänkt ha en sorts bildspel på förstasidan. Det som skiljer bildspelet från vanliga är att jag vill kunna panorera och zooma i bilderna, och ha en loopad animering (kan självklart sätta ihop en video om ni behöver ett exempel), och undrar om det går att animera med HTML5/CSS3. Jag skulle självklart kunna göra en video av det och använda <video>-taggen, men problemet där blir både filstorlek, och även att det blir just en video, vilket alltid märks väldigt tydligt på mobila enheter. Jag vill istället ha detta "bildspel" liggandes i bakgrunden medan menyn fungerar som vanligt.

När jag kollar igenom min text själv inser jag att det kanske inte är jättelätt att förstå, så jag slänger ihop en video imorrn på hur jag tänker mig att förstasidan ska vara!

Är tacksam för all hjälp!

MVH
Leo

Edit: kan det kanske funka med något JavaScript? blir det då för långsamt på mobila enheter?

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Permalänk
Medlem

JavaScript är svaret.
Det finns två lösningar, antingen skaffar du ett färdigt bibliotek som har de funktionerna du vill ha.
Annars skriver du det själv i JavaScript, jag kan rekommendera JQuery, underlättar mycket, och kanske tom. har de funktionerna som du vill ha, eller att det finns ett plugin färdigt för det.

Om sidan blir långsam på mobiler är svårt att säga.
Det finns så många olika mobiler (smartphones då), vissa med mer processorkraft, vissa med mindre.
Tänk såhär, du kan alltid anpassa en mobil variant av sidan, som har mindre funktioner bara, om du upptäcker att någon del av JavaScriptet är mycket processkrävande. Men försök skriva så effektiv kod som möjligt.

Permalänk

Kanske CSS3 animations skulle kunna fungera för dig?
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_...
Kom ihåg att detta inte fungerar inte fungerar i Internet Explorer 6-9 (IE10 fungerar!)

Annars är jQuery ett bra val för animationer.
http://api.jquery.com/animate/

Permalänk
Medlem
Skrivet av NickoB:

JavaScript är svaret.
Det finns två lösningar, antingen skaffar du ett färdigt bibliotek som har de funktionerna du vill ha.
Annars skriver du det själv i JavaScript, jag kan rekommendera JQuery, underlättar mycket, och kanske tom. har de funktionerna som du vill ha, eller att det finns ett plugin färdigt för det.

Om sidan blir långsam på mobiler är svårt att säga.
Det finns så många olika mobiler (smartphones då), vissa med mer processorkraft, vissa med mindre.
Tänk såhär, du kan alltid anpassa en mobil variant av sidan, som har mindre funktioner bara, om du upptäcker att någon del av JavaScriptet är mycket processkrävande. Men försök skriva så effektiv kod som möjligt.

Skrivet av Sephinator:

Kanske CSS3 animations skulle kunna fungera för dig?
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_...
Kom ihåg att detta inte fungerar inte fungerar i Internet Explorer 6-9 (IE10 fungerar!)

Annars är jQuery ett bra val för animationer.
http://api.jquery.com/animate/

Verkar bli JS för min del, hittade nämligen ett skript från ett iPhone-tema som har en rörlig bakgrund, och lyckades få det att fungera en gång, men sen gick det inte igen, oavsett hur mycket jag än tryckte cmd+z... Men men, får ta och kolla djupare på koden!

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye