Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Image initial position?

See original GitHub issue

Can we set an initial position for the image?

like, it start with top=100px… so scroll on 100 to something?

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

rrutschecommented, Sep 10, 2020

Hey folks, sorry for the delay. This issue is open for quite a while and I don’t really know if it’s worth to introduce such an initial position. Maybe let’s discuss your use cases so I can understand a bit better. Because from my understanding the “initial position” would be the starting point when the image enters the screen while scrolling (bottom of viewport). But is this really what it is meant to be? I could also imagine that someone would like to steer the image position when its position is at the top of the viewport. So tell me 🙂 . The thing is, that there are so many different use cases which we cannot cover with one prop. And I fear that we will have a component which tries to solve everything but nothing really good.

The other point: I created a release candidate 3.0.4-rc.0 which hopefully solves the positioning on different screen sizes @xstable mentioned. Originally the calculation of the relative position was based on the viewport height + parallax content height. So if you think of the scroll position as percentage value:

0 -> top of the parallax component enters the screen when scrolling up
1 -> bottom of parallax leaves the screen (top of the viewport)

This was to prevent white background getting visible before the image leaves the screen. I checked the issue @xstable posted and decided that it’s also okay to only use the viewport height for calculation. White space would still not get visible as this part of the component is not in viewport anymore. This way you don’t have different positions on different screens.

Can you check the release candidate 3.0.4-rc.0 on npm?

Thanks

1reaction

xstablecommented, Jul 11, 2020

Any progress here? Not 100% sure, if thread-opener means this, but I found that the image doesn’t start at the same position if you have different Screen-width: screenshot_ 9_09_55

I would love to see that there is an option to place the Image to define where it should be start if the Parallax-Element come into view.

Top Results From Across the Web

object-position - CSS: Cascading Style Sheets - MDN Web Docs

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image...

How to position an image in CSS - Javatpoint

There are many methods to position the image in CSS, such as using the object-position property, using the float property (for aligning the...

How to set position of an image in CSS ? - GeeksforGeeks

You can easily position an image by using the object-position property. ... float: none|inherit|left|right|initial;.

How to Position an Image in CSS? - Scaler Topics

You can easily position an image by using the object-position property. You can also use a bunch of other ways, like float-property, ...

CSS Layout - The position Property - W3Schools

The position property specifies the type of positioning method used for an element. There are five different position values: ... Elements are then...