Utiliser le Scroll in & Scroll out

Déclencher dans un long-format des actions/animations avec la navigation dans la page

Greg avatar
Written by Greg
Updated over a week ago

Grace aux fonctionnalités “scroll in” et “scroll out”, vous allez pouvoir déclencher des actions en fonction de la navigation dans la page.

Voici les différentes possibilités de RacontR que nous allons aborder ici :

  • Scroll-in

  • Scroll-out

Ce type d’action vous permet, dans un long-format, de lancer des animations dès qu’un élément apparaît ou disparaît à l’écran.

Nous allons donc apprendre à faire jouer ou apparaître des éléments, actions, animations et les faire s’arrêter ou disparaître avec cette méthode !

Vous pouvez l’appliquer avec tous les types de médias possibles sur RacontR (images, sons, textes, vidéos…)

Scroll-in

Avec le scroll-in, vos actions se déclencheront lorsque vous entrerez dans la zone où il est actif.

Appliquez vos actions sur un élément, ici par exemple nous avons décidé que lorsque la scène se trouve au niveau du hotlink, à l’aide de l’action « scroll-in », le titre et le fond de l’intro changent de position (X).

  1. Cliquez sur l’élément

  2. Ajoutez une action au scroll

  3. Choisissez « scroll-in » ou « scroll-out »

Dans l’aperçu, lorsque vous atteignez l’élément sur lequel les actions au scroll-in ont été affectées, vos animations vont se déclencher !

Vous pouvez alors construire toute votre page sur ce principe en positionnant judicieusement vos blocs textes et alors donner une réelle touche d’interactivité à vos projets.


Scroll-out

A l’inverse du scroll-in, le scroll-out déclenchera des actions lorsque l’élément sur lequel elles sont appliquées ne sera plus visible.

  1. Cliquez sur l’élément

  2. Ajoutez une action au scroll

  3. Choisissez « scroll-out »

Toujours dans le même principe, appliquez vos action scroll-out sur le hotlink concerné, puis choisissez de faire disparaître de la scène le titre et le fond.

Did this answer your question?