Compteur et backgrounds multiples

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

Salut,

Pour le compteur je dirait une boucle toute bête en Js qui va de 0 au nombre choisi en affichant le nombre toutes les x milliseconde.

Pour le background c'est une image toute bête avec un background-attachment: fixed; si je me plante pas https://www.w3schools.com/cssref/pr_background-attachment.asp
Modifié par _laurent (22 Feb 2018 - 17:02)

Bonjour,

Si tu veux utiliser des backgrounds mixant plusieurs éléments :

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arri%C3%A8re-plans

https://developer.mozilla.org/fr/docs/Web/CSS/Utilisation_de_d%C3%A9grad%C3%A9s_CSS

Si tu veux des backgrounds CSS3 complexes :

http://lea.verou.me/css3patterns/
Modifié par thierry (23 Feb 2018 - 00:51)

Bonjour,

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

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

Bonne journée

J'avais dans la tête un truc dans le genre : https://jsfiddle.net/Undless/ocjzc0bz/17/

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 ?

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

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

Je pense que c'est inutile d'aller en deçà de 1 milliseconde 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.

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

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 ?! Le code n'est pas spécialement moins long ou plus clair en plus... Au gout de chacun

Bonne aprem vous deux

_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 ?! Le code n'est pas spécialement moins long ou plus clair en plus... Au gout de chacun

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

_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 ?!
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)

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

Ha ok ca marche