طراحی خلاقانه باکس وردپرسی

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