Doodle animé : logo Google 7 sept 2010

S
smorge
WRInaute occasionnel
Bonjour, je viens de découvrir le logo Google du jour et je suis épaté, franchement ils font de plus en plus fort ! C'est fabuleux comme effet... avec quoi c'est fait ?
 
Boloky
Boloky
WRInaute occasionnel
Re: logo google 7 sept

Je me demandais à quoi ce logo pouvait bien correspondre. Car je n'arrive pas à cliquer dessus comme d'habitude !
Très joli effet. Joyeux anniversaire google !!
 
WebRankInfo
WebRankInfo
Olivier Duffez (admin)
Membre du personnel
En effet, une fois de plus Google fait parler de lui en modifiant son logo, cette fois-ci avec une version animée assez sophistiquée.

Le Doodle du jour sur Google

Le Doodle du 7 septembre 2010 sur Google : des balles animées
Les lettres qui composent le mot Google sont constituées de petites balles qui bougent et sautent dans tous les sens dès qu'on s'approche d'elles avec le curseur de la souris.

Elles s'animent aussi si vous cliquez simplement avec la souris, par exemple dans le champ de recherche.

Egalement, les balles bougent si vous déplacez la fenêtre de votre navigateur (elles bougent dans la même direction que le mouvement de la fenêtre).

On ne connait pas encore la signification exacte de ce nouveau logo. Certains pensent qu'il s'agit de fêter l'anniversaire de la création de Google (dont la date officielle n'existe pas ! il en existe plusieurs en septembre). On verra s'il y aura d'autres Doodles pour l'anniversaire ou si c'était pour annoncer autre chose...

Cette animation n'est pas faite en HTML5 mais en JavaScript (+ HTML bien entendu). en tout cas sans JS ça ne marche plus

Si vous ne la voyez pas, changez de navigateur ! Installez par exemple Chrome ou Firefox !
 
spout
spout
WRInaute accro
J'ai juste vu ce logo sur google.fr et google.co.uk, sur google.be et google.ca c'est toujours le logo classique.
 
R
rudddy
WRInaute passionné
c'est en jquery, chaque rond de couleur est un div à part, et ils ont codé un sacré calculateur pour faire bouger tout ça synchro !
 
A
ap34df
WRInaute occasionnel
Salut,

Pour ceux qui veulent jouer, voici les bouts de codes intéressants...

Code: 
<script>window.google={kEI:"wx-GTLG4Gc7n4wbKu7GSCw",kEXPI:"17259,17315,23628,23756,24878,25834,25901",kCSI:{e:"17259,17315,23628,23756,24878,25834,25901",ei:"wx-GTLG4Gc7n4wbKu7GSCw",expi:"17259,17315,23628,23756,24878,25834,25901"},ml:function(){},pageState:"#",kHL:"fr",time:function(){return(new Date).getTime()},log:function(b,d,c){var a=new Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}));g[f]=a;c=c||"/gen_204?atyp=i&ct="+b+"&cad="+d+"&zx="+google.time();a.src=c;e.li=f+1},lc:[],li:0,j:{en:1,l:function(){google.fl=true},e:function(){google.fl=true},b:location.hash&&location.hash!="#",bv:3,pl:[],mc:0,sc:0.5},Toolbelt:{}};(function(){for(var d=0,c;c=["ad","bc","p","pa","zd","ac","pc","pah","ph","sa","spf","xx","zc","zz"][d++];)(function(a){google.j[a]=function(){google.j.pl.push([a,arguments])}})(c)})();
window.google.sn="webhp";window.google.timers={load:{t:{start:(new Date).getTime()}}};try{window.google.pt=window.gtbExternal&&window.gtbExternal.pageT();}catch(u){}window.google.jsrt_kill=1;
</script>

<body>


<style>#hplogo{position:relative;width:0;margin:0 auto;right:190px;height:160px}.particle{position:absolute;z-index:-1}.circle{-moz-border-radius:160px;-webkit-border-radius:160px;-khtml-border-radius:160px;border-radius:160px}
</style>



<div id="hplogo"><div style="background-color: rgb(237, 157, 51); height: 18.083px; width: 18.083px; left: 202.288px; top: 77.8354px;" class="particle circle"></div><div style="background-color: rgb(212, 77, 97); height: 18.077px; width: 18.077px; left: 347.743px; top: 82.8301px;" class="particle circle"></div><div style="background-color: rgb(79, 122, 242); height: 18.0823px; width: 18.0823px; left: 256.241px; top: 68.7757px;" class="particle circle"></div><div style="background-color: rgb(239, 154, 30); height: 18.0753px; width: 18.0753px; left: 214.279px; top: 58.8852px;" class="particle circle"></div><div style="background-color: rgb(73, 118, 243); height: 18.0759px; width: 18.0759px; left: 265.251px; top: 35.829px;" class="particle circle"></div><div style="background-color: rgb(38, 146, 48); height: 18.0847px; width: 18.0847px; left: 299.821px; top: 78.2881px;" class="particle circle"></div><div style="background-color: rgb(31, 158, 44); height: 18.076px; width: 18.076px; left: 293.808px; top: 59.2354px;" class="particle circle"></div><div style="background-color: rgb(28, 72, 221); height: 18.0762px; width: 18.0762px; left: 44.9099px; top: 88.291px;" class="particle circle"></div><div style="background-color: rgb(42, 86, 234); height: 18.0765px; width: 18.0765px; left: 267.761px; top: 52.1918px;" class="particle circle"></div><div style="background-color: rgb(51, 85, 216); height: 18.0808px; width: 18.0808px; left: 73.0734px; top: 82.6853px;" class="particle circle"></div><div style="background-color: rgb(54, 182, 65); height: 18.078px; width: 18.078px; left: 294.27px; top: 5.84402px;" class="particle circle"></div><div style="background-color: rgb(46, 93, 239); height: 18.0782px; width: 18.0782px; left: 234.747px; top: 62.1845px;" class="particle circle"></div><div style="background-color: rgb(213, 55, 71); height: 16.0929px; width: 16.0929px; left: 353.07px; top: 41.6349px;" class="particle circle"></div><div style="background-color: rgb(235, 103, 111); height: 16.0848px; width: 16.0848px; left: 335.839px; top: 52.2986px;" class="particle circle"></div><div style="background-color: rgb(249, 177, 37); height: 16.0777px; width: 16.0777px; left: 207.724px; top: 41.1425px;" class="particle circle"></div><div style="background-color: rgb(222, 54, 70); height: 16.0891px; width: 16.0891px; left: 320.841px; top: 70.3194px;" class="particle circle"></div><div style="background-color: rgb(42, 89, 240); height: 16.09px; width: 16.09px; left: 7.71719px; top: 59.777px;" class="particle circle"></div><div style="background-color: rgb(235, 156, 49); height: 16.0001px; width: 16.0001px; left: 180px; top: 81.0001px;" class="particle circle"></div><div style="background-color: rgb(196, 23, 49); height: 16.0005px; width: 16.0005px; left: 145.998px; top: 65.0003px;" class="particle circle"></div><div style="background-color: rgb(216, 32, 56); height: 16.0002px; width: 16.0002px; left: 144.999px; top: 49.0002px;" class="particle circle"></div><div style="background-color: rgb(95, 138, 248); height: 16.0763px; width: 16.0763px; left: 245.73px; top: 34.142px;" class="particle circle"></div><div style="background-color: rgb(239, 161, 30); height: 16.0011px; width: 16.0011px; left: 168.996px; top: 69.0015px;" class="particle circle"></div><div style="background-color: rgb(46, 85, 226); height: 16.0801px; width: 16.0801px; left: 273.07px; top: 98.6874px;" class="particle circle"></div><div style="background-color: rgb(65, 103, 228); height: 16.0793px; width: 16.0793px; left: 248.223px; top: 119.774px;" class="particle circle"></div><div style="background-color: rgb(11, 153, 26); height: 16.0835px; width: 16.0835px; left: 293.741px; top: 41.2106px;" class="particle circle"></div><div style="background-color: rgb(72, 105, 227); height: 16.0823px; width: 16.0823px; left: 266.732px; top: 114.19px;" class="particle circle"></div><div style="background-color: rgb(48, 89, 227); height: 16px; width: 16px; left: 78px; top: 67px;" class="particle circle"></div><div style="background-color: rgb(16, 161, 29); height: 16.0784px; width: 16.0784px; left: 293.753px; top: 23.1937px;" class="particle circle"></div><div style="background-color: rgb(207, 64, 85); height: 16px; width: 16px; left: 117px; top: 83px;" class="particle circle"></div><div style="background-color: rgb(205, 67, 89); height: 16.0005px; width: 16.0005px; left: 136.998px; top: 80.0005px;" class="particle circle"></div><div style="background-color: rgb(40, 85, 234); height: 16.0823px; width: 16.0823px; left: 14.2413px; top: 71.2237px;" class="particle circle"></div><div style="background-color: rgb(202, 39, 60); height: 16.0782px; width: 16.0782px; left: 330.878px; top: 80.288px;" class="particle circle"></div><div style="background-color: rgb(38, 80, 225); height: 16.0904px; width: 16.0904px; left: 25.069px; top: 81.645px;" class="particle circle"></div><div style="background-color: rgb(74, 123, 249); height: 16.0832px; width: 16.0832px; left: 232.722px; top: 46.1836px;" class="particle circle"></div><div style="background-color: rgb(61, 101, 231); height: 16.0882px; width: 16.0882px; left: 73.3527px; top: 12.9966px;" class="particle circle"></div><div style="background-color: rgb(244, 120, 117); height: 12.0847px; width: 12.0847px; left: 326.802px; top: 35.2746px;" class="particle circle"></div><div style="background-color: rgb(243, 103, 100); height: 12.0782px; width: 12.0782px; left: 319.184px; top: 45.7469px;" class="particle circle"></div><div style="background-color: rgb(29, 78, 235); height: 12.0917px; width: 12.0917px; left: 256.233px; top: 80.7168px;" class="particle circle"></div><div style="background-color: rgb(105, 139, 241); height: 12.0758px; width: 12.0758px; left: 244.246px; top: 87.8224px;" class="particle circle"></div><div style="background-color: rgb(250, 198, 82); height: 12.0888px; width: 12.0888px; left: 193.656px; top: 32.0908px;" class="particle circle"></div><div style="background-color: rgb(238, 82, 87); height: 12px; width: 12px; left: 97px; top: 56px;" class="particle circle"></div><div style="background-color: rgb(207, 42, 63); height: 12px; width: 12px; left: 105px; top: 75px;" class="particle circle"></div><div style="background-color: rgb(86, 129, 245); height: 12.0868px; width: 12.0868px; left: 41.6733px; top: 3.88285px;" class="particle circle"></div><div style="background-color: rgb(69, 119, 246); height: 12.0827px; width: 12.0827px; left: 10.2882px; top: 27.1624px;" class="particle circle"></div><div style="background-color: rgb(247, 179, 38); height: 12.0011px; width: 12.0011px; left: 165.996px; top: 55.001px;" class="particle circle"></div><div style="background-color: rgb(43, 88, 232); height: 12.0897px; width: 12.0897px; left: 266.278px; top: 87.7729px;" class="particle circle"></div><div style="background-color: rgb(250, 203, 94); height: 12.0788px; width: 12.0788px; left: 178.304px; top: 33.919px;" class="particle circle"></div><div style="background-color: rgb(224, 46, 61); height: 12px; width: 12px; left: 100px; top: 65px;" class="particle circle"></div><div style="background-color: rgb(241, 109, 111); height: 12.0805px; width: 12.0805px; left: 342.867px; top: 32.293px;" class="particle circle"></div><div style="background-color: rgb(80, 123, 242); height: 12.0795px; width: 12.0795px; left: 59.317px; top: 5.023px;" class="particle circle"></div><div style="background-color: rgb(86, 131, 247); height: 12.0751px; width: 12.0751px; left: 27.2804px; top: 9.10764px;" class="particle circle"></div><div style="background-color: rgb(49, 88, 226); height: 12.0784px; width: 12.0784px; left: 232.759px; top: 116.201px;" class="particle circle"></div><div style="background-color: rgb(240, 105, 108); height: 12px; width: 12px; left: 123px; top: 32px;" class="particle circle"></div><div style="background-color: rgb(55, 105, 246); height: 12.081px; width: 12.081px; left: 5.7339px; top: 37.815px;" class="particle circle"></div><div style="background-color: rgb(96, 132, 239); height: 12.0765px; width: 12.0765px; left: 63.2689px; top: 62.1458px;" class="particle circle"></div><div style="background-color: rgb(42, 92, 244); height: 12.0789px; width: 12.0789px; left: 5.7459px; top: 48.8128px;" class="particle circle"></div><div style="background-color: rgb(244, 113, 110); height: 12px; width: 12px; left: 108px; top: 36px;" class="particle circle"></div><div style="background-color: rgb(248, 194, 71); height: 12.0894px; width: 12.0894px; left: 169.353px; top: 42.9408px;" class="particle circle"></div><div style="background-color: rgb(231, 70, 83); height: 12px; width: 12px; left: 137px; top: 37px;" class="particle circle"></div><div style="background-color: rgb(236, 65, 71); height: 12.087px; width: 12.087px; left: 318.251px; top: 57.7594px;" class="particle circle"></div><div style="background-color: rgb(72, 118, 241); height: 10.0777px; width: 10.0777px; left: 225.748px; top: 100.181px;" class="particle circle"></div><div style="background-color: rgb(239, 92, 92); height: 10px; width: 10px; left: 101px; top: 46px;" class="particle circle"></div><div style="background-color: rgb(37, 82, 234); height: 10.0815px; width: 10.0815px; left: 225.748px; top: 108.207px;" class="particle circle"></div><div style="background-color: rgb(71, 121, 247); height: 10.0833px; width: 10.0833px; left: 16.7112px; top: 16.8337px;" class="particle circle"></div><div style="background-color: rgb(75, 120, 241); height: 10.0757px; width: 10.0757px; left: 231.794px; top: 93.2217px;" class="particle circle"></div></div>








<script>(function(){try{if(!google.doodle)google.doodle={};var a=200,g=-200,j=-200,k,l,m,n=0,o=0,p=0,q=35,r,s=[],t,u,v;google.doodle.init=function(){if(!v&&window.location.href.indexOf("#")==-1){v=true;if(t=document.getElementById("hplogo")){google.j&&google.j.en&&w(100,x,function(){return google.rein&&google.dstr});w(100,y,function(){return google.listen});w(100,z,function(){return google.browser})}}};var w=function(b,c,d){if(d())c();else b< 200&&window.setTimeout(function(){w(b+1,c,d)},b)},x=function(){if(!google.doodle.n){google.doodle.n= true;google.rein.push(google.doodle.init);google.dstr.push(A)}},y=function(){google.listen(document,"mousemove",B)},B=function(b){a=200;g=b.clientX-t.offsetLeft;j=b.clientY-t.offsetTop},C=function(){return[u?window.screenLeft:window.screenX,u?window.screenTop:window.screenY,document.body.clientWidth]},z=function(){u=google.browser.engine.IE&&google.browser.engine.version!="9.0";s=[D(202,78,9,"ed9d33"),D(348,83,9,"d44d61"),D(256,69,9,"4f7af2"),D(214,59,9,"ef9a1e"),D(265,36,9,"4976f3"),D(300,78,9,"269230"), D(294,59,9,"1f9e2c"),D(45,88,9,"1c48dd"),D(268,52,9,"2a56ea"),D(73,83,9,"3355d8"),D(294,6,9,"36b641"),D(235,62,9,"2e5def"),D(353,42,8,"d53747"),D(336,52,8,"eb676f"),D(208,41,8,"f9b125"),D(321,70,8,"de3646"),D(8,60,8,"2a59f0"),D(180,81,8,"eb9c31"),D(146,65,8,"c41731"),D(145,49,8,"d82038"),D(246,34,8,"5f8af8"),D(169,69,8,"efa11e"),D(273,99,8,"2e55e2"),D(248,120,8,"4167e4"),D(294,41,8,"0b991a"),D(267,114,8,"4869e3"),D(78,67,8,"3059e3"),D(294,23,8,"10a11d"),D(117,83,8,"cf4055"),D(137,80,8,"cd4359"),D(14, 71,8,"2855ea"),D(331,80,8,"ca273c"),D(25,82,8,"2650e1"),D(233,46,8,"4a7bf9"),D(73,13,8,"3d65e7"),D(327,35,6,"f47875"),D(319,46,6,"f36764"),D(256,81,6,"1d4eeb"),D(244,88,6,"698bf1"),D(194,32,6,"fac652"),D(97,56,6,"ee5257"),D(105,75,6,"cf2a3f"),D(42,4,6,"5681f5"),D(10,27,6,"4577f6"),D(166,55,6,"f7b326"),D(266,88,6,"2b58e8"),D(178,34,6,"facb5e"),D(100,65,6,"e02e3d"),D(343,32,6,"f16d6f"),D(59,5,6,"507bf2"),D(27,9,6,"5683f7"),D(233,116,6,"3158e2"),D(123,32,6,"f0696c"),D(6,38,6,"3769f6"),D(63,62,6,"6084ef"), D(6,49,6,"2a5cf4"),D(108,36,6,"f4716e"),D(169,43,6,"f8c247"),D(137,37,6,"e74653"),D(318,58,6,"ec4147"),D(226,100,5,"4876f1"),D(101,46,5,"ef5c5c"),D(226,108,5,"2552ea"),D(17,17,5,"4779f7"),D(232,93,5,"4b78f1")];var b=C();k=b[0];l=b[1];m=b[2];E()},A=function(){google.unlisten(document,"mousemove",B);r&&window.clearTimeout(r);if(s)for(var b=0,c;c=s[b++];)c.m()},E=function(){var b=C(),c=b[0],d=b[1];b=b[2];n=c-k;o=d-l;p=b-m;k=c;l=d;m=b;a=Math.max(0,a-2);c=true;for(d=0;b=s[d++];){b.update();if(c)c=b.i}q= c?250:35;r=window.setTimeout(E,q)},D=function(b,c,d,h){return new F(b,c,d,h)},F=function(b,c,d,h){this.x=this.o=b;this.y=this.p=c;this.k=this.h=d;b=100;this.a=b*(Math.random()-0.5);this.c=b*(Math.random()-0.5);this.l=3+Math.random()*98;this.r=0.1+Math.random()*0.4;this.e=0;this.g=1;this.i=false;this.d=document.createElement("div");this.d.className="particle";this.style=this.d.style;h="#"+h;if(u){this.d.innerHTML=".";this.style.fontFamily="Monospace";this.style.color=h;this.style.fontSize="100px"; this.style.lineHeight=0;this.style.cursor="default"}else{this.d.className+=" circle";this.style.backgroundColor=h}t.appendChild(this.d);this.m=function(){t.removeChild(this.d)};this.update=function(){this.x+=this.a;this.y+=this.c;this.a=Math.min(50,Math.max(-50,(this.a+(n+p)/this.h)*0.92));this.c=Math.min(50,Math.max(-50,(this.c+o/this.h)*0.92));var e=g-this.x,f=j-this.y,i=Math.sqrt(e*e+f*f);e/=i;f/=i;if(i< a){this.a-=e*this.l;this.c-=f*this.l;this.e+=(0.005-this.e)*0.4;this.g=Math.max(0,this.g*0.9- 0.01);this.a*=1-this.g;this.c*=1-this.g}else{this.e+=(this.r-this.e)*0.005;this.g=Math.min(1,this.g+0.03)}e=this.o-this.x;f=this.p-this.y;i=Math.sqrt(e*e+f*f);this.a+=e*this.e;this.c+=f*this.e;this.k=this.h+i/8;this.i=i< 0.3&&this.a< 0.3&&this.c< 0.3;if(!this.i){if(!u)this.style.width=this.style.height=this.k*2+"px";this.style.left=this.x-(u?20:0)+"px";this.style.top=this.y+"px"}}}}catch(G){google.ml(G,false,{_sn:"PAR"})};})();google.doodle.init()</script>




<script src="Google_fichiers/_0rTzKv-vvM.js"></script>
 
A
aztazt
Nouveau WRInaute
@finstreet : Beaucoup d'entre nous ont déjà regardé la source de la page et vu qu'il n'y a aucun lien sur les DIV de chacune des bulles. Inutile de nous rouler dans la farine !
 
R
rudddy
WRInaute passionné
aztazt a dit:
@finstreet : Beaucoup d'entre nous ont déjà regardé la source de la page et vu qu'il n'y a aucun lien sur les DIV de chacune des bulles. Inutile de nous rouler dans la farine !
Cliquez pour agrandir...
non c'était bien tenté puisqu'en jQuery, pas besoin de lien sur le div pour déclencher qqch au clic, mais je l'ai grillé depuis le début ! (me^me si j'avoue que j'ai tenté ma chance ... :twisted: )
 
anemone-clown
anemone-clown
WRInaute passionné
Moi j'aime bien les LOURDS logos (ben oui, en 1 Mb, on n'aime pas les logos!) de GG avec perte de temps à la clef, ça me permet d'utiliser Yahoo durant ces journées*. :lol:


* c'est tout à fait vrai.
 
F
finstreet
WRInaute accro
rudddy a dit:
non c'était bien tenté puisqu'en jQuery, pas besoin de lien sur le div pour déclencher qqch au clic, mais je l'ai grillé depuis le début ! (me^me si j'avoue que j'ai tenté ma chance ... :twisted: )
Cliquez pour agrandir...

