Website with vertical images | scroll to different sections
Hello there, thank you in advance for your precious help without which I would be lost. I tried to find already existing discussion, but maybe I don't know what is the name of what I'm looking for.
I would like to do a part of a website like this http://nadinegoepfert.com/
with images that occupy the whole viewport height in background, one after the other, the thing is that I want to use a part of the width white to have text because my image is vertical so it will be dyptics text + image. What is the best way to achieve this? Should I upload a background with already a white part where i will put my text after (see attached) or is there a way to make an image the whole height of the browser and put some text centered next to it so that the white space becomes "responsive" with the reduction of the browser width?
Plus: do you know which effect is the one Nadine Goepfert's website is using to pass from one section to the other? Is not parallax, isn't it?
Thank you a lot
the idea i have is kind of this (done uploading an image with white space on the left)
Yes, there are a couple of ways to achieve this:
- Like you said with the white image background. For the mobile version you can insert a different image.
- CUSTOM CSS: You can style the background image with css that it only takes half of the screen.
ehi @mariusjopen thanks, but you did not mentioned the part of the scrolling down as Nadine Goepfert.. how can I achieve that effect of transition?
Is there a code I can use?
I got it... it's a full screen slider! but the thing i do not get is that with her website you just have to touch slightly the trackpad and you go down, while when I do it it hesitate between one slide and the other... mmm..
happy to hear it works now.
Can you post a link to your slow fullscreen slider?
this is probably because some of your pages are longer than the browser-height.
Then it needs a longer scroll.
At Nadines page all the pages have a exact browser height.
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it