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

[paulgodard]

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.

http://www.ticket2utopia.com/Alpha/zHome.php

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

[justsomeguy]

I don't understand the problem, if I resize the browser window the pictures still look fine.

[paulgodard]

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...

[justsomeguy]

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.

[paulgodard]

As you say... not quite the objective of the page.

The site is now active on http://www.ticket2utopia.com.

I will live with that unless someone can tell me what can be done.

There is another issue... sometimes when scrolling too fast up and down, the text boxes appear randomly at places where they should not appear... Any idea how to avoid that?

[justsomeguy]

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?