Numérotation style Badoo

**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+.

Invité · 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 !

Invité · 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

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>

Numérotation style Badoo

JavaScript

Vue hybride

Discussions similaires

Partager

Partager