Déclencher une animation CSS3

Salut à tous,

alors, j'aimerais savoir comment faire pour déclencher une animation CSS3 et avec quel langage.
Par contre, je ne parle pas d'un déclenchement dans le temps, mais plutôt dans l'espace. Par exemple, une animation (ou un esenbmel d'animation) se déclenche lorsque l'utilisateur se trouve à 3450px en bas du site (site sur une page).

Voici un site qui décrit parfaitement ce que je voudrais faire :
http://www.reverenddanger.com/

L'utilisation du JS me paraît inévitable...

Cordialement,
Modifié par valtiel7 (24 Nov 2011 - 14:26)

Hello, oui c'est inévitable!
Le plus simple est d'ajouter une class sur un élément à un moment précis (comme par exemple quand l'utilisateur se trouve à 3450px ) et en CSS d'avoir défini les animations sur les éléments à l'intérieur de l'objet qui contient cette classe.

Par exemple, voici un bloc HTML qui contient une image (l'image s'affiche)

Avant le déclenchement JS

<div class="anim">
     <img src="" alt="" />
</div>

Après le déclenchement JS, une classe a été ajoutée

<div class="anim go">
     <img src="" alt="" />
</div>

Du coup, le CSS est appliqué et l'animation sur l'image se lance.

.anim.go img{
     animation: ... ;
}

Oui sans Js impossible.
Voir ce lien: Stackoverflow

Salut,

désolé de répondre si tardivement...

Merci pour vos réponses en tout cas, je vais me pencher sur ton lien jmlapam et tes indications vdo93

a+

Salut,

je voudrais relancer mon topic (oui, un autre...) car je ne sais toujours pas comment déclencher une animation CSS avec JS

Je suis allé voir sur Stackoverflow, y a un tas de questions posées mais aucune solution trouvée et ne connaissant pas du tout JS... je ne compte pas apprendre le JS de suite, mais au moins savoir comment déclencher un évènement en fonction de la position du visiteur sur ma page.

Sachant que mon site sera sur une seule page, on peut par exemple dire qu'à 2500px il y a une animation CSS à déclencher.

Merci

Je me permet de relancer le sujet...