Numérotation style Badoo [Résolu]

eddynamique · 17/05/2011, 19h02

Bonjour,

Je m'explique : j'aimerais faire apparaitre un nombre qui évoluera en direct et j'aimerais le faire apparaitre de la même façon que sur la page d'accueil de badoo.com

Avez-vous des idées pour réaliser ce genre de chose ?

Merci à vous !

NoSmoking · 17/05/2011, 19h20

Bonjour,
il s'agit visiblement d'une animation sur base de rotation d'images.

andry.aime · 17/05/2011, 19h23

Bonsoir,

C'est un site à la Facebook

Ok, pour être sérieux; tu lances une requête ajax à chaque intervalle de temps (une fonction récursive avec un setTimeout ou seulement un setInterval), du coté serveur, tu faits seulement une requête

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

select count(*) from NomTableUser

et envoyer le résultat vers la page. Pour le style, tu utilises des images à la place de chaque chiffre. Recherche sur le forum AJAX, des discussions proches sont résolue.

A+.

mekal · 17/05/2011, 20h28

apres analyse il s'agit d'un background pour lequel on modifie sa position en jouant sur les class une prise de tete a faire il doit y avoir environ 3*10 ce qui donne 30 class car a chaque changement de chiffre on joue sur 3 class

eddynamique · 18/05/2011, 12h39

Merci pour vos réponse !

Premièrement, ce n'est pas la récupération du nombre dans la BD en Ajax qui me pose problème, de ce côté pas de soucis, mais merci quand même andry !

NoSmoking, tu parles de rotation d'image, ce serai donc un effet JS qui gérerait l'animation ? J'aimerai bien que tu m'en dises plus !

Mekal, je ne suis pas bien sur de te suivre, en gros tu penses que pour chaque changement de chiffre, c'est une animation image par image au niveau de background ?

Merci !

mekal · 18/05/2011, 17h33

j'ai regarder avec firebug et a chaque changement de chiffre on voit la class se modifier et j'ai meme intercepter l'image qui contient toutes les animations

http://images.badoo.com/2846/-/-/css...ter_people.png

NoSmoking · 18/05/2011, 19h33

Citation:

j'ai regarder avec firebug et a chaque changement de chiffre on voit la class se modifier et j'ai meme intercepter l'image qui contient toutes les animations

effectivement, en jouant sur le changement de la position du background

