چشمان چرخان با المنتور

سلام و درود خدمت دوستان پرانرژی خودم؛ امیدوارم عالیه عالیه عالی باشید. با آموزش افکت چشم چرخان در خدمت شما هستیم. دوستان عزیز فقط دقت کنید از کانتینر استفاده کردیم پس شما هم از کانتینر استفاده کنید تا بهترین نتیجه رو بگیرید.

کد اسکریپ مد نظر

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
if(!MDWNonce101){

var MDWNonce101 = true

$(document).ready(function() {

// Stagger Menu Hover effect

$('.mdw-stagger-menu').each(function(){

var $this = $(this),
items = '.elementor-icon-list-text',
letterTime = ($this.css('--letter-animation-difference') ? parseInt($this.css('--letter-animation-difference').trim()) : 40)/1000

$this.find(items).each(function () {

var words = $(this).text().split(' ')

$(this).html('')

for (var i = 0; i < words.length; i++) {
var newSpan = $('<span>').addClass('word'),
wordUp = $('<span>').addClass('word-up'),
wordDown = $('<span>').addClass('word-down'),
letters = words[i].split('')

for (var j = 0; j < letters.length; j++) {
wordUp.append($('<span>').addClass('letter').text(letters[j]))
}

for (j = 0; j < letters.length; j++) {
wordDown.append($('<span>').addClass('letter').text(letters[j]))
}

newSpan.append(wordUp)
newSpan.append(wordDown)

$(this).append(newSpan)

if( i < words.length - 1 ) { $(this).append(' ') }
}

$(this).find('.word').each(function(){
$(this).outerHeight($(this).children().eq(0).outerHeight())
})
$(this).find('.word-up .letter').each(function(i){
$(this).css('--letter-delay', `${0.1+ i * letterTime}s`)
})
$(this).find('.word-down .letter').each(function(i){
$(this).css('--letter-delay', `${0.1+ i * letterTime}s`)
})
})
})

function setWordHeight(){
$('.mdw-stagger-menu .word').each(function(){
$(this).outerHeight($(this).children().eq(0).outerHeight())
})
}

$(window).on('resize', function(){
setWordHeight()
setTimeout( setWordHeight, 500 )
})


// Mousemove Eye Effect

$('body').on('mousemove', function(e) {

var eye = $('.mdw-eye-effect'),
mouseX = e.pageX,
mouseY = e.pageY

eye.each(function(){

var $this = $(this),
circleX = $this.offset().left + $this.width() / 2,
circleY = $this.offset().top + $this.height() / 2,
angle = Math.atan2(circleY - mouseY, circleX - mouseX) * (180 / Math.PI)

$this.find('.e-con, .e-container').css('transform', `rotate(${angle}deg)`)
})
})

})
}
</script>

کد کلاس mdw-stagger-menu

selector{
--hover-background-color: #ffffff;
--hover-background-speed: 500;
--letter-animation-difference: 40;
}
selector{
position: relative;
z-index: 1;
display: flex;
justify-content: center;
direction: ltr;
}
selector .elementor-icon-list-item,
selector .elementor-icon-list-item a{
flex-direction: column;
padding-bottom: 0 !important;
}
selector .elementor-icon-list-item a{
-webkit-tap-highlight-color: transparent;
}
selector .elementor-icon-list-text{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
selector .elementor-icon-list-text:after{
content: "";
position: absolute;
inset: 0;
background: var(--hover-background-color);
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform calc(var(--hover-background-speed)*1ms) cubic-bezier(1, 0, 0.5, 1);
}
selector .elementor-icon-list-item:hover .elementor-icon-list-text:after{
transform: scaleX(100%);
transform-origin: left;
}
selector .elementor-icon-list-item span.word{
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
selector .elementor-icon-list-item span.word-up,
selector .elementor-icon-list-item span.word-down{
display: flex;
flex-direction: row;
}
selector .elementor-icon-list-item span.letter{
display: inline-block;
transition: transform 0.4s ease calc(var(--letter-delay));
}
selector .elementor-icon-list-item:hover span.letter{
transform: translateY(-100%);
}

کد کلاس mdw-eye-effect

selector{
pointer-events: none;
}
selector .e-con,
selector .e-container{
transition: none;
}
@media (max-width: 767px){
selector .elementor-widget-divider {
--divider-border-width: var(--container-widget-width,30px) !important;
}
}
اشتراک گذاری این ویدیو

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

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

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