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

عرض سلام و درود و ادب و احترام خدمت دوستان عزیز؛ امیدوارم عالیه عالیه عالی باشید. با آموزش طراحی خلاقانه باکس های وردپرسی در خدمت شما هستیم.

کد javascript

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

کد css

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;
}
اشتراک گذاری این ویدیو

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

عضویت و ورود
شماره موبایل خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد
پکیج بهترین فونت های سایت

بجای اینکه ، این فونت های ارزشمند رو جدا از هم بخری ،

میتونی مجموعه این فونت ها رو که حاصل جمع آوری 3 ساله هستش

 یکجا با بهای کمتری داشته باشی !