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 !
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 !
Bonjour,
il s'agit visiblement d'une animation sur base de rotation d'images.
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êteet 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.
Code : Sélectionner tout - Visualiser dans une fenêtre à part select count(*) from NomTableUser
A+.
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
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 !
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
effectivement, en jouant sur le changement de la position du backgroundj'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
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>
Merci bien à vous deux !
Tout est très clair maintenant pour moi !
Encore une fois, merci beaucoup d'avoir pris du temps pour moi !
Oups, j'avais oublié le thread comme résolu, c'est corrigé !
Merci encore !!
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager