Homepage issues

Support Area Forums Kerygma Homepage issues

This topic contains 2 replies, has 2 voices, and was last updated by  Vanessa Ekno 8 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://faithbiblechurchtx.org
  • Author
    Posts
  • #38596

    Vanessa Ekno
    Participant

    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?

    #38618

    Bill Robbins
    Keymaster

    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

    #38620

    Vanessa Ekno
    Participant

    That worked. Thanks so much!

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Homepage issues’ is closed to new replies.