Petite page interactive dans le cadre d'un exercice de JavaScript : illustration sur Procreate, conception sur Figma et ajout d'un texte décrivant le projet (ci-dessous), intégration en HTML/CSS/Javascript.
Voir la page web (GitHub)
Poke the duck is a small animation I made to practise Procreate and JavaScript.
I designed and animated the “duck” on Procreate; then made it interactive using JavaScript : when you click on it, it moves either to the left or to the right.
The design:
Header: the title + a button to reload the animation
Body: the duck + a “coin” sound and message generated on click + a message telling the user to flip their screens (mobile phones only)
Footer: credits
The settings:
3 media queries : 1024 px (computer screen) / mobile phones, horizontal / mobile phones, vertical
for each scene, the duck moves within a container-div which size depends on the device height and width (here represented by a red rectangle)
I designed and animated the “duck” on Procreate; then made it interactive using JavaScript : when you click on it, it moves either to the left or to the right.
The design:
Header: the title + a button to reload the animation
Body: the duck + a “coin” sound and message generated on click + a message telling the user to flip their screens (mobile phones only)
Footer: credits
The settings:
3 media queries : 1024 px (computer screen) / mobile phones, horizontal / mobile phones, vertical
for each scene, the duck moves within a container-div which size depends on the device height and width (here represented by a red rectangle)
