Scroll indicator
Une action toute simple pour afficher la position dans la page à l'aide d'un cercle autour du curseur.
Elle est basée sur un script de ig_design adapté pour UP
 

🆙 scroll_indicator : Affiche la position dans la page dans un cercle autour du curseur

Cliquer pour lire la documentation

syntaxe {up scroll-indicator}
@version: UP-2.9 @author: Lomart @license: GNU/GPLv3 @credit: script de ig_design @tags: editor
  • 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 :

Service temporarily offline, please contact Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

 

Pour info, cette page utilise 6 action(s) :
box (1) upactionslist (1) scroll-indicator (1) div (1) lorem (1) jcontent-info (1)