Tu as été pire ! :) Tu as laissé sous entendre que le résultat était un truc de cul lol je n'ose imaginer le nombre de mecs qui ont testé. Bande de gros cochons !
 
S
Schwarzer Stern
WRInaute impliqué
Légalement ou techniquement ?
J'imagine que techniquement, si Google l'a fait, c'est possible :) (un lien a été donné plus haut pour nue version html5, d'ailleurs)
Pour le côté légal, aucune certitude !
 
F
fredfan
WRInaute accro
j-mi a dit:
le voir avec de la musique clasqique ça donne bien aussi ;-)

Cliquez pour agrandir...
C'est bizarre ça ne ressemble pas du tout à ce que je vois. Chez moi les ronds ont différentes tailles et ils grossissent quand on les éloigne de leur port d'attache.
C'est la version bridée pour IE sur cette vidéo ?
 
D
Djibou_Te@M
WRInaute occasionnel
Il reprend ses couleurs au nombre de lettres tapées... déjà que ça [censured]gueulait [/censured] hier :
Mardi 7 septembre 2010, 13h48
Google a surpris les internautes en remplaçant mardi 7 septembre le logo de sa page d'accueil par un "doodle" interactif (logos spéciaux de Google célébrant généralement un événement ou un anniversaire) composé de billes s'échappant dès que le curseur de la souris les approche. Particularité de ce logo disponible dans seulement certains pays : il ne mentionne aucune célébration d'événement.

Cette création réalisée en HTML5 n'a par ailleurs pas manqué d'énerver certains utilisateurs du moteur, agacés par le niveau de ressources système nécessaire au fonctionnement de l'animation. L'affichage de ce logo utiliserait environ 40 % du CPU sous Internet Explorer et environ 50 % sous Firefox, contre seulement 25 % sous Chrome, le navigateur de Google. Google cherchait-il à prouver la supériorité de son navigateur ?
Cliquez pour agrandir...
Source : journal du net
 
F
finstreet
WRInaute accro
en même temps un geek qui se retrouve sur la page d'accueil de Google, il a un soucis le geek :) et les autres internautes ont bien aimé...
 
D
Djibou_Te@M
WRInaute occasionnel
Djibou_Te@M a dit:
Il reprend ses couleurs au nombre de lettres tapées... déjà que ça [censured]gueulait [/censured] hier :
Mardi 7 septembre 2010, 13h48
Google a surpris les internautes en remplaçant mardi 7 septembre le logo de sa page d'accueil par un "doodle" interactif (logos spéciaux de Google célébrant généralement un événement ou un anniversaire) composé de billes s'échappant dès que le curseur de la souris les approche. Particularité de ce logo disponible dans seulement certains pays : il ne mentionne aucune célébration d'événement.

Cette création réalisée en HTML5 n'a par ailleurs pas manqué d'énerver certains utilisateurs du moteur, agacés par le niveau de ressources système nécessaire au fonctionnement de l'animation. L'affichage de ce logo utiliserait environ 40 % du CPU sous Internet Explorer et environ 50 % sous Firefox, contre seulement 25 % sous Chrome, le navigateur de Google. Google cherchait-il à prouver la supériorité de son navigateur ?
Cliquez pour agrandir...
Source : journal du net
Cliquez pour agrandir...

Et moi qui croyait que ma RAM commençait a lacher ...
 
Madrileño
Madrileño
Membre Honoré
L'affichage de ce logo utiliserait environ 40 % du CPU sous Internet Explorer et environ 50 % sous Firefox, contre seulement 25 % sous Chrome, le navigateur de Google. Google cherchait-il à prouver la supériorité de son navigateur ?
Cliquez pour agrandir...
C'est un exemple intéressant pour Google Chrome.
 
