ajouté bloc sociaux

Salut,

ce n'est pas très compliqué en fait, quand tu analyses le code source, tu remarques qu'il utilise un sprite pour chaque image : http://www.stores-destock.com/modules/blocksocial_mod/img/fb.png, et qu'il modifie le background position.

Ce qui me gène dans son code est qu'il utilise jQuery pour réaliser cet effet alors que c'est totalement possible avec simplement du CSS. Il te suffit de jouer avec la propriété transition.

// HTML
<ul>
    <li>
        <a href="#">facebook</a>
    </li>
    <li>
        <a href="#">facebook</a>
    </li>
</ul>

//CSS
li {
    float: left;
}
li a {
    background: url('http://www.stores-destock.com/modules/blocksocial_mod/img/fb.png') 0 0 no-repeat;
    display:block;
    height: 32px;
    text-indent: -9999em;
    width: 32px;

    transition: background-position .3s ease-in-out; // à dupliquer pour ajouter les vendor prefixes
}
li a:hover {
    background-position: 0 -32px;
}

N'oublie pas, F12 est ton ami !

Si tu regarde via firebug, tu vois que l'image de facebook est constitué d'un icone grisé et d'un icone bleu. Ensuite, il ne reste plus qu'a faire une translation du background-position en jquery quand la personne survole l'icone facebook.

Tu as une réponse sur ce sujet : Lien

Edit (le ninja de prbaron) : à voir si l'animation css3 est aussi fluide que l'animation en jquery ;)

++

Edit (le ninja de prbaron) : à voir si l'animation css3 est aussi fluide que l'animation en jquery

j'ai envie de te dire oui, et sera même plus fluide notamment sur smartphones.

Pourquoi privilégier CSS à jQuery ?

CSS profite de l'accélération graphique de nos appareils. jQuery lorsque l'on fait une animation de changement de taille ou de position, recalcule énormément de choses entre deux changements. Du coup ça rendra l'animation peu fluide sur un appareil à faible mémoire vive.

Pour vous en convaincre, je vous conseille de regarder du côté des implémentations de la navigation en off-canvas. Vous verrez tout de suite laquelle est en css3 et laquelle est en jQuery.

Petit exemple.
http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

--DEBAT--

J'ai regardé ton lien et il est vrai que je n'ai pas vu de différence de fluidité au niveau des animations. Jquery modifie le DOM quand nous lui demandons de faire une animation ce qui peut alourdir l'animation mais comme dit plus haut, pour une simple animation comme celle ci, je ne vois pas de différence entre l'animation css et jquery.

