Header met Ken Burns, bij voorkeur PS

[Iris17]

hoi,

ik wil graag een header voor een website maken met een Ken Burns effect. Het liefst zou ik dat in Photoshop doen en dan het geheel als image in DW CS5 zetten. Maar, heeft iemand een tip hoe ik dit doe? Of het eventueel anders doe? Ben al een paar dagen het internet aan het afstruinen maar vind het juiste antwoord niet.

bvd

Iris

 

[csshunter]

Hoi Iris,

ik wil graag een header voor een website maken met een Ken Burns effect. Het liefst zou ik dat in Photoshop doen en dan het geheel als image in DW CS5 zetten.

Even opgezocht wat dat nu weer is.
Wikipedia: inzoomen of "pannen" over een statische afbeelding, zodat je de suggestie krijgt dat er 3D gefilmd is.
Als het inderdaad één image moet blijven en geen filmpje moet worden (bv. met Flash ofzo), dan kan je het niet in Photoshop doen.
Om de beweging er in te krijgen zal op de pagina wat javascript gebruikt moeten worden.
Ik zie een paar mogelijkheden:

• De afbeelding er als background-image in zetten, en dan laten "pannen" (van links naar rechts of vice versa) door met javascript de background-positie dynamisch te wijzigen.
  Voorbeeldje hier: home.tiscali.nl/developerscorner/port-hole/porthole-nl.htm#javascript
• De afbeelding er als voorgrond-image in zetten (gecentreerd, zonder opgave van de hoogte, en met {overflow:hidden;} van de #header waar ie in zit), en dan laten zoomen door met javascript de breedte dynamisch te wijzigen. De hoogte zoomt dan automatisch mee.
• Als zowel een zoom als een pan moet gebeuren, zou het ook met een voorgrond-img kunnen, maar dan met toevoeging van de via javascript gestuurde clip-eigenschap voor het pannen.

Met vriendelijke groet,
CSShunter

 

[Naarling]

[*]Als zowel een zoom als een pan moet gebeuren, zou het ook met een voorgrond-img kunnen, maar dan met toevoeging van de via javascript gestuurde clip-eigenschap voor het pannen.
[/LIST]
Met vriendelijke groet,
CSShunter

Dat zou trouwens ook met een achtergrondafbeelding kunnen door background-size dmv javascript aan te passen. Helaas werkt dat dan weer niet in IE8 en lager

 

[csshunter]

Ja; ook oudere versies van andere browsers doen het nog niet. - Testpagina voor deze css3-eigenschap: www.css3.info/preview/background-size/. Intussen doet Chrome (vs.12) het wel.

 

[Naarling]

Ja; ook oudere versies van andere browsers doen het nog niet.

Klopt, maar gebruikers van andere browsers updaten veel regelmatiger dan IE gebruikers (al was het maar omdat ze geen nieuw OS nodig hebben om een nieuwe browser te krijgen)

 

[csshunter]

Yeps, de OS gaat voor de baat uit bij M$.