Hero image attachment

[slurp]

Hi!

I thought it wise to start another thread for this topic, so others might find it more easily, even though I am asking questions in another thread already… 😛

Is it possible to attach the hero image in Elite in a similar way to the Moonrise theme?
In Elite it scrolls away with the rest of the site, but in Moonrise the site kind of scrolls over the image. Also, is it possible to make it scroll slower than the rest of the site, thus creating an illusion of depth on the site?

Cheers yet again!:)

[Bill Robbins]

Manuel,

That’s an excellent question. You can do some of that on the home page. Essentially what happens with a parallax effect like that is the content that’s lower on the page covers up the content that’s higher as the page scrolls.

On the home page, the various sections are full width so they can completely cover the hero. On the inside pages, the content area only covers a portion of the screen so it would leave the left and right hand side of the hero visible.

If you want to tackle it on the home page, here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .home #hero-section {
   	position: fixed;
   	z-index: 0;
   }
   
   #home-one {
   	margin-top: 100%	
   }
   
   #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;
   }
   

3. Update your settings.

---

If you want to add a different scrolling rate, that can be accomplished too. You’ll need to add this snippet to the Custom CSS too:

#hero-section {
	background-position: center 0;
}

You’ll also need to make a small edit to the theme. Here’s how:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose custom-js.php
3. Scroll down near the bottom until you see this:

   
   </script>
   

   and right above that paste this:

   
   // parallax effect for the hero 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' });
   		      
   	});
   

4. Save your changes.

That will add in a slightly different scrolling rate for the background image. It’ll also fade out the text as it scrolls away.

Let me know if you have any questions,
Bill

[slurp]

Hi, Bill!

This worked perfectly, except for one minor detail: I had to set this value `#home-one {
margin-top: 100%
}` to 50%. Maybe due to the size of the original background image?
Nevertheless, it works perfectly. And your clear, step-by-step instructions are truly great!

Thank you!:)

[Bill Robbins]

Glad you’re good to go Manuel.

Have a great evening 🙂

[Author]

Posts