Want to get this as ready made template with just 1 CLICK INSTALL?
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>