I just stumbled upon http://www.newego.de/ and would like to know how the "image slide effekt" they are using on the initial page is done.
When you scroll up the background image changes and after you went through all their "intro/welcome"-page slides you are guided to the main website content.
I tried replicating the effect out of curiosity and for learning purposes, hence I recently started digging into responsive webdesign, but I'm kind of stuck and not sure if my approach is a good solution.
This JSFiddle is how far I've come attempting to replicate the image slider.
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
console.log('scrolling down');
}
else {
console.log('scrolling up');
$('.s1').slideUp('slow');
}
});
* { margin: 0; padding: 0 }
#menubar {
width: 100%;
background-color: orange;
height: 60px;
}
.slide {
position: absolute;
width: 100%;
top: 60px;
bottom: 0;
}
.slide.s1 { background-color: green; }
.slide.s2 { background-color: red; }
.slide.s3 { background-color: cornflowerblue; }
.l1 { z-index: 3; }
.l2 { z-index: 2; }
.l3 { z-index: 1; }
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<html>
<body>
<header id="menubar"><p>hi im a header</p></header>
<section class="slide s1 l1"><p>im the first</p></section>
<section class="slide s2 l2"><p>im the second</p></section>
<section class="slide s3 l3"><p>im the third</p></section>
</body>
</html>
My thinking was to just put three .slide
container which fill in the "empty viewport space" on top of each other, using a hierarchy of z-index
and then just slide up the topmost .slide
container using jQuery's .slideUp()
function.
However, I'm not sure if that is a good aproach as I do not know how to select the topmost container to be able to fade it out.
Is there a more simple (and if possible more modular) approach that I should pursue? Is there an effective way (jQuery/CSS selector) to find the topmost .slide
-layer that is currently visible?