jQuery en Css kunnen heel veel al, zoveel dat sommige simpele dingen over het hoofd worden gezien. Daarom ga ik hier uitleggen hoe je een 'page peel' kan maken zonder flash.

Het zijn eigenlijk maar 3 stappen die je moet volgen om een mooie page peel te maken.

Laten we gewoon direct beginnen en niet een heel achtergrond verhaal gaan opstellen waarin ik uitleg waarom je jQuery moet gebruiken en wat er zo geweldig aan is, want dan kan ik blijven praten!

Oke stap een:

1. we stoppen het 'page peel' effectje in een div container, vrij simpel zou je denken, en dat is het ook!

<a href="#"> <img src="/page_flip.png" alt="" /> Abonneer op onze RSS feed </a>

2. Simpel, is het niet ? Nou zijn we eigenlijk al bijna klaar. wat we nu gaan doen is de positie instellen doormiddelvan CSS met alweer een vrij simpele code. We geven de pageflip div een relatieve positie en de afbeelding die we gaan gebruiken voor het effect een absolute positie om zo mooi hem "over de pagina" te kunnen leggen. hiervoor gebruiken we de volgende code:

#pageflip { position: relative; } #pageflip img { width: 50px; height: 52px; z-index: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic; } #pageflip .msg_block { width: 50px; height: 50px; position: absolute; z-index: 50; right: 0; top: 0; background: url('/subscribe.png') no-repeat right top; text-indent: -9999px; }

3. Dit is allemaal nog vrij simpel. Nu komt het iets lastigere deel, we gaan er nu voorzorgen dat we hem van 50 px grote naar een veel grotere grote maken door middel van jQuery.

$("#pageflip").hover(function() { //On hover... $("#pageflip img , .msg_block").stop() .animate({ width: '307px', height: '319px' }, 500); } , function() { $("#pageflip img").stop() .animate({ width: '50px', height: '52px' }, 220); $(".msg_block").stop() .animate({ width: '50px', height: '50px' }, 200); });

4. Ook hier niet veel rare tekst, je vergroot de grote van page_flip.png van 50px naar 307px in de breedte en het zelfde voor de hoogt, van 52px naar 319px.

Zo zie je maar, er is veel meer mogelijk dan je denkt met met jQuery. Het heeft ook vele voordelen ten opzichte van flash, eigenlijk alleen maar voordelen en geen nadelen!

Mocht je nog vragen hebben, of je wilt meer informatie wat ik voor je kan betekenen neem gerust contact met mij op!