search

pixelcog / parallax.js

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
MIT License
3.53k stars 840 forks source link

adjusting background-size #250

Closed moecantplay closed 6 years ago

moecantplay commented 6 years ago

Hi,

I'm trying to achieve a background-size: contain while it seems that the default of parallaxJs is to stretch the image, something like background-size: cover.

How do I achieve this?

wstoettinger commented 6 years ago

this is unfortunately not possible due to the nature of the parallax effect.

The plugin calculates the necessary size of the image (i.e. slider) based on the height of the "window" (i.e. how high is the element through which you see the parallax effect), the height of the document (how far can the user scroll while the windows is still visible, assuring that the image doesn't move too far to expose the background behind it) and the speed of the parallax settings (how far does the image/slider move in relation to scrolling speed).

To make sure, the important part of the image is visible you need to either change the aspect ratio of the image, or the aspect ratio of the window, or you create an image which has enough "headspace" around the object you want to show.

Hope this helps!

wstoettinger commented 6 years ago

did this answer your question? please reopen or head to stackoverflow for further questions.