How can images be made to appear scrolling one over another using JavaScript/jQuery ?

Last Updated : 21 Feb, 2023

In this article, we will discuss how can images be made to appear by scrolling one over another. When we scroll an image and one image will be shown on the screen by hovering. When we click on any button which is shown on the screen and one image will be shown for a short time as a loading then also these operations will show on the display screen. In both methods, we will know how can we scroll images and display another page. We will know the right way for images to appear by scrolling on the display screen using jQuery.

Approach 1: Image hiding during scrolling

We create a function through which we will scroll up the image and increase and decrease the image size. When we scroll up the page, the image will be scrolled up.

Example 1: This example illustrates the appearance of an image on a scroll over another. Here, we are hiding the Image during scrolling.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"> 
    <meta name="viewport" 
          content= "width=device-width,  
                    initial-scale=1.0"> 
    <title>Image Scrolling</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
    </script> 
    <style> 
        .img{ 
            width: 1000px; 
            height: 1000px; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green" class="GFG"> 
        GeeksForGeeks 
    </h1> 
    <h2>Image Scrolling</h2> 
    <div style="margin-top:150px;"> 
        Please scroll down slowly to see effect. 
    </div> 
    <div style="margin-top:150px;"> 
        Please scroll down slowly to see effect. 
    </div> 
    <div class="myimgDiv"> 
        <img class="img" 
             src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230128220855/download.jpg" 
            alt="Manager" 
            class="img-responsive img-thumbnail"/> 
    </div> 
    <div style="margin-top:100px;"> 
        Please scroll up slowly to see effect. 
    </div> 
    <div style="margin-top:100px;"> 
        Please scroll up slowly to see effect. 
    </div> 
  
    <script> 
        $(window).scroll(function() { 
            if ($(this).scrollTop()>700){ 
                $('.myimgDiv').hide(1000); 
            } 
            else{     
                $(document).ready(function() { 
                    var images = $('#scrolling-container img'); 
                    var width = images[0].width; 
                    var currentImage = 0; 
  
                    setInterval(function() { 
                    currentImage++; 
                    if (currentImage === images.length) { 
                      currentImage = 0; 
                    } 
  
                        $('#scrolling-container').animate({ 
                          scrollLeft: currentImage * width 
                        }, 1000); 
                    }, 2000); 
                }); 
  
                $('.myimgDiv').show(1000); 
            } 
        }); 
    </script> 
</body> 
</html>

Output:

Approach 2: Page change by setting the image displaying on the display screen.

In this approach, we will create two pages and between these pages, we will add image scrolling. When we click on a button /link, a scrolling image will display on the screen for some time. We directly move the first page to the second-page heading and vice versa.

Example 2: This example illustrates the appearance of an image on a scroll over another. Here, the page change by setting the image displaying on the display screen.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content= "width=device-width,  
                    initial-scale=1.0"> 
    <title>Transition</title> 
  
    <style> 
        .loader { 
            position: absolute; 
            width: 100%; 
            height: 100vh; 
            z-index: 99; 
            left: -100%; 
            transition: .1s; 
        } 
  
        img { 
            position: absolute; 
            left: 15%; 
            top: -2%; 
            width: 22%; 
            height: 30%; 
        } 
  
        .page1 { 
            position: absolute; 
            width: 100%; 
            height: 100vh; 
        } 
  
        .page2 { 
            position: absolute; 
            width: 100%; 
            height: 100vh; 
            display: none; 
        } 
  
        h4 { 
            margin-left: 15%; 
            font-size: 25px; 
            color: green; 
  
        } 
  
        a { 
            margin-left: 16.9%; 
            font-size: 15px; 
            padding: 4px 8px; 
            border: 2px solid black; 
            border-radius: 10px; 
            font-weight: bold; 
            cursor: pointer; 
        } 
  
        a:hover { 
            color: white; 
            background-color: black; 
        } 
  
        .gfg { 
            margin-left: 280px; 
            margin-top: -20px; 
            font-size: 20px; 
        } 
    </style> 
</head> 
<body> 
    <div class="loader" 
         id="loader"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230128220855/download.jpg"
             alt="gfg_img"> 
    </div> 
  
    <div class="page1" id="page1"> 
        <h4> GeeksforGeeks 1st </h4> 
        <h5 class="gfg">Image Scrolling</h5> 
        <a onclick="appearP2() ">Image Scroll</a> 
    </div> 
    <div class="page2" id="page2"> 
        <h4> GeeksforGeeks 2nd </h4> 
        <h5 class="gfg">Image Scrolling</h5> 
        <a onclick="appearP1() ">Image Scroll</a> 
    </div> 
    
    <script> 
        
        // Function for page one  
        function appearP2() { 
  
            // Code for loader and both pages  
            var loader = document.getElementById('loader'); 
            var page1 = document.getElementById('page1'); 
            var page2 = document.getElementById('page2'); 
            loader.style.left = "0"; 
  
            // Timeout method which will display our  
              // next page and block first page  
            setTimeout(function () { 
                loader.style.left = "-100%"; 
                page1.style.display = "none"; 
                page2.style.display = 'block'; 
                
                // Set time 2000 to show transition  
            }, 2000) 
        } 
  
        // Function for page two  
        function appearP1() { 
              
              // Code for loader and both pages  
            var loader = document.getElementById('loader'); 
            var page1 = document.getElementById('page1'); 
            var page2 = document.getElementById('page2'); 
            loader.style.left = "0"; 
  
            // Timeout method which will display our next page 
            // and block second page  
            setTimeout(function () { 
                loader.style.left = "-100%"; 
                page1.style.display = "block"; 
                page2.style.display = 'none'; 
  
                // Set time 2000 to show transition  
            }, 2000) 
        } 
    </script> 
</body> 
</html>