ScrollShow---Easy-Scroll-Animation

Gérer les apparitions au scroll très simplement

Installation

`<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="js/showScroll.js"></script> `

Démo en ligne

Syntaxe globale

Apparition d'un élément seul

<div class="showScroll [classe de l animation] [classes optionnelles]"></div>

Syntaxe particulière - Objets liés

Apparition de plusieurs éléments pour l'atteinte du scroll d'un élément parent

<div class="showScrollContainer">
<div class="showScrollElement [classe de l animation] [classes optionnelles] [delay] [ordre]"></div>
<div class="showScrollElement [classe de l animation] [classes optionnelles] [delay] [ordre]"></div>
</div>

• delay : si un délai est voulu avant l'apparition d'un élément (et donc entre chaque élément)

  • S'écrit : "delay-" + [valeur de type numérique (ms)]

• ordre : si un ordre particulier d'apparition est voulu (qui n'est pas l'ordre des objets en HTML)

  • S'écrit : "show-" + [position (commence à 1)]
  • Particularité :
    • ne pas mettre 2 éléments à la même position. S'ils soivent apparaitre en même temps, assignez-leur des positions consécutives et un délai de 0
    • ne pas sauter de position (ex. passer de show-1 à show-3 sans qu'aucun élément show-2 existe)

Paramètres par défaut (modifiables dans le fichier js)

delay

• Définition : Délai avant la suppression d'un élément en ms
• Valeurs possibles : valeurs numériques uniquement

hide

• Définition : Où est caché un élément avant d'apparaître
• valeurs possibles :
  • "window" : sort de l'écran
  • "self" : est décalé de lui-même X fois
  • Valeur numérique en px (exemple "200")

times

• Définition : Si hide="self", nombre de fois que l'élément sera décalé de lui-même
• Valeurs possibles : valeurs numériques uniquement

scaleStart

• Définition : Taille initiale d'un élément avant son apparition
• Valeurs possibles : valeurs numériques uniquement

scaleEnd

• Définition : Taille finale d'un élément après son apparition
• Valeurs possibles : valeurs numériques uniquement

fadeStart

• Définition : Opacité initiale d'un élément avant son apparition
• Valeurs possibles : Valeurs numériques entre 0 et 1

fadeEnd

• Définition : Opacité finale d'un élément avant son apparition
• Valeurs possibles : Valeurs numériques entre 0 et 1

tour

• Définition : Nombre de tours que fera un élément en apparaissant en mode "rotation"
• Valeurs possibles : Valeurs numériques
• Sens :
  • Nombre positif : rotation antihoraire
  • Nombre négatif : rotation horaire

anchor

• Définition : Point d'ancrage d'un élément = où va-t-on le détecter
• Valeurs possibles :
  • "top" : Haut de l'élément
  • "center" : Centre de l'élément
  • "bottom" : Bas de l'élément

limit

• Définition : Le point où l'animation de l'élément va se déclencher
• Valeurs possibles :
  • nombre : nombre de pixels à partir du haut de l'écran (ex. "200")
  • "centerWindow" : Centre de la fenêtre
  • "bottomWindow" : Bas de la fenêtre

les transitions

- transitionOpacity : : durée de transition concernant l'opacité - transitionMoveFromLeft : : durée de transition concernant les éléments arrivant par la gauche - transitionMoveFromRight : : durée de transition concernant les éléments arrivant par la droite - transitionTransform : : durée de transition concernant la rotation et la taille

Comment les utiliser ?

• 1 classe obligatoire
• Des classes optionnelles construites de la sorte :
  • [paramètre] + "-" + [valeur]

Je veux que mon élément apparaisse en fondu

• classe obligatoire : "fade"

• classes optionnelles :

  • "fadeStart-"+[valeur]
  • "fadeEnd-"+[valeur]

  Exemple

  <div class="showScroll fade fadeStart-0 fadeEnd-1"></div>

Je veux que mon élément apparaisse en zoom/dézoom

• classe obligatoire : "scale"
• classes optionnelles :
  • "scaleStart-"+[valeur]
  • "scaleEnd-"+[valeur]

Exemple

  `<div class="showScroll scale scaleStart-0 scaleEnd-1"></div>`

Je veux que mon élément apparaisse de droite à gauche

• classe obligatoire : "rightToLeft"
• classes optionnelles :
  • "hide-"+[valeur]
  • "times"+[valeur] (si "hide-self")

Exemple

  `<div class="showScroll rightToLeft hide-self times-2"></div>`

Je veux que mon élément apparaisse de gauche à droite

• classe obligatoire : "leftToRight"
• classes optionnelles :
  • "hide-"+[valeur]
  • "times"+[valeur] (si "hide-self")

Exemple

  `<div class="showScroll leftToRight hide-window"></div>`

Je veux que mon élément apparaisse en tournant

• classe obligatoire : "rotation"
• classes optionnelles :
  • "tour-"+[valeur]

<h4> Exemple </h4>
  
  `<div class="showScroll rotation round-5"></div>`

Vous voulez tout ? C'est possible (si vous n'essayez pas de le faire venir de la gauche et la droite en même temps...

<h4> Exemple </h4>
  
  `<div class="showScroll rotation scale leftToRight fade [+ tous les parametres optionnels qui vont avec]"></div>`

Compatibilité avec votre code CSS

Si vous appliquez des propriétés CSS comme "position", "transform","opacity", ... à un élément et que vous voulez éviter que cela rentre en conflit avec les animations, procédez comme suit :

Votre code de départ

 <div>
        Votre élément
 </div>

Votre code adapté pour les animations

 <div>
 <div class="showScroll">
        Votre élément
 </div>
 </div>