Homepage issues

[Vanessa Ekno]

On our home page the words disappear before you can read it all especially on phones, tablets, and computers with smaller screens. It show fine on the iMac because it’s a big screen but nothing else. Is there a way I could make the words not disappear as you scroll on that page?

[Bill Robbins]

Hi Vanessa,

Great question there. The text disappearing is part of the parallax effect in the hero area. As you scroll down the text moves to the top and fades out. The amount of fading is relative to the distance to the top of the screen. So at the top it is 100% opaque, but as you scroll down, it fades away.

It looks like the services times have been added to the hero’s content. That’s perfectly fine, but their position at the bottom of the hero won’t be taken into account by the javascript that runs the fading.

Here’s what I would suggest, go to the appearance section in your WordPress dashboard and click on edit. From the list of files on your right, choose custom-js.php and locate this section:

	jQuery(window).scroll(function() {	      
	
		scrollPos = jQuery(this).scrollTop();
		
		jQuery('.hero-copy').css({
			'padding-top' : -(scrollPos/3)+"px",
			'opacity' : 1-(scrollPos/300)
		});
		
		jQuery('#hero-section').css({'backgroundPosition': 'center -' + jQuery(window).scrollTop() / 4 + 'px' });
		      
	});

Change that to be like this:

	jQuery(window).scroll(function() {	      
	
		scrollPos = jQuery(this).scrollTop();
		
		jQuery('.hero-copy').css({
			'padding-top' : -(scrollPos/3)+"px",
			'opacity' : 1-(scrollPos/300)
		});
		
		jQuery('.home .hero-copy').css({
			'padding-top' : -(scrollPos/3)+"px",
			'opacity' : 1
		});
		
		jQuery('#hero-section').css({'backgroundPosition': 'center -' + jQuery(window).scrollTop() / 4 + 'px' });
		      
	});

and save your changes. Hopefully that will change the parallax script so that it does not affect the opacity on the home page and in turn keep the text visible on smaller screens.

Have a great 2017!
Bill

[Vanessa Ekno]

That worked. Thanks so much!

[Author]

Posts