Bonjour à tous,

Je souhaiterais m'inspirer, pour un site sur lequel je travaille, de deux éléments du portail de l'Université de Montpellier : https://www.umontpellier.fr/recherche.

Savez-vous comment créer ce type de compteur animé sur la droite qui se lance à l'accès à la page ?

De même, comment créer la superposition de backgrounds : blanc/image/blanc ?

Merci de vos lumières Smiley smile
Bonjour,

Je vous remercie, j'y vois plus clair sur les background Smiley smile

Pour le compteur, auriez-vous un exemple de code ?

Bonne journée
Modérateur
Salut,

Regarde donc la doc de la fonction setInterval(); https://www.w3schools.com/jsref/met_win_setinterval.asp

il lui faut deux paramètres obligatoires : setInterval(function, milliseconds)

Une fonction et une délai en milliseconde. La fonctions sera exécutée tout les X millisecondes.
Dans mon exemple j'ai mis 10 ms :
setInterval(function(){ count() }, 10);


Si tu veux accélérer il te suffit de baisser ce nombre. Pour ralentir il faut l'augmenter. Logique non ? Smiley cligne

Bonne aprem
Merci, y a-t-il plus rapide que 1 milliseconde ? Mon compteur va de 0 à 1220 et j'aimerais que le défilement ne prenne que 2 secondes Smiley confus
Je pense que c'est inutile d'aller en deçà de 1 milliseconde Smiley smile Quand on est à 1000 frames / minute c'est déjà très "smooth" (équivaut à un setInterval de 17 millisecondes). Tu devrais plutôt augmenter le step. Au lieu d'incrémenter de 1, tu incrémentes de plus.
Le mieux tout de même c'est de passer par requestAnimationFrame. Tu peux créer une fonction de tweening pour faire une animation moins linéaire et un peu plus jolie.
Tu peux voir ce que ça donne.
Modérateur
niconum a écrit :
Merci, y a-t-il plus rapide que 1 milliseconde ? Mon compteur va de 0 à 1220 et j'aimerais que le défilement ne prenne que 2 secondes Smiley confus

mmmm effectivement c'est un grand chiffre. Je ne sais pas si on peut mettre moins de 1 ms. il y a de toute façon un moment ou ça va décrocher et ça ne pourra pas aller plus vite. Ce que je te propose c'est plutôt d’agrandir le pas. Plutôt que d'ajouter 1 à chaque fois tu peux aller de 10 en 10 : https://jsfiddle.net/Undless/ocjzc0bz/24/

Yordi a écrit :
Jquery possède quelque de facile a utilisé pour faire ça :

Non pas que je crache sur JQuery mais importer une bibliothèque pour lire le quatrième de couverture d'un livre c'est un peu overkill non ?! Smiley lol Le code n'est pas spécialement moins long ou plus clair en plus... Au gout de chacun Smiley smile

Bonne aprem vous deux
Modérateur
_laurent a écrit :
Non pas que je crache sur JQuery mais importer une bibliothèque pour lire le quatrième de couverture d'un livre c'est un peu overkill non ?! Smiley lol Le code n'est pas spécialement moins long ou plus clair en plus... Au gout de chacun Smiley smile


Je suis du même avis que toi, c'était simplement pour donner un autre son de cloche avec un exemple que j'avais déjà sous le coude Smiley cligne
_laurent a écrit :

importer une bibliothèque pour lire le quatrième de couverture d'un livre c'est un peu overkill non ?!


ça vaaaaa, c'est pas comme si tu importé symfony 4 couplé à drupal !

là on parle de jquery, c'est à dire un fichier JS de 85Ko.... y'a pire non ?! Smiley biggol
en plus y'a rien à faire !
tu le mets dans ton head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
et c'est fini.
Modifié par JENCAL (19 Mar 2018 - 16:50)
Modérateur
Yordi a écrit :
Je suis du même avis que toi, c'était simplement pour donner un autre son de cloche avec un exemple que j'avais déjà sous le coude Smiley cligne
Ha ok ca marche Smiley biggrin