Animatie in HTML maken

[mathijs_]

Hallo allemaal,

Voor een website wil ik het volgende:

Je hebt 2 afbeeldingen. Die liggen over elkaar. De bedoeling is om nu te kunnen gummen over de bovenliggende afbeelding zodat de onderste afbeelding zichtbaar wordt. De bedoeling is dat er dan ook inderdaad de gumstrepen op de afbeeldingen komen (dus het gekras, en daardoorheen zie je de onderliggende afbeelding).

De bedoeling is dat dit uiteindelijk moet gaan werken op een iPhone. Dus alleen html/javascript.

Heeft iemand een idee hoe dit voor elkaar te krijgen?

[Bosmonster]

Je kunt dit effect bereiken met wat trucjes middels background-position:fixed en een flinke dosis clonen.

[McVirusS]

Flash is heel goed in dit soort dingen, maar ja, geen iPhone support hè .

Misschien dat je met canvas ook een heel eind moet kunnen komen?

[justahuman]

canvas, een boel javascript dan kom je er wel. je kan bv een raster maken en dan met de backgroundim en backgroundpos en wanneer je dan drukt de rasters op de bovenste laag doorzichtig worden en die er om heen voor 50 %.

[BtM909]

Moet het gekras ook echt realistisch zijn? Wellicht met wat creatief CSS gebruik en een kleine dosis javascript moet 't ook wel te doen zijn.

Je doet een image positioneren (eventueel in 4 delen voor een "realistischer" effect) met daarboven je gekras. Je kras image is een CSS sprite map die steeds meer blootgeeft van het plaatje (of 't kwadrant) eronder.

Aan de hand van je events die je wilt supporten (http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html) ga je vervolgens je sprite map verplaatsen

[frickY]

Hou je er rekening mee dat jouw gum-beweging op een iDevice doorgaans 'scrollen' betekend?

[Bosmonster]

Dit is trouwens een beetje wat ik bedoelde:

http://bosmonster.nl/html/lekker-kleuren/

Let even niet om de rest eromheen. Heb even snel een facebook app omgebouwd die ik eerder had gemaakt

Werkt, in tegenstelling tot canvas, ook prima op IE7+ (alleen niet rond, dat is gedaan met border-radius). En de performance wordt wat minder

[ Voor 30% gewijzigd door Bosmonster op 15-06-2011 18:53 . Reden: even hosting veranderd.. ]

[HenkEisDS]

Ga je een krasloten applicatie maken? Slim!

[Anoniem: 393864]

frickY schreef op woensdag 15 juni 2011 @ 18:42:
Hou je er rekening mee dat jouw gum-beweging op een iDevice doorgaans 'scrollen' betekend?

je zult er inderdaad op de een of andere manier voor moeten zorgen dat de gestures ingevangen worden in je animatie zodat deze niet als scrollbewegingen gezien gaan worden

[mathijs_]

Klopt, daar zijn wel trucjes voor te bedenken. Denk dat dat niet een groot probleem gaat worden.

@Bosmonster: Ziet er top uit. Zoiets bedoelde ik inderdaad. Ik zie dat het gebruik maakt van jQuery. Zelf maak ik gebruik van Mootools, maar heb nu al een veel beter idee hoe dit aan te pakken.
Het mooie ervan is dat het ook gewoon in IE7 werkt, want daar moet het ook in gaan werken.

[ Voor 24% gewijzigd door mathijs_ op 15-06-2011 20:11 ]

[ZpAz]

Bosmonster schreef op woensdag 15 juni 2011 @ 18:45:
Dit is trouwens een beetje wat ik bedoelde:

http://bosmonster.nl/html/lekker-kleuren/

Let even niet om de rest eromheen. Heb even snel een facebook app omgebouwd die ik eerder had gemaakt

Werkt, in tegenstelling tot canvas, ook prima op IE7+ (alleen niet rond, dat is gedaan met border-radius). En de performance wordt wat minder

Je hebt een JS bestandje wat er voor zorgt dat veel Canvas ook in IE6 en hoger werkt.

http://code.google.com/p/explorercanvas/

Heb het zelf ook wel eens gebruikt, en het werkt prima.

[Bosmonster]

Dat is performance-wise wel een stuk verstandiger waarschijnlijk (al weet ik niet hoe explorercanvas werkt). Tis alleen wel een heel stuk meer werk om te maken.

Dat explorercanvas is trouwens wel van 2009, dus nog ver voor IE9. Ben wel benieuwd of die daar goed in werkt.

[ Voor 26% gewijzigd door Bosmonster op 15-06-2011 23:43 ]