RSS

Se connecter avec FaceBook

Libellés : , , , , , , ,

c'est pas si compliquer que ça



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;});
}


ET voila !!!!


Enjoy !

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments0

Détail des effets d'animation Javascript (easeIn & Out, effet de rebond)

Libellés : , , , , ,

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;}



test d'animation
Enjoy !

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments0
Inscription à : Articles (Atom)
Se connecter avec FaceBook Détail des effets d'animation Javascript (easeIn & Out, effet de rebond)