action

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Modif position background...]</title>
<style type="text/css">
.mp_cnt{background-color:#fff;white-space:nowrap;}
.mp_cnt_d{position:relative;display:inline-block;width:40px;height:58px;background:url(http://images.badoo.com/2846/-/-/i/counter_people.png) no-repeat 0 0;}
.mp_cnt_dot,.mp_cnt_comma{width:7px;height:7px;overflow:hidden;margin:51px 1px 0 0;}
.mp_cnt_d_f{position:absolute;top:100%;left:0;width:40px;height:12px;background:url(http://images.badoo.com/2846/-/-/i/counter_people.png) no-repeat -80px -580px;}
.mp_cnt_d_0{background-position:0 0;}
.mp_cnt_d_0_1{background-position:-40px 0;}
.mp_cnt_d_0_2{background-position:-80px 0;}
.mp_cnt_d_1{background-position:0 -58px;}
.mp_cnt_d_1_1{background-position:-40px -58px;}
.mp_cnt_d_1_2{background-position:-80px -58px;}
.mp_cnt_d_2{background-position:0 -116px;}
.mp_cnt_d_2_1{background-position:-40px -116px;}
.mp_cnt_d_2_2{background-position:-80px -116px;}
.mp_cnt_d_3{background-position:0 -174px;}
.mp_cnt_d_3_1{background-position:-40px -174px;}
.mp_cnt_d_3_2{background-position:-80px -174px;}
.mp_cnt_d_4{background-position:0 -232px;}
.mp_cnt_d_4_1{background-position:-40px -232px;}
.mp_cnt_d_4_2{background-position:-80px -232px;}
.mp_cnt_d_5{background-position:0 -290px;}
.mp_cnt_d_5_1{background-position:-40px -290px;}
.mp_cnt_d_5_2{background-position:-80px -290px;}
.mp_cnt_d_6{background-position:0 -348px;}
.mp_cnt_d_6_1{background-position:-40px -348px;}
.mp_cnt_d_6_2{background-position:-80px -348px;}
.mp_cnt_d_7{background-position:0 -406px;}
.mp_cnt_d_7_1{background-position:-40px -406px;}
.mp_cnt_d_7_2{background-position:-80px -406px;}
.mp_cnt_d_8{background-position:0 -464px;}
.mp_cnt_d_8_1{background-position:-40px -464px;}
.mp_cnt_d_8_2{background-position:-80px -464px;}
.mp_cnt_d_9{background-position:0 -522px;}
.mp_cnt_d_9_1{background-position:-40px -522px;}
.mp_cnt_d_9_2{background-position:-80px -522px;}
.mp_cnt_dot{background-position:-32px -631px;}
.mp_cnt_comma{background-position:-73px -631px;}
</style>
</head>
<body>
<div id="counter" class="mp_cnt mp_t">
<span class="mp_cnt_d mp_cnt_d_1"></span>
<span class="mp_cnt_d mp_cnt_d_1_1"></span>
<span class="mp_cnt_d mp_cnt_d_1_2"></span>
<span class="mp_cnt_d mp_cnt_d_2"></span>
<span class="mp_cnt_d mp_cnt_d_2_1"></span>
<span class="mp_cnt_d mp_cnt_d_2_2"></span>
<span class="mp_cnt_d mp_cnt_d_3"></span>
<span class="mp_cnt_d mp_cnt_d_3_1"></span>
<span class="mp_cnt_d mp_cnt_d_3_2"></span>
<span class="mp_cnt_d mp_cnt_d_4"></span>
<span class="mp_cnt_d mp_cnt_d_4_1"></span>
<span class="mp_cnt_d mp_cnt_d_4_2"></span>
<span class="mp_cnt_d mp_cnt_d_5"></span>
<span class="mp_cnt_d mp_cnt_d_5_1"></span>
<span class="mp_cnt_d mp_cnt_d_5_2"></span>
<span class="mp_cnt_d mp_cnt_d_6"></span>etc...
</div>
</body>
</html>

eddynamique · 18/05/2011, 21h07

Merci bien à vous deux !

Tout est très clair maintenant pour moi !

Encore une fois, merci beaucoup d'avoir pris du temps pour moi !

eddynamique · 19/05/2011, 16h30

Oups, j'avais oublié le thread comme résolu, c'est corrigé !

Merci encore !!

17/05/2011, 19h02	#1
eddynamique Invité de passage Inscription : février 2010 Messages : 21 Détails du profil Informations forums : Inscription : février 2010 Messages : 21 Points : 3 Points : 3	Numérotation style Badoo Bonjour, Je m'explique : j'aimerais faire apparaitre un nombre qui évoluera en direct et j'aimerais le faire apparaitre de la même façon que sur la page d'accueil de badoo.com Avez-vous des idées pour réaliser ce genre de chose ? Merci à vous !
	00

17/05/2011, 19h23	#3
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 128 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 128 Points : 7 270 Points : 7 270	Bonsoir, C'est un site à la Facebook Ok, pour être sérieux; tu lances une requête ajax à chaque intervalle de temps (une fonction récursive avec un setTimeout ou seulement un setInterval), du coté serveur, tu faits seulement une requête Code : Sélectionner tout - Visualiser dans une fenêtre à part select count(*) from NomTableUser et envoyer le résultat vers la page. Pour le style, tu utilises des images à la place de chaque chiffre. Recherche sur le forum AJAX, des discussions proches sont résolue. A+.
	00

17/05/2011, 20h28	#4
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	apres analyse il s'agit d'un background pour lequel on modifie sa position en jouant sur les class une prise de tete a faire il doit y avoir environ 3*10 ce qui donne 30 class car a chaque changement de chiffre on joue sur 3 class __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

18/05/2011, 17h33	#6
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	j'ai regarder avec firebug et a chaque changement de chiffre on voit la class se modifier et j'ai meme intercepter l'image qui contient toutes les animations http://images.badoo.com/2846/-/-/css...ter_people.png __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

17/05/2011, 19h20	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 933 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 933 Points : 4 756 Points : 4 756	Bonjour, il s'agit visiblement d'une animation sur base de rotation d'images.
	00

18/05/2011, 12h39	#5
eddynamique Invité de passage Inscription : février 2010 Messages : 21 Détails du profil Informations forums : Inscription : février 2010 Messages : 21 Points : 3 Points : 3	Merci pour vos réponse ! Premièrement, ce n'est pas la récupération du nombre dans la BD en Ajax qui me pose problème, de ce côté pas de soucis, mais merci quand même andry ! NoSmoking, tu parles de rotation d'image, ce serai donc un effet JS qui gérerait l'animation ? J'aimerai bien que tu m'en dises plus ! Mekal, je ne suis pas bien sur de te suivre, en gros tu penses que pour chaque changement de chiffre, c'est une animation image par image au niveau de background ? Merci !
	00

18/05/2011, 21h07	#8
eddynamique Invité de passage Inscription : février 2010 Messages : 21 Détails du profil Informations forums : Inscription : février 2010 Messages : 21 Points : 3 Points : 3	Merci bien à vous deux ! Tout est très clair maintenant pour moi ! Encore une fois, merci beaucoup d'avoir pris du temps pour moi !
	00

19/05/2011, 16h30	#9
eddynamique Invité de passage Inscription : février 2010 Messages : 21 Détails du profil Informations forums : Inscription : février 2010 Messages : 21 Points : 3 Points : 3	Oups, j'avais oublié le thread comme résolu, c'est corrigé ! Merci encore !!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email