Templates Mariage

Top 7 effets cles

Site de mariage elegant avec countdown, galerie et RSVP.

Cascade

Hero Fade In Cascade

Ou : Section Hero

Les prenoms, la date et le CTA apparaissent en cascade avec des delais de 0.2s. Cree un effet poetique et ceremonieux, comme un devoilement progressif du faire-part.

animation: fadeInUp 1s ease + animation-delay: 0.2s/0.4s/0.6s Explorer Scroll & Parallax →
42jours
08hrs
15min

Countdown Timer

Ou : Section Compte a rebours

Un compteur jours/heures/minutes/secondes decompte en temps reel vers le jour J. Cree de l'excitation et de l'anticipation chez les invites qui visitent le site.

JS setInterval(1000) + mise a jour DOM temps reel Explorer Data & Visualisation →

Timeline Interactive

Ou : Section Notre Histoire

Les etapes de l'histoire du couple sont disposees le long d'une timeline verticale. Les cartes s'elevent au survol, rendant le parcours amoureux engageant a parcourir.

transform: translateY(-5px) + box-shadow au :hover Explorer Cartes & Layouts →

Galerie Photo Hover

Ou : Section Galerie Photos

Les photos zooment legerement avec un overlay rose au survol. Invite les invites a explorer les souvenirs du couple avec un effet doux et romantique.

transform: scale(1.1) + ::after opacity transition 0.4s Explorer Galerie & Media →

Motif Floral Flottant

Ou : Section RSVP (arriere-plan)

Un motif floral decoratif flotte lentement en arriere-plan du formulaire RSVP. Ajoute une touche d'elegance et de romantisme sans gener la lisibilite du formulaire.

animation: float 20s infinite + position: absolute + opacity Explorer Atmosphere →
🎁

Gift Card Elevation

Ou : Section Liste de Cadeaux

Les cartes cadeaux s'elevent de 10px au survol avec une ombre douce. Rend la selection de cadeaux interactive et agreable, comme feuilleter un catalogue.

transform: translateY(-10px) + box-shadow au :hover Explorer Hover & Interactions →

Scroll Indicator Bounce

Ou : Hero (bas de page)

Une fleche rebondit doucement en bas du hero pour inviter au scroll. Guide intuitivement les visiteurs vers le contenu sans etre trop directif.

animation: bounce 2s infinite + transform: translateY(10px) Explorer Scroll & Parallax →