2013-04-10 1 views
4

Je règle une image d'arrière-plan sur un élément avec Stellar JS et j'essaie d'obtenir une image centrée qui se déplace en parallaxe. Cependant, lorsque j'essaie d'utiliser l'approche standard, je me rends compte que la position de l'arrière-plan est mise à jour par stellar qui annule alors le centrage (je suppose que c'est ce qui l'emporte). J'ai créé un violon pour expliquer la situation.Image d'arrière-plan CSS centrée avec Stellar JS

http://jsfiddle.net/captDaylight/wvuQm/1/

Est-il possible d'avoir l'image rester centrée sur défilement?

(pile me fait d'accompagner ce poste avec le code, bien qu'il soit insignifiant dans ce cas, l'exemple sur le violon est assez simple, donc je poste quelque chose à contourner)

background: url(http://upload.wikimedia.org/wikipedia/commons/e/e5/Seine_wide.jpg) no-repeat center center; 
background-size: auto 100%; 

<> Je lisais cet autre stack post sur la position de l'arrière-plan, mais quand j'ai essayé de faire la mise à jour, il a suggéré qu'il semble avoir cassé la parallaxe.

http://jsfiddle.net/captDaylight/wvuQm/3/

Répondre

15

suivant Vous devez désactiver la parallaxe horizontale. Stellar.js laissera intacte votre position de fond horizontale.

Dans votre exemple, l'appel mis à jour pour Stellar

$(window).stellar({ horizontalScrolling: false }); 

J'ai mis à jour votre exemple jsFiddle avec ce changement: http://jsfiddle.net/wvuQm/5/

0

Retirez le CSS suivant

margin-bottom: 50px;

ajouter le script et essayer

$(window).stellar({ 
    scrollProperty: 'transform' 
}); 
+0

Je mis à jour il par vos suggestions, mais il ne semble pas avoir travaillé ... http://jsfiddle.net/captDaylight/wvuQm/4/ Ai-je raté quelque chose? – captDaylight