CODEWITHSUNDEEP
javascriptcssparallax
Dani Guerrato
Dani Guerrato

Reputation: 21

Problems with background image position on Stellar.js

I'm using stellar.js to add a parallax effect to a vertical scrolling website, but I'm having problems with the background positions. When I use the class "data-stellar-background-ratio" to add the parallax effect on a div I can't set the background position to right via CSS. All the background images just go to the left no matter what. I tried to use the position property plugin syntax available on the website, but it seems to break the parallax effect somehow. Can anybody help me? Thank you!

Upvotes: 2

Views: 10304

Answers (4)

JonnyD
JonnyD

Reputation: 71

Having the same issue I tried adding

scrollProperty and horizontalScrolling

Though this resulted in my background not being loaded.

Removing both properties and running Stellar like..

$.stellar({}) instead of $.stellar()

(like on the Stellar site)

Parallax is working like a charm.

Upvotes: 0

stafio
stafio

Reputation: 1

I had the same problem and already had horizontalScrolling:false. Adding scrollProperty: 'transform' resolved the issue for me.

Upvotes: 0

JWPersh
JWPersh

Reputation: 381

I had the same issue.

In your jquery.stellar.js file change the stellar function so that horizontal scrolling is set to false (its set to true as default).

$.stellar({
horizontalScrolling:false
// rest of function
});

Upvotes: 8

Justinas
Justinas

Reputation: 41

Try changing scrollProperty to transform, like: 

scrollProperty: 'transform'

That worked for me.

Upvotes: 4

Related Questions