Hero image attachment – part 2

[slurp]

Hi, Bill!

I previously asked about creating the parallax effect for the hero image here:

Hero image attachment

At that time I managed to get it working by changing the margin-top value from 100% to 50%. However, I now noticed that it doesn’t work for instance on a Retina display MacBook pro. The position of the second home section is too high up so that it covers part of the hero image. With the value set at 100% the problem is the same on the Mac as on PC (both Chrome and Safari): one has to scroll quite a bit to get to the second home section.
Is there a way to make the value dependent on the screen size of the visitor? I tried playing around with the percentage, but to results were not satisfactory as the second home section just moved up and down.

Thank you already in advance!

[Bill Robbins]

To be honest, I couldn’t figure out how having the top margin set at 50% that was going to work, but if you were happy, then I was too.

There is another unit of measure we can use other than % here. It’s called vh for vertical height. If you’d like to give it a try, use this for your Custom CSS instead of the earlier code:

.home #hero-section {
	position: fixed;
	z-index: 0;
	height: 100vh;
}

#home-one {
	margin-top: 100vh;	
}

#home-one,
#home-two,
#home-three,
#home-four,
#home-five,
#home-six,
#home-seven,
#home-eight,
#home-nine,
#home-ten {
	position: relative;
	z-index: 1;
}

Give that a try and see if it doesn’t line things up a bit better for you.

Take care,
Bill

[slurp]

Hi!

This fixed the problem on computer!
I tested on PC: Chrome, Firefox and IE; MacBook: Safari and Chrome. But on Android (Chrome) and iPad (Chrome and Safari) the home sections were slow to render.
By this I mean that when scrolling down, the hero image slid in to view from under the previous home section and covered the next one, until the scrolling stopped and the home section would come forward.
Also the navigation bar turned black only after the scrolling stopped, and the hero image text fade out was spastic.

Is there any way to fix this?

Thank you so much for your help!

[Bill Robbins]

Here’s one idea to help with the transparent backgrounds as you scroll. Try adding this CSS to the site:

.home #cbp-so-scroller {
     background-color: #fff;
}

Since you have all the home blocks set to be white, that will set the animated wrapper that surrounds them all to be white rather than transparent. That may help.

Offering customization tips on mobile devices is not as simple as it is for a desktop because I can’t test them out.

Looking at your site, the scrolling has improved as you’ve added content to the home page. Give this a try and see how it goes.

Bill

[slurp]

Hi!

This seemed to help somewhat, but the problem persist: the hero image is visible as a background until the scrolling has stopped.
I don’t know, whether this is related to the last snippet you provided, but the navigation bar started acting weird (flashing and spastic vertical jitter) when scrolling.
I now tried disabling the parallax and the last snippet you provided in the custom-js and custom-css. This helped the most with smoothness on all devices, but the same thing is still happening with the background being visible while scrolling.

Thanks!

[Bill Robbins]

You might consider just disabling the fixed hero section on smaller screens. It would be better to have it scroll normally than be a distraction to visitors.

You could do that by wrapping the css that changes the hero section in a media query like this:

@media only screen and (min-width: 1024px) {

	.home #hero-section {
		position: fixed;
		z-index: 0;
		height: 100vh;
	}
	
	#home-one {
		margin-top: 100vh;	
	}
	
	#home-one,
	#home-two,
	#home-three,
	#home-four,
	#home-five,
	#home-six,
	#home-seven,
	#home-eight,
	#home-nine,
	#home-ten {
		position: relative;
		z-index: 1;
	}

}

[slurp]

Wow, this was a beautifully simple solution!:) Thank you!

[Bill Robbins]

Sorry I didn’t think of that option sooner. I’ve had the worst cold of my life this week and I’m not in top form.

Parallax scrolling and mobile devices are not friends.

[slurp]

Oh, sorry to hear that — I hope you get well soon! And all the more reason for me to express my gratitude for your help. Thank you!:)

[Bill Robbins]

Thanks…I’m happy to help out 🙂

[Author]

Posts