Achieving a background image effect similar to this one?

Hi Daniel,

For the first section that is just a fixed background image using css:

.selector {
  background-image: url('my-image.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

This in itself can really smarten up the design of a site.

To achieve the affect of the objects coming in as you scroll you need a little javascript or In your case I would use jQuery to keep it simple and you already have it with WordPress so might as well use it.

I have only visited one site that implements a decent version of what is known as the parallax effect, and that is apple.com.

There are plugins and many have tried but if you get it wrong and it ends up jerky and sticky, it is going to ruin a decent site by making it look like it is slow.

I have made some adjustments to a pen i was working on a while ago here where I use css transforms and a little jQuery to slide sections up when they come in to view. You could certainly utilize the jQuery to add your own effects.

Here is another pen that uses jQuery to add a shadow to the navbar on scroll. You can add any css you like however this technique shouldn't be used for other items on the page as you would need to specify explicit scroll top values and in responsive design that may be near impossible.

The about us section and testimonials sections have just been given a rgba() value with a low alpha for example the about us may be rgba(0, 0, 0, 0.2), because there is a fixed image it can then be seen through the semi transparent rgba you have just declared and the same goes for testimonials it is just a yellow rgba with a semi transparent alpha.

It is a pretty neat trick really.

Hope this helps and I really like the theme and the semi transparent backgrounds over the fixed image, if you want me to whip up a pen to show you some code of how i would do it just let me know :)

Craig