Templates Evenement

Top 7 effets cles

Page evenement avec countdown, speakers et programme.

Rotating Gradient Background

Ou : Arriere-plan du Hero (derriere le countdown)

Deux orbes de couleur (violet + rose) tournent lentement sur 360deg en 40s. Cree une atmosphere vivante et futuriste qui evoque l'energie d'une conference tech.

animation: rotateBg 40s linear infinite + radial-gradient Explorer Backgrounds →

Floating Particles

Ou : 6 particules flottantes dans le Hero

Des points colores montent et descendent en boucle avec des delais decales. Ajoute de la vie au fond sans distraire du contenu principal, imitant l'effervescence d'un evenement.

animation: float 20s ease-in-out infinite + animation-delay Explorer Atmosphere →
42jours

Countdown Timer

Ou : Centre du Hero (Jours, Heures, Minutes, Secondes)

Les chiffres en gradient violet-rose avec des cartes bordees creent un sentiment d'urgence. Chaque carte reagit au hover avec une elevation, rendant le countdown interactif.

background-clip: text + transform: translateY(-4px) au :hover Explorer Data & Visualisation →
Speaker

Speaker Card Lift

Ou : Grille des 4+ speakers avec photo et bio

La carte monte de 10px avec une ombre violette et une barre gradient qui se revele en haut via scaleX. L'easing cubic-bezier(0.175, 0.885, 0.32, 1.275) donne un rebond subtil.

transform: translateY(-10px) + cubic-bezier bounce Explorer Cartes & Layouts →
Programme

Timeline Slide

Ou : Programme/Agenda avec onglets par jour

Chaque item du programme se decale de 8px vers la droite au survol avec un changement de bordure. L'animation staggered par fadeInUp au scroll revele les sessions progressivement.

transform: translateX(8px) + animation: fadeInUp 0.8s Explorer Scroll & Parallax →
Early Bird

Pricing Card Scale

Ou : Grille de 3 cartes de tarifs (badges Early Bird)

La carte "featured" est pre-agrandie a scale(1.05) avec un badge gradient flottant. Technique de nudge visuel qui oriente naturellement le visiteur vers l'offre recommandee.

transform: scale(1.05) + translateY(-8px) au :hover Explorer Cartes & Layouts →
Fade In Up

Staggered Fade In

Ou : Elements du Hero (date, titre, lieu, countdown, CTA)

Chaque element apparait avec un delai incremente de 0.1s (backwards), creant une cascade visuelle qui guide le regard du badge de date vers les boutons d'action.

animation: fadeInUp 0.8s ease + animation-delay stagger Explorer Transitions →