Numérotation style Badoo

Version imprimable

17/05/2011, 19h02
eddynamique

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 !
17/05/2011, 19h20
NoSmoking

Bonjour,
il s'agit visiblement d'une animation sur base de rotation d'images.
17/05/2011, 19h23
andry.aime

Bonsoir,

C'est un site à la Facebook :mouarf: :koi:
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:

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+.
17/05/2011, 20h28
Invité

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
18/05/2011, 12h39
eddynamique

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 !
18/05/2011, 17h33
Invité

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

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:

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>

18/05/2011, 21h07
eddynamique

Merci bien à vous deux !

Tout est très clair maintenant pour moi !

Encore une fois, merci beaucoup d'avoir pris du temps pour moi !
19/05/2011, 16h30
eddynamique

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

Merci encore !!