FB.init({
appId : 'APPID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
ça ! on le connais tous !
l'idée, c'est d'utiliser une boite de dialog qui vas nous permettre, si les permissions sont accepter, de récuperer le nom et la photo de la personne :
function show(){
FB.ui({
method:'permissions.request',
perms:'user_about_me',
display:'iframe'},
function(reponse){
if(reponse.perms){changeStatut();}
}
);
}
function changeStatut(){
FB.api({
method:'fql.query',
query:'SELECT name,pic FROM user WHERE uid='+FB.getSession().uid},
function(reponse){
var name = reponse[0].name;
var pictSrc = reponse[0].pic;
var html = name+' '+pictSrc;
document.getElementById('contentFB').innerHTML = html;});
}
En voila une bonne idée que j'ai eu du coté de la gare de nancy,
voila, il est relativement simple de faire une petite animation en JS :
var timer=0,speed=5,b=0;
for(var i=0;i<100;i++){
setTimeout(function(){elt.style.marginTop=b+"px";b++},(timer*speed));
timer++;}
1) l'effet easeOut (effet de frein)
function easeOut(x){return (x-1)^2;}
Et pour reprendre notre animation :
var timer=0,speed=5,b=0;
for(var i=0;i<100;i++){
setTimeout(function(){
var y = easeOut(b/100)*100;
elt.style.marginTop=y+"px";
b++},(timer*speed));
timer++;}
test
2) l'effet easeIn (autrement dit une acceleration)
Ici j'aurais bien pus utiliser une fonction exponentiel, mais j'ai préférer utiliser une fonction carré (question de goût surement)
function easeOut(x){return (((x-1)^2)*(-1)+1);}
test
3) L'effet de rebond, on pred un peu des autres fonction, on en fait une association genre ' f°g ' et ça donne un jolis rebond à faire en Javascript
function rebond(x){var mil = 0.5;
if(xelse if(x>mil){var y = carre(3*x-(7/3))+(1/2)}return y;}
une des priciplaes nouveauté, c'est le couplage du SVG + HTML, à l'époque c'était que XHTML, maintenant il faudra compter avec SVG.
Mais autre nouveauté, c'est la balise Canvas, bein connus des dévelloppeurs sur hTML5, qui permet de gérer tout les pixels d'une boite, en gros on peut faire tout sorte de dessin, d'animation, jusqu'a la 3D par éxemple
Se connecter avec FaceBookDétail des effets d'animation Javascript (easeIn & Out, effet de rebond)Bonne piochel'audio api de firefox 4.0, analyse spectrum et effets 3Dfirefox 4, à quoi s'attendreles amis facebook ..7éme symphonie de beethoven
