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

动画社交菜单设计

文章目录

1. 视频教程(Youtube)

Play Video about 动画社交菜单设计

2. 教程代码

--ICON LIST效果代码/CSS

				
					selector{
    --hover-background-color: #ffffff;
    --hover-background-speed: 500;
    --letter-animation-difference: 40;
}
selector{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
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%);
}
				
			

--社交菜单动画效果代码/JavaScript代码

				
					<script src="//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>
				
			

--容器(mdw-stagger-menu)CSS代码:

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

3. 获取ElementorPro

4. YouTube教程视频观看科学上网工具

5.设计模板免费获取

Leave a Comment

Your email address will not be published. Required fields are marked *

联系我们

联系电话:13665461054 或者表单留言

谷歌快速排名秘诀

免费获取《谷歌快速排名秘诀-4.0》

---这些都是埃克森数字营销多年SEO总结而来的实践经验汇聚而成

请放心,我们只会偶尔发几封有干货的邮件,你的信息我们会严格保密。

注:订阅后请一定,一定,一定到您的邮箱中确认您的订阅,这样才能收到我们的《谷歌快速排名秘诀》!!!