J'avais eu une mauvaise expérience du css3 rotate qui me donnait une mauvaise définition de ma typo sous chrome alors que sur ff, la typo était parfaite. Le fait que le css soit implémenter nativement sur le navigateur l'accélère mais il peut y avoir des différences entre les différents navigateurs. Par exemple sur ta page d'exemple, l'animation en css marche très bien sur chrome/FF/ mais il ne marche pas sur mon ie9. Il est sûr que si nous nous penchons sur les nouvelles technologies, il n'y aura aucun problème à balayer les anciennes versions d'ie (bien que ie 9 c'est quand même pas si obsolète ^^. Il est inclus dans seven de base... vade retro w 8) mais bon quand on fait un site, on préfère pouvoir toucher une plus large cible qu'une minorité de bien pensant.

Je te l'accorde le css est moins lourd que jquery. Mais au niveau de l'affichage tout navigateurs, je suis encore réticent :')

On s'éloigne pas mal du sujet mais tu as raison, la compatibilité n'est pas encore tip top, (allez IE on se bouge !). Comme expliqué dans l'article, il est possible de contrer ça avec Modernizr et de faire l'animation en JS.

mais bon quand on fait un site, on préfère pouvoir toucher une plus large cible qu'une minorité de bien pensant.
J'ai envie de te dire pas forcément, il faut tout d'abord analyser ta cible. Coder un site pour technophiles ne te permet pas les mêmes intercations qu'un site pour jeunes enfants par exemple.

Au final, on revient au même débat d'il y a quelques années, doit on utiliser border-radius, ou bien on utilise des images ?
A l'époque la prise en charge de border-radius était faible, mais on a quand même choisis de l'utiliser, maintenant on remarque qu'elle fonctionne très bien.

Pour ma part, je préfère utiliser le CSS pour ce genre d'animation que jQuery. Mais je conçois très bien ton point de vue.

En parlant de débat épique, tu aurais quand même pu citer les slide flash vs les slide js ^^

@kingteamdunet : tu as deux solutions avec des avis approfondis. Y a peu de sujets qui ont cette chance, à toi de choisir ^^

Une dernière chose pour ton choix @kingteamdunet !
Si tu ne te sers pas du tout de jquery pour le reste de ton site alors privilégie les effets css !
C'est toujours une requête de moins sur ton site ! :)
Si tu te sers déjà de jquery pour autre chose alors la tu as deux experts qui t'on largement vanté les mérites et défauts des deux options. ;)

Bonsoir,
Encore merci mais le code a quelle endroit je place sur ce nouveau car j’ai teste il ne marche pas
Merci

<section id="social"><h4>Suivez-nous</h4><ul><li class="facebook"><a href="#" target="_blank" style="background-position: 0px 0px;">Facebook</a></li><li class="twitter"><a href="#" target="_blank" style="background-position: 0px 0px;">Twitter</a></li><li class="google"><a href="#" target="_blank" style="background-position: 0px 0px;">Google +</a></li><li class="youtube"><a href="#" target="_blank" style="background-position: 0px 0px;">Youtube</a></li><li class="pinterest"><a href="#" target="_blank" style="background-position: 0px 0px;">Pinterest</a></li><li class="tumblr"><a href="#" target="_blank" style="background-position: 0px 0px;">Tumblr</a></li></ul> </section>

element.style {
background-position: 0px 0px;
}
/* sociaux */
#social h4 {
padding: 0;
margin: 0;
padding-bottom: 10px;
padding-top: 6px;
position: relative;
top: -5px;
font-weight: normal;
border-bottom: 1px solid #CECECE;
text-transform: uppercase;
margin-bottom: 10px;
}
#social {
width: 300px;
float: right;
margin-bottom: 20px;
}
#social li.facebook a {
background: url('/images/fb.png') no-repeat;
}
#social li.twitter a {
background: url('/images/twitter.png') no-repeat;
}
#social li.google a {
background: url('/images/google.png') no-repeat;
}
#social li.youtube a {
background: url('/images/youtube.png') no-repeat;
}
#social li.pinterest a {
background: url('/images/pinterest.png') no-repeat;
}
#social li.tumblr a {
background: url('/images/tumblr.png') no-repeat;
}
#social li a {
width: 32px;
height: 32px;
display: block;
}
#social li {
text-indent: -999em;
border: none;
float: left;
margin-right: 6px;
margin-bottom: 5px;
}
#social li:last-child {
margin-right: 0;
}
/* fin sociaux */

Assures toi du chemin des tes images en premier lieu
Assures toi ensuite que les images sont bien dans le dossier images avec un S les oublis sont possible ! ^^
pour l'effet du site il va te manquer les transitions en css.

--MODE J'AI RIEN A DIRE ON--

prbaron a écrit

j'ai envie de te dire oui
J'ai envie de te dire pas forcément

Faut savoir, c'est oui ou c'est pas forcément ? T'es difficile ! :D

--MODE J'AI RIEN A DIRE OFF--
--MODE J'VAIS ME COUCHER ON--

Ps : je rejoint l'avis sur le css : plus fluide, moins lourd, plus facilement maintenable (selon moi) mais pas compatible tout navigateurs

Haha, petit tic c'est vrai :). Mais tu remarqueras que c'est pour deux problème différents.

A mon sens, ce n'est pas grave si IE9 ne prend pas l'animation en compte. Sur l'exemple que j'ai cité en haut, elle est fonctionnelle sur Chrome/FF, (pas testé sur Safari). IE9 n'affiche pas d'animation mais le menu est quand même correctement visible. Pour moi les animations doivent être un plus. Hors en utilisant du jQuery, on alourdit le calcul et je préfère ne pas avoir d'animation plutôt qu'une animation non fluide. La deuxième est à mon sens moins intéressante pour le client.