Discussion :

[houba222]

Bonjour

Un client souhaiterait avoir des animations comme sur ce site :
www. champagne - drappier .com /fr/brut-nature (merci de ne pas rectifier le lien)

Il y a une animation sur l'image une fois la page chargée. Puis une animation sur chaque transition de page.

Est-ce que quelqu'un peut déjà me dire si cela est fait uniquement avec des CSS ? ou s'il s'agit de JavaScript ?

[rodolphebrd]

Est-ce que quelqu'un peut déjà me dire si cela est fait uniquement avec des CSS ? ou s'il s'agit de JavaScript ?

désactivez javascript dans votre navigateur puis rechargez la page et vous verrez ?

[houba222]

Mais que je suis ...
Les choses les plus simples, parfois on y pense pas...
Merci !

Il va donc falloir que je trouve un dev. en javascript.

[rodolphebrd]

En inspectant le code vous aurez un peu plus d'informations, notamment sur javascript/jquery : http://keith-wood.name/backgroundPos.html

[houba222]

Merci pour le lien.
Mais l'animation sert pour les images apparemment.

Effectivement en cherchant dans le code je pourrai trouver sans doute la solution mais je perdrai plus de temps je pense que de trouver quelqu'un pour le faire.

Je ne sais pas si dans ce forum il y a possibilité de faire appel pour une prestation ?

[Invité]

Bonjour,
en regardant le code du site donné en exemple, les animations sur les images sont réalisées avec un div caché et une image sprite, apparaissant/disparaissant progressivement via CSS (step0 à step17) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<img class="img-header" alt="La maison Drappier" src="http://www.champagne-drappier.com/sites/all/themes/framework/img/maison.png" style="display: inline;">
<div class="sprite-page sprite-maison step0 step1 step2 step3 step4 step5 step6 step7 step8 step9 step10 step11 step12 step13 step14 step15 step16 step17" data-sprite="17" style="display: none;"></div>

Pour ce qui est de l'animation de transition de contenu de page, il semble que ce soit du JavaScript/Ajax (sans rechargement de page) :

• modification dynamique de l'URL
• chargement du nouveau contenu via Ajax
• effet de glissement du contenu

[houba222]

bonjour
Et merci pour ces éléments.