Flipbook

Flipbook

Flipbook

Créons ensemble un Flipbook pour une carte de restaurant ! Il sera réalisé en HTML, CSS, et Javascript, et utilisera la bibliothèque StPageFlip.js.

Dans la première version, les contenus affichés seront du HTML, et dans la seconde, ce seront des images (qu’il vous faudra ajouter).

La librairie StPageFlip.js est disponible ici  et le CDN à inclure (seulement le JS) est disponible ici.

Dans cet exemple le rendu est bien meilleur en écran large, mais il est possible d’améliorer le CSS pour que le HTML s’affiche bien aussi pour les mobiles.

Consultez cette vidéo pour tous les détails :

Pop-ups (Modals)

Pop-ups (Modals)

Pop-ups (modals)

Créons ensemble un système de pop-ups, de 2 manières ! Dans la première version, le bouton comprend un écouteur d’évènement, dans la seconde, le bouton comprend des data-attributes.

Consultez cette vidéo pour tous les détails :

Fonds dégradés aléatoires

Fonds dégradés aléatoires

Fonds dégradés aléatoires

Créons ensemble un fond coloré aléatoire pour notre page ! D’abord un fond uni aux couleurs prédéfinies, puis un fond uni de n’importe qu’elle couleur, puis un fond bicolore (dégradé) aléatoire.

Consultez cette vidéo pour tous les détails :

Redirections automatiques

Redirections automatiques

Horloge custom, style LCD

Créons ensemble cette redirection automatique au bout de 5 secondes, vers le site de votre choix (l’URL est à préciser dans le javascript) !

Consultez cette vidéo pour tous les détails :

Horloge custom, style LCD

Horloge custom, style LCD

Horloge custom, style LCD

Créons ensemble cette horloge, au style écran LCD mais personnalisable selon vos goûts !

Consultez cette vidéo pour tous les détails :

Image survolable

Image survolable

Image survolable

Créons ensemble des images qui changent au survol et se rétablissent quand on ne les survole plus. 3 versions !

Consultez cette vidéo pour tous les détails :