C
Chris30leboss
Nouveau WRInaute
Personne pour me répondre? :(

Sinon, par rapport à IE et FF, l'animation est beaucoup mieux gérer sur FF (les boules sont de tailles différentes).
 
Madrileño
Madrileño
Membre Honoré
Boloky
Boloky
WRInaute occasionnel
Bah dans ton cas on voit bien les boules du logo mais aucune animation !! Un simple copié collé ne suffit donc pas.
 
Madrileño
Madrileño
Membre Honoré
Afficher le code source de la page.

N'hésitez pas à participer sur le forum en répondant aussi à d'autres topics (présentant vos avis par exemple).
 
F
fredfan
WRInaute accro
En local chez moi le logo fixe ne s'efface pas quand on active les ronds (firefox, IE et safari)
C'est dommage, je la trouve plus fluide que l'animation dotty dots, qui elle marche par contre
 
F
fredfan
WRInaute accro
J'ai fait ça en trois coups de cuillère à pot :
http://poufi.net
J'ai enlevé le formulaire et le javascript google analytics,ce qui nettoie déjà un peu le code
Je n'ai pas encore nettoyé le js parce que je suis nul, mais je vais m'y coller. Il faut enlever le bout de code qui prend le mot dans le formulaire
Les couleurs se changent dans :
var baseColor = [ [355,50], [355,50], [355,50], [355,50] ]; (euh... ok c'est du codage au tranchoir encore)
et le texte dans :
hexphrase = "506f756669"; (en hexadécimal)
Si tu fais enregistrer sous sur firefox (et sans doute d'autres) il te sauvera aussi un dossier bubble avec les js.
 
C
Chris30leboss
Nouveau WRInaute
Donc donc, voilà la page d'essai:

http://www.entraide-info.com/rubrique,essai-forumactif,562345.html

Et, voilà le code:

Code: 
<script type="text/javascript" src="http://s3.e-monsite.com/2010/09/14/09/jquery.js"></script>
	<script type="text/javascript" src="http://s3.e-monsite.com/2010/09/14/09/alphabet.js"></script>
	<script type="text/javascript" src="http://s3.e-monsite.com/2010/09/14/10/main.js"></script>
	<style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}
.fb_reset{background:none;border-spacing:0;border:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}
.fb_link img{border:none}
.fb_dialog{position:absolute;top:-10000px;z-index:10001}
.fb_dialog_advanced{background:rgba(82, 82, 82, .7);padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px}
.fb_dialog_content{background:#fff;color:#333}
.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/zA63Q/hash/8o4lssjn.gif) no-repeat scroll 3px 0 transparent;cursor:pointer;display:block;height:16px;position:absolute;right:19px;top:18px;width:14px;top:10px\9;right:7px\9}
.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/zA63Q/hash/8o4lssjn.gif) no-repeat scroll -10px 0 transparent}
.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:20px}
#fb_dialog_loader_close{background:url(http://static.ak.fbcdn.net/rsrc.php/z2APY/hash/41s5ptdj.gif) no-repeat scroll left top transparent;cursor:pointer;display:-moz-inline-block;display:inline-block;height:9px;margin-left:20px;position:relative;vertical-align:middle;width:9px}
#fb_dialog_loader_close:hover{background-image:url(http://static.ak.fbcdn.net/rsrc.php/z7ZL1/hash/bf2f4q72.png)}
.fb_dialog_top_left,
.fb_dialog_top_right,
.fb_dialog_bottom_left,
.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}
.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/zEYDZ/hash/4xk9rts8.png) no-repeat 0 0;left:-10px;top:-10px}
.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/zEYDZ/hash/4xk9rts8.png) no-repeat 0 -10px;right:-10px;top:-10px}
.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/zEYDZ/hash/4xk9rts8.png) no-repeat 0 -20px;bottom:-10px;left:-10px}
.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/zEYDZ/hash/4xk9rts8.png) no-repeat 0 -30px;right:-10px;bottom:-10px}
.fb_dialog_vert_left,
.fb_dialog_vert_right,
.fb_dialog_horiz_top,
.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}
.fb_dialog_vert_left,
.fb_dialog_vert_right{width:10px;height:100%}
.fb_dialog_vert_left{margin-left:-10px}
.fb_dialog_vert_right{right:0;margin-right:-10px}
.fb_dialog_horiz_top,
.fb_dialog_horiz_bottom{width:100%;height:10px}
.fb_dialog_horiz_top{margin-top:-10px}
.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}
.fb_dialog_iframe{line-height:0}
.fb_iframe_widget{position:relative;display:-moz-inline-block;display:inline-block}
.fb_iframe_widget iframe{position:relative;vertical-align:text-bottom}
.fb_iframe_widget span{position:relative}
.fb_hide_iframes iframe{position:relative;left:-10000px}
.fb_iframe_widget_loader{position:relative;display:inline-block}
.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}
.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/z5R48/hash/ejut8v2y.gif) no-repeat;height:32px;width:32px;margin-left:-16px;position:absolute;left:50%;z-index:4}
.fb_button_simple,
.fb_button_simple_rtl{background-image:url(http://static.ak.fbcdn.net/rsrc.php/z6IY3/hash/5gh7aaaq.png);background-repeat:no-repeat;cursor:pointer;outline:none;text-decoration:none}
.fb_button_simple_rtl{background-position:right 0}
.fb_button_simple .fb_button_text{margin:0 0 0 20px;padding-bottom:1px}
.fb_button_simple_rtl .fb_button_text{margin:0 10px 0 0}
a.fb_button_simple:hover .fb_button_text,
a.fb_button_simple_rtl:hover .fb_button_text,
.fb_button_simple:hover .fb_button_text,
.fb_button_simple_rtl:hover .fb_button_text{text-decoration:underline}
.fb_button,
.fb_button_rtl{background:#29447e url(http://static.ak.fbcdn.net/rsrc.php/zDYYQ/hash/deh9tyqv.png);background-repeat:no-repeat;cursor:pointer;display:inline-block;padding:0 0 0 1px;text-decoration:none;outline:none}
.fb_button .fb_button_text,
.fb_button_rtl .fb_button_text{background:#5f78ab url(http://static.ak.fbcdn.net/rsrc.php/zDYYQ/hash/deh9tyqv.png);border-top:solid 1px #879ac0;border-bottom:solid 1px #1a356e;color:#fff;display:block;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:bold;padding:2px 6px 3px 6px;margin:1px 1px 0 21px;text-shadow:none}
a.fb_button,
a.fb_button_rtl,
.fb_button,
.fb_button_rtl{text-decoration:none}
a.fb_button:active .fb_button_text,
a.fb_button_rtl:active .fb_button_text,
.fb_button:active .fb_button_text,
.fb_button_rtl:active .fb_button_text{border-bottom:solid 1px #29447e;border-top:solid 1px #45619d;background:#4f6aa3;text-shadow:none}
.fb_button_xlarge,
.fb_button_xlarge_rtl{background-position:left -60px;font-size:24px;line-height:30px}
.fb_button_xlarge .fb_button_text{padding:3px 8px 3px 12px;margin-left:38px}
a.fb_button_xlarge:active{background-position:left -99px}
.fb_button_xlarge_rtl{background-position:right -268px}
.fb_button_xlarge_rtl .fb_button_text{padding:3px 8px 3px 12px;margin-right:39px}
a.fb_button_xlarge_rtl:active{background-position:right -307px}
.fb_button_large,
.fb_button_large_rtl{background-position:left -138px;font-size:13px;line-height:16px}
.fb_button_large .fb_button_text{margin-left:24px;padding:2px 6px 4px 6px}
a.fb_button_large:active{background-position:left -163px}
.fb_button_large_rtl{background-position:right -346px}
.fb_button_large_rtl .fb_button_text{margin-right:25px}
a.fb_button_large_rtl:active{background-position:right -371px}
.fb_button_medium,
.fb_button_medium_rtl{background-position:left -188px;font-size:11px;line-height:14px}
a.fb_button_medium:active{background-position:left -210px}
.fb_button_medium_rtl{background-position:right -396px}
.fb_button_text_rtl,
.fb_button_medium_rtl .fb_button_text{padding:2px 6px 3px 6px;margin-right:22px}
a.fb_button_medium_rtl:active{background-position:right -418px}
.fb_button_small,
.fb_button_small_rtl{background-position:left -232px;font-size:10px;line-height:10px}
.fb_button_small .fb_button_text{padding:2px 6px 3px;margin-left:17px}
a.fb_button_small:active,
.fb_button_small:active{background-position:left -250px}
.fb_button_small_rtl{background-position:right -440px}
.fb_button_small_rtl .fb_button_text{padding:2px 6px;margin-right:18px}
a.fb_button_small_rtl:active{background-position:right -458px}
.fb_connect_bar_container div,
.fb_connect_bar_container span,
.fb_connect_bar_container a,
.fb_connect_bar_container img,
.fb_connect_bar_container strong{background:none;border-spacing:0;border:0;direction:ltr;font-style:normal;font-variant:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal;vertical-align:baseline}
.fb_connect_bar_container{position:fixed;left:0 !important;right:0 !important;height:42px !important;padding:0 25px !important;margin:0 !important;vertical-align:middle !important;border-bottom:1px solid #333 !important;background:#3b5998 !important;z-index:99999999 !important;overflow:hidden !important}
.fb_connect_bar_container_ie6{position:absolute;top:expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px":body.scrollTop+"px")}
.fb_connect_bar{position:relative;margin:auto;height:100%;width:100%;padding:6px 0 0 0 !important;background:none;color:#fff !important;font-family:"lucida grande", tahoma, verdana, arial, sans-serif !important;font-size:13px !important;font-style:normal !important;font-variant:normal !important;font-weight:normal !important;letter-spacing:normal !important;line-height:1 !important;text-decoration:none !important;text-indent:0 !important;text-shadow:none !important;text-transform:none !important;white-space:normal !important;word-spacing:normal !important}
.fb_connect_bar a:hover{color:#fff}
.fb_connect_bar .fb_profile img{height:30px;width:30px;vertical-align:middle;margin:0 6px 5px 0}
.fb_connect_bar div a,
.fb_connect_bar span,
.fb_connect_bar span a{color:#bac6da;font-size:11px;text-decoration:none}
.fb_connect_bar .fb_buttons{float:right;margin-top:7px}
.fb_edge_widget_with_comment{position:relative;*z-index:1000}
.fb_edge_widget_with_comment span.fb_edge_comment_widget{position:absolute}
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr{left:-4px}
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_rtl{left:2px}
.fb_share_count_wrapper{position:relative;float:left}
.fb_share_count{background:#b0b9ec none repeat scroll 0 0;color:#333;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;text-align:center}
.fb_share_count_inner{background:#e8ebf2;display:block}
.fb_share_count_right{margin-left:-1px;display:inline-block}
.fb_share_count_right .fb_share_count_inner{border-top:solid 1px #e8ebf2;border-bottom:solid 1px #b0b9ec;margin:1px 1px 0 1px;font-size:10px;line-height:10px;padding:2px 6px 3px;font-weight:bold}
.fb_share_count_top{display:block;letter-spacing:-1px;line-height:34px;margin-bottom:7px;font-size:22px;border:solid 1px #b0b9ec}
.fb_share_count_nub_top{border:none;display:block;position:absolute;left:7px;top:35px;margin:0;padding:0;width:6px;height:7px;background-repeat:no-repeat;background-image:url(http://static.ak.fbcdn.net/rsrc.php/zCXBS/hash/89zgzk50.png)}
.fb_share_count_nub_right{border:none;display:inline-block;padding:0;width:5px;height:10px;background-repeat:no-repeat;background-image:url(http://static.ak.fbcdn.net/rsrc.php/zAQB0/hash/1a8txe26.png);vertical-align:top;background-position:right 5px;z-index:10;left:2px;margin:0 2px 0 0;position:relative}
.fb_share_no_count{display:none}
.fb_share_size_Small .fb_share_count_right .fb_share_count_inner{font-size:10px}
.fb_share_size_Medium .fb_share_count_right .fb_share_count_inner{font-size:11px;padding:2px 6px 3px;letter-spacing:-1px;line-height:14px}
.fb_share_size_Large .fb_share_count_right .fb_share_count_inner{font-size:13px;line-height:16px;padding:2px 6px 4px;font-weight:normal;letter-spacing:-1px}
.fb_share_count_hidden .fb_share_count_nub_top,
.fb_share_count_hidden .fb_share_count_top,
.fb_share_count_hidden .fb_share_count_nub_right,
.fb_share_count_hidden .fb_share_count_right{visibility:hidden}</style></head><body>
<header role="banner">
	<canvas id="c" style="position: absolute;" width="1280" height="831"></canvas>

C'est du coupage, découpage et collage, mais c'est un bon début ^^

Le boules s'animent déjà (oui euh!! passez le curseur plus haut à gauche de l'animation ;)).

Merci :)
 
C
Chris30leboss
Nouveau WRInaute
Oui, justement, j'ai une question concernant le Forum.

Vous m'avez dit que je pouvais demander des avis sur mon site, mais sur quelle catégorie de Forum?

Merci d'avance! :)
 
C
Chris30leboss
Nouveau WRInaute
J'ai déjà hébergé les fichiers, comme dit:

J'ai fait ça en trois coups de cuillère à pot :
http://poufi.net
J'ai enlevé le formulaire et le javascript google analytics,ce qui nettoie déjà un peu le code
Je n'ai pas encore nettoyé le js parce que je suis nul, mais je vais m'y coller. Il faut enlever le bout de code qui prend le mot dans le formulaire
Les couleurs se changent dans :
var baseColor = [ [355,50], [355,50], [355,50], [355,50] ]; (euh... ok c'est du codage au tranchoir encore)
et le texte dans :
hexphrase = "506f756669"; (en hexadécimal)
Si tu fais enregistrer sous sur firefox (et sans doute d'autres) il te sauvera aussi un dossier bubble avec les js.
Cliquez pour agrandir...

Et je cherche le code pour mettre en place tout ca :)

Merci, et désolé :)
 
Madrileño
Madrileño
Membre Honoré
Le mieux est d'essayer si en local cela fonctionne d'abord. Après l'ajouter au site pour vérifier que les scripts fonctionnent tous. Des fois c'est pour ça qu'un script ne fonctionne pas.
 
Madrileño
Madrileño
Membre Honoré
Après c'est une question de design en général et certaines fois de script.
Le plus simple serait de le présenter avec une nouvelle page c'est vite fait au lieu de perdre du temps.
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
Discussions similaires
E
Doodle de Google en hommage à Georges Méliès
Réponses
3
Affichages
4K
valserine
valserine
M
Logo google – Doodle jour de la terre
Réponses
3
Affichages
2K
Corporation
C
Madrileño
[Doodle Google] Pac Man !
Réponses
14
Affichages
4K
Madrileño
Madrileño
Madrileño
  • Fermé
[Google] Doodle 4 en Chine
Réponses
2
Affichages
2K
OTP
OTP
Madrileño
[Google] Doodle 4 Google
Réponses
4
Affichages
2K
Madrileño
Madrileño
H
Google Holiday Doodle
Réponses
1
Affichages
2K
cardoule
C
A
Référencement d'un site animé
Réponses
5
Affichages
1K
nickargall
nickargall
A
Créer un menu animé qui bouge au survol de la souris (lien)
Réponses
3
Affichages
3K
Anonymous
A
K
roman animé générer des revenus
Réponses
28
Affichages
3K
kookat
K
K
roman animé recherche conseils
Réponses
9
Affichages
2K
kookat
K
H
Le logo Google est animé en JavaScript
Réponses
4
Affichages
4K
Madrileño
Madrileño
pcamliti
Diagramme animé Analytics
Réponses
4
Affichages
2K
abarkanium
A
sim100
Gif animé
Réponses
9
Affichages
3K
Pandore
P
R
miniaturiser un gif animé
Réponses
20
Affichages
4K
rog
R
P
Creer une vidéo (gif animé + bande son)
Réponses
7
Affichages
10K
pillets
P
S
Faut le faire ! Gifs animé réalisé avec 30 plans image
Réponses
32
Affichages
11K
DIEZ
D
G
Site flash dynamique et animé - Votre avis m'interesse :
Réponses
21
Affichages
3K
graphicprovider.com
G
B
Création d'un gif animé en PHP ?
Réponses
3
Affichages
4K
CaYuS
C
S
Logo du site & Footer
Réponses
5
Affichages
1K
pomination
pomination
T
Logo wordpress dans la recherche Google sur URL redirigée
Réponses
4
Affichages
3K
tagada13
T
Haut