How to Make Spiraling 3D Stacking Cards in Elementor (WordPress Tutorial)

So if you follow along in the video, I refer to this blog post for you to enter code at certain point into the HTML widget, so below is everything you will need!

The Following are the css class names I used in the tutorial:

				
					reboot-stacking-card-area

reboot-stacked-cards


				
			

The Following code goes into the Card Section Container (reboot-stacking-card-area):

				
					selector{
    --card-scroll-height: 400;
    --card-rotate: 12;
}
selector .reboot-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;
}
				
			

The Following code goes into the HTML widget:

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

if(!rebootNonce100){
    
var rebootNonce100 = true

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

function cardSlideUp(){

$('.reboot-stacking-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('reboot-active-card')
    cards[i].each(function(j){
        if( j <= index ) {
            $(this).addClass('reboot-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(){
$('.reboot-stacking-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
    cards[i].each(function(j) {
        $(this).css({
            'transform': `rotate(-${j * cardRotate[i]}deg)`,
            'z-index': cards[i].length - j
        })
    })
    $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(){
$('.reboot-stacking-card-area').each(function(i){
    var $this = $(this)
    cards[i] = $this.find('.reboot-stacked-cards > .e-con, .reboot-stacked-cards > .e-container, .reboot-stacked-cards > .e-con-inner > .e-con, .reboot-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('.reboot-stacked-cards')
})

setValues()
cardSlideUp()
}

init()
    
})
}
</script>
				
			

Other Articles

How to Create an Advanced Slider with Card Carousel in Elementor (WordPress Tutorial)

https://youtu.be/fdFLm-lKBBk So if you follow along in the video, I refer to this blog post for you to enter code ...

How to Make Spiraling 3D Stacking Cards in Elementor (WordPress Tutorial)

https://youtu.be/Z0a9Cl9UnSY So if you follow along in the video, I refer to this blog post for you to enter code ...

How to Build an App-Like Icon Navigation Menu in Elementor with Magic Indicator

https://youtu.be/Wn8PCSrvA5g So if you follow along in the video, I refer to this blog post for you to enter code ...

How to Create a Stunning Full-Width Navigation Menu with Hover Images in Elementor | WordPress Popup Menu

https://youtu.be/2cWquULqFAw So if you follow along in the video, I refer to this blog post for you to enter code ...