动画社交菜单设计案例-WordPress

				
					<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('&nbsp;') }
        }

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