search

apertureless / vue-parallax

🌌 Vue.js component for parallax image scroll effects
MIT License
638 stars 88 forks source link

Parallax stops halfway #13

Closed TheDutchCoder closed 7 years ago

TheDutchCoder commented 7 years ago

Expected Behavior

Parallax effect should run from the top of the element and bottom of the page, to the bottom of the element and top of the page.

Actual Behavior

In the demo, the parallax effect stops when the bottom of the element is halfway up on the page.

Environment

Other things

I would also suggest not using a section element by default, but a regular div. Maybe let the user input an element they wish to use instead.

apertureless commented 7 years ago

Hi @TheDutchCoder

I guess you mean the first parallax effect in on the demo page?

Well the parallax stops, because of how the image is set and calculated. Often the image is set to a height auf 100% or 100vh, so it would cover the whole background. And your section would be a small visible part of it. This makes totally sense if you have some kind of background like image.

However my aim was to add a subtle parallax effect to images which are not meant to be background images. Because of that, the image scales only to 110% I guess (or something around that value) so you have a pretty clear section of the image, without much cutoff.

But this way, you don't have that much space to move your image. Only that 10% up and 10% down. So on bigger screens it might stop earlier.

Is there a reason not to use section?

Well, as far as I know there would be no possibilty to let the user input an element they wish. This would require to rewrite it as a vue directive. Which could get a bit tricky.

However feel free to submit a PR :)

TheDutchCoder commented 7 years ago

Heya @apertureless

Yes correct, I was talking about the first effect.

If you're scaling it up to e.g. 110%, it should be pretty straitforward to have it mover over the whole length of the page with some calculations ;-)

Sections have semantic value, so in general I wouldn't use them for decoartive purposes like these, though it depends on what goes into the slots (but maybe leave that to the user and simply use a div).

Cheers!

apertureless commented 7 years ago

Okay I see. I will look into it 👍