Facebook Instagram

Tutorial

Elementor Change image on mouse wheel

Uses Plugins

Elementor PRO

Video

Play Video

Description

This tutorial is in response to a question in the Global Elementor Facebook Community.

The author wanted to know how to achieve the image stepping effect here https://www.apple.com/iphone-se/

This tutorial shows both how to extract frames from a video and how to achieve this using a standard Elementor Basic Gallery Widget, and custom JavaScript.

Steps

  1. Create a section with dummy content
  2. Create a middle section
  3. CSS
  4. JavaScript
1

Create a section with dummy content

Create a section with any dummy content, to be used at the top and bottom. This is just for scrolling.

2

Create a middle section

Create a standard section to contain the Gallery Widget.

  1. Set-top and bottom padding
  2. Set a background color
  3. Set the Section ID to "wheel-progress"
  4. Add a standard Basic Gallery Widget and select images

 

3

CSS

Copy the CSS below.

Paste it into the above section - Advanced->Custom CSS

4

JavaScript

  1. Add an HTML Widget to the editor, just below the Basic Gallery Widget.
  2. Copy the Javascript Below and paste it into the  "Content"

Code (click to copy)

JavaScript code for HTML Widget (javascript)

<script>
    ;( w=> {
        const sectionSelectorID = 'wheel-progress';
        const targetSection = document.getElementById(sectionSelectorID);
        const imageItems = targetSection.querySelectorAll('.gallery-item');
        const imageCount = imageItems.length;
        let currentImage = 0;
        
        const init = ()=>{
            targetSection.addEventListener('wheel', (e)=>{
                if(e.deltaY > 0){
                    newItem = currentImage +1;   
                }else{
                    newItem = currentImage -1; 
                }
                if(newItem > -1 && newItem < imageCount){
                    e.preventDefault();
                    targetSection.scrollIntoView({behavior: "smooth", block: "center"})
                    updateItem(newItem);
                }
            })
        }
        
        const updateItem = i => {
            /* Hide All */
            imageItems.forEach((el)=>{
                el.style.display = 'none';
            })
            /* Show only the current image */
            imageItems[i].style.display = 'block';
            
            currentImage = i;
        }
        
         w.addEventListener('DOMContentLoaded', init);
    })(window);
</script>

CSS for Section containing the Gallery (css)

/* initially hide all except the first */
selector .gallery-item:nth-of-type(n+2){
    display: none;
}

Downloads

Note: Depending on your Browser, JSON files may open in your Browser when clicked. To save the JSON, Right-click the “download” link, click “save link as”.

DescriptionAction
Demo page template Download