Div doormidden hakken

[RonaldGJ]

Hallo mensen,

Is er hier iemand die ervaring heeft met het doormidden hakken van bijvoorbeeld een div element?
Ik heb een fullsize background image (een gewone img tag, dus geen background-image), en die wil ik als er ergens op geklikt wordt, dat die horizontaal door midden wordt gesneden en dat beide helften naar boven en naar beneden schuiven en dat er in het midden een lege nieuwe witte content div ontstaat.

Ik hoop dat dit duidelijk omschreven is en dat iemand mij kan helpen!

Alvast bedankt.

Gr. Ronald!

 

[Naarling]

Ik denk dat dat alleen maar gaat lukken door te beginnen met twee halve afbeeldingen. Je kunt met CSS geen foto's bewerken.

 

[RonaldGJ]

Dat begrijp ik. Maar misschien zijn er CSS-tricks ofzo, die het effect wel kunnen creëren.

 

[Naarling]

Niet dat ik weet. Je kunt wel overgangen animeren met CSS (behalve in IE9 en ouder) maar het opsplitsen van die afbeeldingen kan niet met CSS.

 

[csshunter]

Hoihoi,
Ja, bij zo'n powerpoint-achtige animatie zal het voor crossbrowser toepassing een javascript-oefening gaan worden.

Wat eventueel wel met CSS zou kunnen, is toch één grote afbeelding gebruiken die je dan twee keer plaatst: 1 keer in de bovenhelft-div, en 1 keer in de onderhelft-div (met een hidden overflow van de div's wordt dan de niet gebruikte helft aan het gezicht onttrokken), maar daar zie ik het voordeel niet van.

• Wegens simultane verbindingen zal het inladen van twee halfjes sneller gaan dan de download van de onversneden grote afbeelding.
• Alleen als het bv. om 5000 verschillende afbeeldingen gaat die uit een database geplukt worden kan het voordeel (voor de webbouwer) opleveren: dan hoeven er geen 5000 images getweeëndeeld te worden (hoeveel nadeel voor de bezoeker = hoeveel minder paginasnelheid dat oplevert zal van de afbeelding afhangen).

En heb je de images wel gevraagd of ze het leuk vinden om onbarmhartig doormidden gehakt, gesneden of geknipt te worden?

Met vriendelijke groet,
CSShunter