In this Elementor tutorial, I will show you how I was able to recreate the expanding sections on scroll effect from the Walmart + (https://www.walmart.com/plus) website.
I learned a lot of new CSS tricks creating this video tutorial. I think this effect came out nice and I plan to use it in the future on client websites.
Change Background Color On Scroll Video:
https://www.youtube.com/watch?v=QE7akMQ2xGk
Sticky Scrolling Tab Effect Video:
https://www.youtube.com/watch?v=FB5XGftAj54
Timestamps:
- 0:00 Introduction
- 2:05 Tutorial Starts
- 3:54 JavaScript Code Explained
- 10:22 CSS Code Explained
JavaScript Code:
<script>
jQuery(function($){
$(window).scroll(function() {
// Wicky Design
// selectors
var $window = $(window),
$panel = $('.panel');
$panel2 = $('.panel2');
$panel3 = $('.panel3');
$panel4 = $('.panel4');
$section1 = $('.section1');
$section2 = $('.section2');
$section3 = $('.section3');
$section4 = $('.section4');
var scroll = $window.scrollTop() + ($window.height() / 2);
$panel.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$section1.addClass("showdiv");
}
});
$panel2.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$section2.addClass("showdiv");
}
});
$panel3.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$section3.addClass("showdiv");
}
});
$panel4.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$section4.addClass("showdiv");
}
});
// wickydesign.com
}).scroll();
});
</script>
CSS Code:
.section1,.section2,.section3,.section4{max-height: 0;overflow: hidden;}
.section1.showdiv,.section2.showdiv,.section3.showdiv,.section4.showdiv{
transition-property: max-height;
transition-duration: 700ms;
transition-timing-function: ease-in-out;
transition-delay: 0ms;
overflow: hidden;
max-height: 500px;
}
