5

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?

2 Answers 2

2

Here's the JSFiddle for the effect you were going for: https://jsfiddle.net/d1xzc4jf/7/

Here's the relevant jQuery code:

$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) 
  {
    console.log('scrolling down');
    if ($('.s2').is(':visible')) { $('.s3').slideDown('slow'); }
    else if ($('.s1').is(':visible')) { $('.s2').slideDown('slow'); }
  }
  else 
  {
    console.log('scrolling up');
    if ($('.s3').is(':visible')) { $('.s3').slideUp('slow'); }
    else if ($('.s2').is(':visible')) { $('.s2').slideUp('slow'); }        
  }
});

One approach would be to place all divs and set their display property to none except for the one to currently display. This is what happens to an item once it is done sliding up from the jQuery slideUp function. You could check to see which one is visible and have it hide while the next one is being displayed using whatever method you like.

UPDATE:

The reason the double-slideUp happens when double-scrolling, but not a double-slideDown is because the visible property is set at the beginning of a slideDown, but it is set at the end of a slideUp.

To prevent the double-slideUp effect from hard scrolling, set a variable to indicate an animation is busy when you start an animation and use a callback function to set the variable to not busy when the animation finishes, like this:

First, put this at the bottom of your page:

<script> var isbusy = 0; </script>

Then use this code for your scroll function:

$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    console.log('scrolling up');
    if ($('.s2').is(':visible')) { 
        if (isbusy == 0) 
        {
            isbusy = 1;
            $('.s3').slideDown('slow', function() {
                isbusy = 0;
            })                
        }
    } 
    else 
    {            
        if ($('.s1').is(':visible')) 
        { 
            if (isbusy == 0)
            {
                isbusy = 1;
                $('.s2').slideDown('slow', function(){
                    isbusy = 0;
                });
            }
        }           
    }
}
else 
{
    console.log('scrolling down');
    if ($('.s3').is(':visible')) 
    {
        if (isbusy == 0) 
        {
            isbusy = 1;
            $('.s3').slideUp('slow', function(){
                isbusy = 0;
            }); 
        }
    }
    else if ($('.s2').is(':visible')) 
    {
        if (isbusy == 0)
        {
            isbusy = 1;
            $('.s2').slideUp('slow', function(){
                isbusy = 0;
            });
        }
    }
  }
});

The reason this code works is that the callback functions are executed when the animation finishes, thus changing isbusy to zero when the animation is complete, while not blocking more code from running in the meantime.

5
  • Thank you, your solution is kind of what I'm looking for. Just one issue that I can't pin-point: when I scroll down really hard on my mouse's wheel (like, more than just one mouse scroll gets registered) then everything works fine, one slide is being slided down and the next layer is revealed. But when I do the same scrolling the mousewheel up, more slides are being slided down simultaneously. To reproduce go to your JSFiddle scroll to the green layer and then scroll your wheel up really hard. How to only allow sliding after the first animation finished?
    – phew
    Commented Jun 27, 2016 at 22:21
  • 1
    I changed my answer to include a variable that is set when an animation starts and is reset when it finishes, preventing a double-animation from happening if you scroll hard. Updated JSFiddle here: jsfiddle.net/d1xzc4jf/8
    – Sgt AJ
    Commented Jun 27, 2016 at 23:51
  • For me sometimes it gets stuck at the green page, but I got your point. I'll see if I can figure out something similiar on my own. Thank you for the help!
    – phew
    Commented Jun 28, 2016 at 9:05
  • 1
    I see. I fixed that and the ability to rapidly scroll back and forth and cause both a slideUp and a slideDown at the same time. JSFiddle here: jsfiddle.net/d1xzc4jf/12 Also, you're welcome!
    – Sgt AJ
    Commented Jun 28, 2016 at 14:50
  • I think I've found a slick solution to prevent animations while one slide is still being animated. $('.slide').is(':animated') returns true if an animation is still in progress. Here is the JSFiddle.
    – phew
    Commented Jun 28, 2016 at 21:38
0

I believe you are looking the below slider.

http://alvarotrigo.com/fullPage/

1
  • This is definitly a useful plug-in, though I am trying to reproduce the sliding effect from scratch by myself for learning purposes.
    – phew
    Commented Jun 27, 2016 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.