How Can I Create Overlapping Images That Reveal Themselves As You Scroll

I am looking to create a scrolling effect similar to that shown here: http://www.seaham-hall.co.uk/ However I am unable to achieve the desired effect, and inspecting the sites code

Solution 1:

That's a nice effect. Here's one way to do it.

Put each image in a fixed position div, which takes up the entire viewport (initially) and has overflow:hidden.

Set each div's z-index to be higher than the next div's.

As the window scrolls, adjust the height of the divs as a function of the window height times the div's position (index) in the DOM, minus the window's scrollTop:

$(window).scroll(function() {
  $('.D').each(function(index) {
    $(this).css({
      height: $(window).height()*(index+1) - $(window).scrollTop()
    });
  });
});

Additional content will need a higher z-index than the image divs. And note that z-index works with positioned elements only.

Fiddle

Solution 2:

Your desired effect isn't technically a parallax background, but it's close enough that parallax jQuery frameworks should work for you.

I would suggest you research jQuery Parallax plugins as they'll likely provide the functionality you'd like without much custom work. Of course since you're dealing with large images it's also best to keep an eye on the resource management; a good plugin should be fairly efficient but others may be slow or resource intensive.

Solution 3:

Check this jquery plugin:ScrollMagic

usage:taken from github

The basic ScrollMagic design pattern is one controller, which has several scenes attached. Each scene has a definite start and end position and defines what happens when the container is scrolled to the specific offset.

/*
    Basic workflow example
*/// init controllervar controller = new ScrollMagic();

// assign handler "scene" and add it to controllervar scene = new ScrollScene({duration: 100})
            .setPin("#my-sticky-element") // pins the element for a scroll distance of 100px
            .addTo(controller); // add scene to controller// adding multiple scenes at oncevar scene2 = new ScrollScene();
var scene3;
controller.addScene([
    scene2,
    scene3 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"new ScrollScene({offset: 20}) // add anonymous scene
]);