28172 sujets

CSS et mise en forme, CSS3

[Résolu] Compteur

bonjour,
quelqu'un aurait une idée
pour un petit compteur qui s'incrémente de 1 toutes les x secondes
et çà en css (pas en js j'ai déja)

merci
merci beaucoup, çà roule.

mais:
1802 lignes code css

6 lignes en js
var i=0;
		function augmenter() {
			i++;
			document.getElementById("timer").innerHTML = i;
		}
		setInterval("augmenter()", 1000);


<p id="timer">0</p>


donc je vais sans doute rester en js
Modifié par drphilgood (22 Dec 2018 - 10:06)
Modérateur
Bonjour,
drphilgood a écrit :

mais:
1802 lignes code css


C'est clair que ça aurait pu être plus court.

Je me réveille peut-être un peu tard, mais en voici un de mon cru simplifié : https://jsfiddle.net/8r521puv/

Amicalement,
Modifié par parsimonhi (22 Dec 2018 - 11:05)
Modérateur
Bonjour,

Je viens aussi d'analyser le code https://codepen.io/jakealbaugh/pen/ImEtj indiqué par allan00958. Si on retire les instructions préfixées par -webkit- qui sont sans doute inutiles à la veille de 2019, si on retire la keyframes counter qui semble ne servir à rien, et si on écrit le code des keyframes de manière un peu plus compacte, le code est en fait assez court (environ 80 lignes) :

body {
  font-family: Menlo, Andale Mono, monospace;
  background: #f0f0f0;
  color: #444;
  text-shadow: 1px 1px 0px white;
}

h1 {
  margin: 0;
  font-size: 1.4em;
  text-align: center;
}

.container {
  width: 50%;
  margin: 4em auto;
}

#counter {
  height: 140px;
  width: 180px;
  overflow: hidden;
  position: relative;
  font-size: 140px;
  line-height: 140px;
  text-align: center;
  margin: 70px auto;
  display: block;
}
#counter::before, #counter::after {
  position: absolute;
  white-space: pre;
  width: 80px;
}
#counter::before {
  content: "0 \a 1 \a 2 \a 3 \a 4 \a 5";
  left: 10px;
  animation: count_tens 60s linear infinite;
}
#counter::after {
  content: "0 \a 1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9";
  right: 10px;
  animation: count_secs 10s linear infinite;
}

@keyframes count_tens {
  0% {transform: translateY(0px);}
  16.666% {transform: translateY(0px);}
  16.6666666667% {transform: translateY(-140px);}
  33.3326666667% {transform: translateY(-140px);}
  33.3333333333% {transform: translateY(-280px);}
  49.9993333333% {transform: translateY(-280px);}
  50% {transform: translateY(-420px);}
  66.666% {transform: translateY(-420px);}
  66.6666666667% {transform: translateY(-560px);}
  83.3326666667% {transform: translateY(-560px);}
  83.3333333333% {transform: translateY(-700px);}
  99.9993333333% {transform: translateY(-700px);}
}

@keyframes count_secs {
  0% {transform: translateY(0px);}
  9.999% {transform: translateY(0px);}
  10% {transform: translateY(-140px);}
  19.999% {transform: translateY(-140px);}
  20% {transform: translateY(-280px);}
  29.999% {transform: translateY(-280px);}
  30% {transform: translateY(-420px);}
  39.999% {transform: translateY(-420px);}
  40% {transform: translateY(-560px);}
  49.999% {transform: translateY(-560px);}
  50% {transform: translateY(-700px);}
  59.999% {transform: translateY(-700px);}
  60% {transform: translateY(-840px);}
  69.999% {transform: translateY(-840px);}
  70% {transform: translateY(-980px);}
  79.999% {transform: translateY(-980px);}
  80% {transform: translateY(-1120px);}
  89.999% {transform: translateY(-1120px);}
  90% {transform: translateY(-1260px);}
  99.999% {transform: translateY(-1260px);}
}


Amicalement,
Modérateur
Bonjour,

Mon code et son code font en fait la même chose à quelques détails cosmétiques près, la seule véritable différence est qu'il fait l'animation de la propriété transform: translateY() alors que je fais l'animation avec la propriété top (ce qui est selon moi plus efficace).

Amicalement,
Modérateur
Bonjour,

C'est beau ! bravo !

Amicalement,

EDIT : y a un petit problème d'alignement vertical. Essaie d'augmenter le height et le line-height du counter à 1.2em au lieu de 1em.
Modifié par parsimonhi (22 Dec 2018 - 14:55)
Modérateur
Bonjour,

Le petit décalage vertical avec certains chiffres provient du fait que la police est trop grande pour le height du compteur (qui n'était que de 1em, soit trop faible).

J'ai fait une nouvelle version où j'ai mis des % dans les keyframes (donc indépendant de ce qu'on choisit comme line-heigth pour le compteur). C'est plus robuste.

Un code possible :
#Positioncompteur {
  position: absolute;
  text-align:left;
  z-index: 10;
  left:44.5%;
  top:68.5%;
}
@keyframes count_secs {
from {top: 0;}
9.99% {top: 0;}
10% {top: -100%;}
19.99% {top: -100%;}
20% {top: -200%;}
29.99% {top: -200%;}
30% {top: -300%;}
39.99% {top: -300%;}
40% {top: -400%;}
49.99% {top: -400%;}
50% {top: -500%;}
59.99% {top: -500%;}
60% {top: -600%;}
69.99% {top: -600%;}
70% {top: -700%;}
79.99% {top: -700%;}
80% {top: -800%;}
89.99% {top: -800%;}
90% {top: -900%;}
99.99% {top: -900%;}
to {top: 0;}
}
@keyframes count_tens {
from {top: 0;}
16.66% {top: 0;}
16.67% {top: -100%;}
33.33% {top: -100%;}
33.34% {top: -200%;}
49.99% {top: -200%;}
50.00% {top: -300%;}
66.66% {top: -300%;}
66.67% {top: -400%;}
83.33% {top: -400%;}
83.34% {top: -500%;}
99.99% {top: -500%;}
to {top: 0;}
}
#counter {
font-size: 1em;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
position: relative;
color: yellow;
overflow: hidden;
}
#counter:before {
content: "0 1 2 3 4 5 6 7 8 9";
display: block;
position: absolute;
left: 0;
width: 50%;
animation: count_tens 360s linear infinite;
text-align: right;
}
#counter:after {
content: "0 1 2 3 4 5 6 7 8 9";
display: block;
position: absolute;
right: 0;
width: 50%;
animation: count_secs 60s linear infinite;
text-align: left;
}

Amicalement,
Sujet clos
Aller à