Make this Stacked Card Scrolling Effect/Animation in Elementor

 

 

CSS Code Snippet for Stacked Card Scrolling Effect:

selector{
    --card-scroll-height: 400;
    --card-rotate: 12;
}
selector .mdw-active-card{
    transform: translateY(-100vh) rotate(-60deg) !important;
    transition:1s;
    visibility: hidden;
    transform-origin: bottom left;
}
selector > .e-con,
selector > .e-container,
selector > .e-con-inner > .e-con,
selector > .e-con-inner > .e-container{
    position: sticky;
    top:0;
}

 

JavaScript Code Snippet for Stacked Card Scrolling Effect:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

if(!MDWNonce100){
    
var MDWNonce100 = true

$(document).ready(function() {
    
var previousScrollTop = [],
cards = [],
cardScrollHeight = [],
cardRotate = [],
cardContainer = [],
stickyTop = [],
stickyCon = []


// Sliding crads on scroll

function cardSlideUp(){

$('.mdw-stacked-card-area').each(function(i){
    
    var $this = $(this),
    scrollTop = $(document).scrollTop(),
    cardAreaTop = $this.offset().top,
    index = Math.floor((scrollTop - cardAreaTop - stickyTop[i]) / cardScrollHeight[i]),
    totalCards = cards[i].length
    
    cards[i].removeClass('mdw-active-card')
    cards[i].each(function(j){
        if( j <= index ) {
            $(this).addClass('mdw-active-card')
        }
        if(index >= -1 && index < totalCards - 1){
            $(this).css({
                'transform': `rotate(${ -1*j*cardRotate[i] + (index+1)*cardRotate[i] }deg)`
            })
        }
    })
    
    previousScrollTop[i] = scrollTop
})

}


function setValues(){

$('.mdw-stacked-card-area').each(function(i){
    
    var $this = $(this)
    
    stickyTop[i] = 0
    
    if(stickyCon[i].outerHeight() > $(window).height()){
        stickyTop[i] = cardContainer[i].offset().top - stickyCon[i].offset().top - $(window).height()/2
    }
    stickyCon[i].css('top', -1*stickyTop[i])
    
    cardScrollHeight[i] = $this.css('--card-scroll-height') ? parseInt($this.css('--card-scroll-height').trim()) : 400
    cardRotate[i] = $this.css('--card-rotate') ? parseInt($this.css('--card-rotate').trim()) : 9
    
    
    // Rotating cards
    
    cards[i].each(function(j) {
        $(this).css({
            'transform': `rotate(-${j * cardRotate[i]}deg)`,
            'z-index': cards[i].length - j
        })
    })


    // Card area height
    
    $this.css('height', stickyCon[i].outerHeight() +  ((cards[i].length - 1) * cardScrollHeight[i]) + 'px' )
})

}

$(document).on('scroll', cardSlideUp)
$(window).on('resize', function(){
    setValues()
    cardSlideUp()
})


function init(){

$('.mdw-stacked-card-area').each(function(i){
    
    var $this = $(this)
    
    cards[i] = $this.find('.mdw-stacked-cards > .e-con, .mdw-stacked-cards > .e-container, .mdw-stacked-cards > .e-con-inner > .e-con, .mdw-stacked-cards > .e-con-inner > .e-container')
    stickyCon[i] = $this.children('.e-con, .e-container').eq(0)
    
    stickyCon[i].parents().each(function(){
        if( !$(this).is('html') ){ $(this).css('overflow', 'visible') }
    })
    
    previousScrollTop[i] = $(document).scrollTop()
    cardContainer[i] = $this.find('.mdw-stacked-cards')
})

setValues()
cardSlideUp()

}

init()
    
})
}
</script>