Elle est basée sur un script de ig_design adapté pour UP
{up scroll-indicator}- scroll_indicator: aucun argument
- bg-color: couleur de base du cercle (rgba() ou #RRGGBBAA )
- color: couleur du segment indicateur (rgba() ou #RRGGBBAA )
- size: largeur du segment indicateur (1 à 100)
Style CSS
- id: Identifiant
- css-head (base-css): style ajouté dans le HEAD de la page
Un unique exemple
Observez le cercle autour du curseur de la souris. Il change de couleur en fonction de la position dans la page.
Il est (naturellement) impossible d'avoir plusieurs fois cette action sur une page.
Le shortcode pour la démonstration sur cette page est :
{up scroll-indicator | bg-color= #33669944 | color=#FF0000AA | size=6}Les 3 seules options sont facultatives.
bg-color est la couleur de base du cercle. Sa valeur par défaut est rgba(255,255,255,0.2). Toutes les méthodes pour indiquer une couleur sont autorisées.
color est la couleur du segment de cercle indiquant la position dans la page (#4444 par défaut) et size son épaisseur en pixels (4 par défaut)
Pour color, je vous conseille de mettre une transparence avec une valeur rgba ou un code hexa avec canal alpha. Size peut être compris entre 1 et 100.
Pour les besoins de la démo, l'action lorem nous fournit du faux texte pour remplir la page :
box (1) upactionslist (1) scroll-indicator (1) div (1) lorem (1) jcontent-info (1)