En este post estara el código de la animación chingona que viste en el video, que trata de la animación con desplazamiento de tarjetas apiladas en elementor, es decir cuando haces scroll se van apilando, debajo te dejo los códigos
Fragmento de código CSS para el efecto de desplazamiento de tarjetas apiladas:
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;
}
Fragmento de código JavaScript para el efecto de desplazamiento de tarjetas apiladas:
<script type="litespeed/javascript" data-src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="litespeed/javascript">if(!MDWNonce100){var MDWNonce100=!0
$(document).ready(function(){var previousScrollTop=[],cards=[],cardScrollHeight=[],cardRotate=[],cardContainer=[],stickyTop=[],stickyCon=[]
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
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(){$('.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>
Aqui te vuelvo a dejar el video por si lo quieres volver a ver 👇
Reproducir vídeo
