سلام و درود خدمت دوستان پرانرژی خودم؛ امیدوارم عالیه عالیه عالی باشید. با آموزش افکت چشم چرخان در خدمت شما هستیم. دوستان عزیز فقط دقت کنید از کانتینر استفاده کردیم پس شما هم از کانتینر استفاده کنید تا بهترین نتیجه رو بگیرید.
کد اسکریپ مد نظر
<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;
}
}