Parallax Vertical Problem

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
gjwilson1216
 
 
Posts: 11
Joined: Fri Oct 27, 2017 7:11 pm

Parallax Vertical Problem

Post by gjwilson1216 » Mon Nov 13, 2017 6:32 pm

Hello,

I am having a problem with the parallax effect. I have a page that is about 4500 pixels long and no matter what I do the image will not scroll past 1500 or so pixels. The image in it's current file size is huge at 10000x3400, I did not reduce it yet because I wanted to make sure that the effect worked without getting pixelated.

Here is a test page: http://www.gjwaccounting.com/test

What am I doing wrong? There are no hidden objects, the page is set to 4600 vertically. For the image flex container, I was fooling around with it to see if I could troubleshoot it myself, so the current settings for the padding are 500 at the top and 4000 at the bottom.

What I am looking to do is put a layer in the center of the page for my data - have a pad at the top and bottom of about 150 - 200 pixels and have the footer meet the image with no white space.

Grant

User avatar
Pablo
 
Posts: 19390
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Parallax Vertical Problem

Post by Pablo » Mon Nov 13, 2017 7:24 pm

There is no content in the flex container, so its height will be 0.

gjwilson1216
 
 
Posts: 11
Joined: Fri Oct 27, 2017 7:11 pm

Re: Parallax Vertical Problem

Post by gjwilson1216 » Mon Nov 13, 2017 7:52 pm

I have added the layer where I was putting the text and other objects at the above link. I took it out because I was trying to keep the page as clean as possible.

Grant

User avatar
Pablo
 
Posts: 19390
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Parallax Vertical Problem

Post by Pablo » Mon Nov 13, 2017 9:08 pm

It seems to be working now.
However you should keep in mind that the image needs some extra margin (height) so it can apply the scroll effect.

gjwilson1216
 
 
Posts: 11
Joined: Fri Oct 27, 2017 7:11 pm

Re: Parallax Vertical Problem

Post by gjwilson1216 » Mon Nov 13, 2017 9:16 pm

Yes the effect is working....but the second half of the page is what I am talking about. How do I get the lake picture to extend all the way down to the footer or is that not possible. I have the flexbox set at 4000 pixels for the vertical size and the text layer is set for 3500 I think, but the lake image is only extending down about maybe 1500 pixels how do I get it to extend all the way down until the footer shows up?

Grant

User avatar
Pablo
 
Posts: 19390
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Parallax Vertical Problem

Post by Pablo » Mon Nov 13, 2017 9:27 pm

The flex box container will not get bigger than its contents.
If you want it to be bigger then you will need to add more content.

gjwilson1216
 
 
Posts: 11
Joined: Fri Oct 27, 2017 7:11 pm

Re: Parallax Vertical Problem

Post by gjwilson1216 » Mon Nov 13, 2017 9:37 pm

I guess I am not understanding this. Isn't the white layer bigger than the flexbox container?

I just tried to make the white layer longer, but now it stretches into the footer. So I think that is what you are saying, I am just not doing it correctly.

User avatar
Pablo
 
Posts: 19390
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Parallax Vertical Problem

Post by Pablo » Tue Nov 14, 2017 7:20 am

You have added the parallax effect to the flexbox container.
A flex box container only has height when it has content. it is a 'layout helper'.

So if you want to see more of the background image then you will need to add objects to the flex box container so its height increases.
Is there any specific reason why you are using a flex box container without content? It does not have any purpose this way...

gjwilson1216
 
 
Posts: 11
Joined: Fri Oct 27, 2017 7:11 pm

Re: Parallax Vertical Problem

Post by gjwilson1216 » Tue Nov 14, 2017 2:42 pm

Pablo,

I was looking in the forums and someone with a similar problem looked like they had a hidden object somewhere and I stripped my page down to nothing to make sure nothing was there. I left it more or less blank because I thought it might be easier to troubleshoot the problem.

I have posted what I have so far for the page, almost all the information is on the page, I just have to do some editing and aligning yet. So where my issue is, when you scroll down to the level 4 info you start to see a white bar at the bottom of the page - I have my layer in the flexbox and the blue outline highlighted. I have tried increasing the padding on the bottom of the text and other things but what I can't figure out is how to do get the bottom edge of the lake image to be against the top edge of the footer with none of that white space.

User avatar
Pablo
 
Posts: 19390
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Parallax Vertical Problem

Post by Pablo » Tue Nov 14, 2017 2:53 pm

I'm sorry it is still not clear for me what the exact issue is.
As far as I can see it works correct for the way you have configure it. Although I cannot see exactly what you have done based on the HTML code only.
Can you please include screenshot of where exactly I need to look to see the problem?

gjwilson1216
 
 
Posts: 11
Joined: Fri Oct 27, 2017 7:11 pm

Re: Parallax Vertical Problem

Post by gjwilson1216 » Tue Nov 14, 2017 3:28 pm

I don't have the option to upload, so I posted the image of what I am talking about on the test page.

Grant

User avatar
Pablo
 
Posts: 19390
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Parallax Vertical Problem

Post by Pablo » Tue Nov 14, 2017 4:06 pm

There is a white space because the image is not high enough.
The aspect ratio does not match with the aspect ratio of the flex container.

Please try to understand how the parallax effect works.
It should fill the entire background and then there should be extra margin for the scroll effect.

gjwilson1216
 
 
Posts: 11
Joined: Fri Oct 27, 2017 7:11 pm

Re: Parallax Vertical Problem

Post by gjwilson1216 » Tue Nov 14, 2017 8:42 pm

I understand what you are saying, I just don't know how to do that. If you wouldn't mind just let me know where I am going wrong.

I have a flex container between a header and footer that has a vertical height of about 3800 pixels. The flex container is formatted for parallax, the image is the flex container background and has 400 for the top padding and 3400 for the bottom padding. The image size is 11200 x 3400. So to me I have 400 pixels of play don't I? I have tried increasing the padding...adding padding to the textboxes...dragging the image and flex container over the footer....pretty much everything I can think of. The online tutorial says if the image isn't long enough it will stretch.

Also in the flex container is a middle layer with all my content. It is approx 3100 pixels on the vertical side.

What I am looking to do...have the lake image top start at the footer....have about 100 pixels of space between the header and the top edge of the content layer...have the image scroll through the 3100 pixels of content and the bottom edge of the layer be flush with the top edge of the footer.

My new home page is approximately 1500 pixels vertically but I am still getting a little white bar between the end of the image and the beginning of the footer there as well, but there the original image is more than twice the size that is needed so there should be more than enough space correct?

I am ready to just put the background as a stationary image and go that route, but I am sure someone else at some point will have this question and eventually I'd like to get it figured out.

User avatar
Pablo
 
Posts: 19390
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Parallax Vertical Problem

Post by Pablo » Tue Nov 14, 2017 9:14 pm

I think the aspect ratio of the image is wrong, it should not cover the size of the flexbox, but the viewport size.

Post Reply

Who is online

Users browsing this forum: No registered users and 10 guests