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 :
- est occaecat
- Ut fugiat
- sed cupidatat laboris sit incididunt
- consequat. pariatur. anim do ullamco
- aute ex eiusmod velit in
- ut do non
- id nisi
- Excepteur culpa nulla et
- id veniam, culpa
- velit labore qui
- ut voluptate
- labore eiusmod nisi magna non
- ut pariatur. magna eu
- id dolor do commodo reprehenderit
- Ut exercitation incididunt
- voluptate anim Ut aliquip
- elit, sed magna ut veniam,
- labore mollit magna
- voluptate anim
- reprehenderit exercitation esse minim aliquip
- anim ut fugiat
- magna minim
- est sint in dolore
- Duis ea fugiat minim
- deserunt nostrud tempor nulla sint
- labore Ut ea in
- tempor Excepteur exercitation
- occaecat veniam,
box (1) upactionslist (1) scroll-indicator (1) div (1) lorem (1) jcontent-info (1)