Gezichtsmodule voor wordpress
De gezichtsmodule bestaat uit diverse afbeeldingen waarmee je je eigen gezicht kunt ontwerpen. In CSS heb ik voor elke aparte afbeelding een class gemaakt. Op de HTML pagina heb ik een aantal blok elementen over elkaar heen geplaatst waarbij elk blok een deel van het gezicht was (haar, mond, neus, etc).
De interactie is geregeld met een HTML5 range element. Voor oudere browsers die dit niet ondersteunen heb ik een jQuery plugin als fallback gebruikt welke dezelfde output genereert.
Technieken
Door gebruik te maken van javascript heb ik ervoor gezorgd dat het gezicht realtime wordt aangepast. Het verschuiven van het range element zorgt ervoor dat het blok element wat hierbij hoort van class veranderd naar de volgende of vorige class (ander haar, andere mond). Als je op de kleurvlakjes ernaast klikt veranderd de kleur van het element (huidskleur, haarkleur).
images/cases/gezichtsmodule.png