What steps should I take to create a functional image scrolling effect similar to the one shown in this example?

Question

What steps should I take to create a functional image scrolling effect similar to the one shown in this example?

Recently, I came across and was intrigued by the "image slide effect" featured on their homepage.

The way the background image changes as you scroll up, leading you through different introductory slides before reaching the main content of the site caught my attention.

Out of curiosity and a desire to learn more about responsive web design, I attempted to replicate this effect. However, I've hit a roadblock and am unsure if my current approach is the best solution.

You can see how far I've gotten in this JSFiddle where I tried to recreate 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>

I initially set up three .slide containers stacked on top of each other within the viewport, utilizing z-index hierarchy and jQuery's .slideUp() function to animate the topmost container's movement.

However, I'm uncertain if this method is ideal, especially when it comes to selecting the correct container to fade out.

Is there a simpler and possibly more modular approach to achieve this effect? Are there effective jQuery/CSS selectors to determine the currently visible topmost .slide layer?

javascript jquery html css

Answer 1

Answer №1

To achieve the desired effect, you can preview it on JSFiddle: https://jsfiddle.net/d1xzc4jf/7/

Below is the jQuery code snippet relevant to this effect:

$(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 way to approach this issue is to have all divs initially hidden with their display property set to none, showing only the currently active one. This strategy ensures that an element is hidden after completing the slide-up animation using jQuery's slideUp function. You can then determine which div is visible and toggle its visibility while displaying the next one in your preferred method.

UPDATE:

The reason for the double-slideUp behavior during rapid scrolling, as opposed to double-slideDown, is due to how the visible property gets updated at different points: beginning of slideDown and end of slideUp.

To prevent the unintended double-slideUp when hard-scrolling, utilize a variable to indicate ongoing animations and employ callback functions to reset the variable once the animation concludes. Here's the implementation:

Add the following script at the bottom of your page:

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

Then replace your scroll function with this optimized version:

$(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;
            });
        }
    }
  }
});

This refined code ensures that the isbusy flag is reset to zero only after the animation completes via the callback functions, allowing the script to proceed without interruption.

Answer 2

To achieve the desired effect, you can preview it on JSFiddle: https://jsfiddle.net/d1xzc4jf/7/

Below is the jQuery code snippet relevant to this effect:

$(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 way to approach this issue is to have all divs initially hidden with their display property set to none, showing only the currently active one. This strategy ensures that an element is hidden after completing the slide-up animation using jQuery's slideUp function. You can then determine which div is visible and toggle its visibility while displaying the next one in your preferred method.

UPDATE:

The reason for the double-slideUp behavior during rapid scrolling, as opposed to double-slideDown, is due to how the visible property gets updated at different points: beginning of slideDown and end of slideUp.

To prevent the unintended double-slideUp when hard-scrolling, utilize a variable to indicate ongoing animations and employ callback functions to reset the variable once the animation concludes. Here's the implementation:

Add the following script at the bottom of your page:

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

Then replace your scroll function with this optimized version:

$(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;
            });
        }
    }
  }
});

This refined code ensures that the isbusy flag is reset to zero only after the animation completes via the callback functions, allowing the script to proceed without interruption.

Answer 3

Answer №2

It seems like you are interested in the slider provided below.

Answer 4

It seems like you are interested in the slider provided below.

What steps should I take to create a functional image scrolling effect similar to the one shown in this example?

Answer №1

Answer №2

Similar questions

What could be causing the 'margin-top' property not to function as expected?

The error is popping up as I try to deploy my Next.js application on Vercel

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

How can I match all routes in Express except for '/'?

CSS selector targeting an element based on the value of its table border

Ways to verify if the user has inputted a typeahed value

IE9 presents a frustrating issue where the jQuery select box value is returning as

The TextBox will alter its color following an incorrect submission

Unable to update a single object within an array using the spread operator

Preventing empty submissions through contact form validation

Attempting to dynamically link my "ng-true-value" in AngularJS

Slider handle for Material UI in React component reaches the range value

Displaying both input fields and buttons side by side on mobile devices using Bootstrap

The property mentioned was attempted to be accessed during the rendering process, however it is not defined on the instance

What is the correct way to include viewport width in pixels using CSS?

Combining two observable entities

Unable to save the ID of an element into a jQuery variable

What is the best way to control the number of fetch calls sent to an endpoint service ensuring that only a maximum of 10 calls are made every second?

Always maintaining a responsive and square aspect ratio div

Practical Tip for jQuery - Storing DOM Element in a Variable for Consistent Usage Across Your Codebase