WORDPRESS

tarjeta con efecto al hacer scroll down, wordpress 188, tutorial español

En SYSPA SOCIAL aprenderemos como hacer una tarjeta que cambia al hacer scroll hacia abajo o scroll down, dentro de nuestro sitio o pagina web wordpress.

Los efectos en elementor nos dan una posibilidad enorme de hacer que nuestro sitio o pagina web wordpress sean únicos y muy llamativos. Este es un gran ejemplo de esto, ya que veremos un efecto que además de impresionante, es muy útil.

Solo tienes que dedicarle unos minutos y veras hermosos resultados!.

Principales puntos del tutorial wordpress tarjeta efecto scroll

Creamos una nueva pagina.
Creamos los secciones o contenedores.
Creamos el contenido asociado a nuestras tarjetas.
Creamos la primer tarjeta y la replicamos.
Creamos el efecto para que nuestras tarjetas cambien al hacer scroll down.

Videos relacionados con wordpress tarjeta efecto scroll

🖐️ Pagina Web GRATIS, dominio, hosting, SSL, wordpress 1 tutorial español

En este impresionante tutorial, veremos algo increíble, TODA TU PAGINA WEB TOTALMENTE GRATIS / FREE / $ 0.

DOMINIO, HOSTING, PAGINA WEB y certificado SSL / HTTPS, TODO GRATIS Y DE POR VIDA.

SINCERAMENTE NO VI OTROS TUTORIALES QUE LOGRAN TODO EL CONJUNTO GRATIS Y DE CALIDAD.

🖐️ Efecto vidrio en elementor (glass effect), wordpress 122 tutorial o curso español.
Veremos como crear el efecto vidrio en elementor, para que puedas crear tarjetas en tu pagina web wordpress.

🖐️ Tarjeta animada con marcos, elementor efecto, wordpress 165, tutorial español.

Aprenderemos como crear tarjetas animadas con marcos, utilizando elementor para tu pagina o sitio web wordpress.

🖐️ Como hacer tu pagina web con elementor, WordPress 48, tutorial o curso español.
Agregaremos un chat de whatsapp a tu pagina web wordpress de manera simple y gratis.

Código Utilizado

CSS tarjeta scroll down

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

JAVA SCRIPT tarjeta scroll down

<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>

Tenemos Cientos de tutoriales Wordrpess

Inicia aquí gratis !

Accede al listado completo de tutoriales wordpress.