2016-07-29 18 views
0

Ich habe ein seltsames Problem mit dem reinen css Parallax Effekt. Ich folgte diesem Tutorial:Reiner Parallaxeneffekt funktioniert nicht auf der linken Seite

Aber wie im Beispiel habe ich einen weißen Platz auf der linken Seite. Nach einigem Nachforschungen habe ich gelesen, dass das ein Bug sein sollte, der ausschließlich im webkitbasierten Browser enthalten ist, aber ich bekomme das gleiche Ergebnis auch in Firefox.

Auf dieser Seite: http://keithclark.co.uk/articles/pure-css-parallax-websites/ der Autor eine Arbeit beschreibt um:

Es ist möglich, diesen Fehler zu umgehen, indem die transformations Herkunft und perspektiv Ursprungs der rechten Seite des Darstellungs Verankerung:

.parallax { 
    perspective-origin-x: 100%; 
} 
.parallax__layer { 
    transform-origin-x: 100%; 
} 

aber das hat nicht den Trick.

Ich sammle diese in einem jsfiddle

Jede Beratung?

Vielen Dank im Voraus.

+1

Ändern Sie '# container's links von 0 bis -7px. 'links: -7px;' – dNitro

+1

danke, das funktioniert wie ein Zauber. nicht wirklich, was ich erwartet habe, aber es funktioniert. Wenn Sie diesen Kommentar als Antwort hinzufügen, kann ich sie als die richtige Antwort akzeptieren –

+0

Geben Sie es zu. hinzugefügt ;) – dNitro

Antwort

1

Feinabstimmung der #container ‚s left Eigenschaft den Trick:

left: -7px; 
0

ersetzen Breite: 100%; nach Breite: 100 Vw; im .background