Jump to content

scroll parallax scrolling with pseudo-fixed image ratio in full width size

Recommended Posts

Hello everyone. I am new to this forum.


I have build my first parallax website based on Petr Tichy's very good tutorial. I recommend it (https://ihatetomatoes.net).


Here is my new site. The idea was to get an attractive intro for this new project using altered-perspective images in full width.
I struggle a bit especially that I want to control the ratio of the images in a certain way. They must always be full page but depending on the width of the browser window, I apply a certain correction to the height. As the whole project is about "changing your perspective"... it's great... IMO.
However, I would like to change the height of the picture when the browser window is square or taller than wide. I have tried so many different things... but nothing does not work. The problem is that the background-attachment must be fixed to work with parallax and I can not change that. At the moment I just resize the browser window to the ratio of the image (16/9) but this is not ideal at all. I control the situation when the browser window is wide, but in the case it's not I would like to force the image to its exact ratio... Any idea?
There is also a section at the bottom of the page (#20 - visual meditation) which I can not control properly... the text box should fade in and out later. I used the code : data-100-top="opacity: 1" data-center="opacity: 1" data-center-top="opacity: 0" data--100-bottom="opacity: 0;" data-anchor-target="#slide-20". What should be changed to achieve that?
Greetings from Cape Town, Paul
Link to post
Share on other sites

The problem is that with the current settings, the picture has the height of the window before resizing. So if the browser opens a square or portrait window, the ratio of the photo is completely wrong instead of 16/9 landscape.


My temporary solution was to resize the browser window (current situation) but this is not ideal because the window is fixed to a landscape size.


I would like the photo to start as fixed 16/9 whatever the size of the browser window, and keep being able to resize the photos as it is now when the browser window is resized.


I hope that helps...

Link to post
Share on other sites

If the background images don't match the sizes of the elements where they are the background, then it doesn't look right. You could remove the background attachment and size, so that the pictures won't scale with the page, but then you lose the parallax effect and the content doesn't show up right.

Link to post
Share on other sites

I noticed that, but I'm having a problem getting it to do it now. I guess I would inspect those elements with the browser's developer tools to see what CSS is applied to them and try to figure out why it's getting applied when it shouldn't.


For those pictures, did you just stretch them vertically or is there other processing you did?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...