How can I create overlapping images that show themselves when scrolling
I want to create a scrolling effect similar to the one shown here: http://www.seaham-hall.co.uk/
However, I cannot achieve the desired effect, and checking the code of the sites does not give me any hints. Quite difficult for Google as it is also quite difficult to describe. The closest I can find to find a solution is this JSFiddle:
(function($){
/* Store the original positions */
var d1 = $('.one');
var d1orgtop = d1.position().top;
var d2 = $('.two');
var d2orgtop = d2.position().top;
var d3 = $('.three');
var d3orgtop = d3.position().top;
var d4 = $('.four');
var d4orgtop = d4.position().top;
/* respond to the scroll event */
$(window).scroll(function(){
/* get the current scroll position */
var st = $(window).scrollTop();
/* change classes based on section positions */
if (st >= d1orgtop) {
d1.addClass('latched');
} else {
d1.removeClass('latched');
}
if (st >= d2orgtop) {
d2.addClass('latched');
} else {
d2.removeClass('latched');
}
if (st >= d3orgtop) {
d3.addClass('latched');
} else {
d3.removeClass('latched');
}
if (st >= d4orgtop) {
d4.addClass('latched');
} else {
d4.removeClass('latched');
}
});
})(window.jQuery);
However I'm not sure what is going in the right direction, this pulls the images up and covers the previous image, but note that on the Seaham Hall site, the images do not seem to move at all, they are stationary and become shown when scrolling.
How can I recreate this effect? My initial thought was that the first image zoomed out when scrolling from 1000px to 0px, and the second image zoomed to 1000px, and as you keep scrolling that image, it shrinks and the third grows, etc. ... However, this means that after the first image, all other images have an initial size of 0px, and technically there will be no page scrolling initially, so this is a problem.
My second thought is that maybe the second image is fixed on the page, the first image slides up to reveal the second, when you scroll, the second image won't move. After the first image has disappeared from the top of the page, the second image is detached from the page and allows scrolling upward, while the third image is attached and displayed as the second moves up, this will give the exact effect seen in the Seaham site, but I do not mean that this is the correct answer.
If anyone can point me to tutorials or a JSFiddle with a basic concept, I can probably figure it out. It's just a dead end as to which direction it fits.
source to share
This is a good effect. Here's one way to do it.
Place each image in a fixed position div
that occupies the entire viewport (initially) and has overflow:hidden
.
Set each div
z-index higher than the next div
.
As a window scroll, adjust the height div
as a function of the window height multiplied by the div position (index) in the DOM, minus the window scrollTop:
$(window).scroll(function() {
$('.D').each(function(index) {
$(this).css({
height: $(window).height()*(index+1) - $(window).scrollTop()
});
});
});
The additional content will require a higher z-index than the div
s image . And note that z-index only works on positioned elements.
Fiddle
source to share
Your desired effect is not technically a parallax background , but it is close enough for the jQuery parallax framework to work for you.
I suggest you look into jQuery Parallax plugins as they will most likely provide you with functionality without a lot of user work. Of course, since you are dealing with large images it is also better to keep an eye on resource management; a good plugin should be efficient enough, but others can be slow or resource intensive.
source to share
Check out this jquery plugin: ScrollMagic
usage taken from github
The main ScrollMagic template is a single controller that has multiple scenes. Each scene has a specific start and end position and determines what happens when the container is scrolled to a specific offset.
/*
Basic workflow example
*/
// init controller
var controller = new ScrollMagic();
// assign handler "scene" and add it to controller
var 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 once
var 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
]);
source to share