Fondu

EH TOI LÀ !

Cette page est utilisée pour le fonctionnement du site,

MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.



Qu'est-ce que c'est que ça ?

Il s'agit d'un component qui fait apparaître le contenu de la page proprement morceau par morceau plutôt que tout en même temps.

Utilisation

Pour un fonctionnement sur n'importe quel wiki :

[[include :fondationscp:component:fade-in speed=2]]

speed=1: tout apparaît (doucement) en même temps (paramètre par défaut)
speed=2: chaque élément apparaît 0,5 seconde après le dernier élément apparu
speed=3: chaque élément apparaît 0,25 seconde après le dernier élément apparu

Avertissements

L'effet de fondu ne s'appliquera qu'aux éléments issus directement de #page-content. Il ne s'appliquera pas aux éléments imbriqués les uns dans les autres (par exemple, ceux qui sont à l'intérieur d'un bloc de citation ou d'une div) ou à d'autres parties de la page (par exemple, la barre latérale supérieure).

(Vous pouvez utiliser cette caractéristique à votre avantage si d'autres animations sur votre page entrent en conflit en mettant simplement l'élément animé problématique dans une div.)

Il ne s'applique également qu'aux 35 premiers éléments de la page, tout le reste apparaît en même temps. Cela permet de charger la page progressivement lorsqu'un lecteur l'ouvre, mais si ce dernier souhaite faire défiler la page jusqu'en bas, il peut le faire sans avoir à attendre très longtemps.


@media screen and (prefers-reduced-motion: no-preference) {
  #page-title, #breadcrumbs, #page-content > * {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
  }
}
 
#page-title { animation-delay: 0s; }
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,30px);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}
 
:root {
  --fade-in-delay: 0s;
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(16) { animation-delay: calc(16 * var(--fade-in-delay)); }
#page-content > :nth-child(17) { animation-delay: calc(17 * var(--fade-in-delay)); }
#page-content > :nth-child(18) { animation-delay: calc(18 * var(--fade-in-delay)); }
#page-content > :nth-child(19) { animation-delay: calc(19 * var(--fade-in-delay)); }
#page-content > :nth-child(20) { animation-delay: calc(20 * var(--fade-in-delay)); }
#page-content > :nth-child(21) { animation-delay: calc(21 * var(--fade-in-delay)); }
#page-content > :nth-child(22) { animation-delay: calc(22 * var(--fade-in-delay)); }
#page-content > :nth-child(23) { animation-delay: calc(23 * var(--fade-in-delay)); }
#page-content > :nth-child(24) { animation-delay: calc(24 * var(--fade-in-delay)); }
#page-content > :nth-child(25) { animation-delay: calc(25 * var(--fade-in-delay)); }
#page-content > :nth-child(26) { animation-delay: calc(26 * var(--fade-in-delay)); }
#page-content > :nth-child(27) { animation-delay: calc(27 * var(--fade-in-delay)); }
#page-content > :nth-child(28) { animation-delay: calc(28 * var(--fade-in-delay)); }
#page-content > :nth-child(29) { animation-delay: calc(29 * var(--fade-in-delay)); }
#page-content > :nth-child(30) { animation-delay: calc(30 * var(--fade-in-delay)); }
#page-content > :nth-child(31) { animation-delay: calc(31 * var(--fade-in-delay)); }
#page-content > :nth-child(32) { animation-delay: calc(32 * var(--fade-in-delay)); }
#page-content > :nth-child(33) { animation-delay: calc(33 * var(--fade-in-delay)); }
#page-content > :nth-child(34) { animation-delay: calc(34 * var(--fade-in-delay)); }
#page-content > :nth-child(35) { animation-delay: calc(35 * var(--fade-in-delay)); }
#page-content > :nth-child(n+35) { animation-delay: calc(36 * var(--fade-in-delay)); }
:root {
   --fade-in-delay: 0.5s;
}
:root {
  --fade-in-delay: 0.25s;
}
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License