Interactie met form onder alphatransparante PNG

[DePhille]

Hallo,

Ik ben momenteel bezig met het implementeren van een "Contact" formulier op een portfolio website. Ik had als idee om een brief uit een enveloppe te laden sliden bij het scrollen van de pagina. Hiervoor heb ik drie layers (absolute gepositioneerde DIVs) over elkaar gezet, in volgorde:

• envelopeBack (met een achtergrondafbeelding)
• envelopeContents (bevat het formulier)
• envelopeFront (met een achtergrondafbeelding)

De envelopeFront DIV staat over de envelopeContents DIV, waardoor normaliter alle interactie met envelopeContents onmogelijk is (wordt opgevangen door envelopeFront). Dit kan opgelost worden door gebruik te maken van pointer-events, maar dit is niet compatibel met IE en Opera (geen enkele versie).

Mijn vraag is dus of er iemand een idee heeft hoe deze oplossing compatibel gemaakt kan worden met IE (liefst 8+, maar 9+ is ook goed) en Opera. Suggesties voor een totaal andere aanpak om hetzelfde effect te bekomen zijn uiteraard ook welkom!

Ik heb de bestaande code op jsFiddle gezet: http://jsfiddle.net/9c7CM/

Alvast bedankt voor het lezen!

[_Erikje_]

misschien geen technische oplossing die je wilt maar ik zou gewoon de animatie instarten wanneer de gebruiker de envelop in het zicht krijgt. Ik kwam er pas na lezen van de JS achter dat hij een scroll heeft, die de contents uit de envelop haalt. Dit is heel gemakkelijk te doen cross browser.

Je wilt niet dat mensen je contactformulier niet snappen

[TheNephilim]

Ik snap niet waarom je envelopeFront niet gewoon wat minder hoog maakt. Verschil in hoogte kun je eventueel opvangen met een nieuwe div die wel 'onder' het form zit.

[DePhille]

Bedankt voor de reacties en tips!
Ik heb inderdaad besloten te werken met een automatische animatie in plaats van het scrollen:
- Duidelijker
- Compatibiliteit met iOS (scroll events werken daar anders)
- Geen noodzaak voor pointer-events o.i.d.
Voor de animatie gebruik ik dezelfde structuur. Als de brief helemaal uit de envelope geschoven is zet ik envelopeFront als achtergrond afbeelding en hide de envelopeFront div.