Templates Wedding

Top 7 key effects

Elegant wedding site with countdown, gallery and RSVP.

Cascade

Hero Fade In Cascade

Where: Hero section

Names, date and CTA appear in cascade with 0.2s delays. Creates poetic, ceremonial effect, like progressive reveal of the announcement.

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

Countdown Timer

Where: Countdown section

A days/hours/minutes/seconds counter counts down in real-time toward the big day. Creates excitement and anticipation among guests visiting the site.

JS setInterval(1000) + real-time DOM update Explore Data & Visualization →

Timeline Interactive

Where: Our Story section

Couple's story steps are laid out along a vertical timeline. Cards rise on hover, making the love journey engaging to explore.

transform: translateY(-5px) + box-shadow on :hover Explore Cards & Layouts →

Photo Gallery Hover

Where: Photo Gallery section

Photos zoom slightly with pink overlay on hover. Invites guests to explore couple's memories with soft, romantic effect.

transform: scale(1.1) + ::after opacity transition 0.4s Explore Gallery & Media →

Floating Floral Pattern

Where: RSVP section (background)

A decorative floral pattern floats slowly in RSVP form background. Adds elegance and romance touch without hindering form readability.

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

Gift Card Elevation

Where: Gift List section

Gift cards rise 10px on hover with soft shadow. Makes gift selection interactive and pleasant, like browsing a catalog.

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

Scroll Indicator Bounce

Where: Hero (bottom of page)

An arrow bounces gently at bottom of hero to invite scrolling. Intuitively guides visitors to content without being too directive.

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