GSAP 在鼠标所在位置的一定范围内改变填充色

两款明暗动画LOGO，鼠标悬停时，通过改变SVG图形的填充色来改变图标的显示。

GSAP, logo

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2775
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var dur = .7;
var ease = Cubic.easeOut;
var byMouseMove = true;

var template = function template() {
    return $('#logo-template').html();
};
var $logos = $('[data-logo]');
var logoHeight = $logos.html(template()).height();

var $logoDarkBlock = $('.logo--dark').find('.logo__wrapper');
var $logoDark = $('.logo--dark__image');
var $logoDarkWrapper = $('.logo--dark__image__wrapper');

var $logoWhiteBlock = $('.logo--white').find('.logo__wrapper');
var $logoWhite = $('.logo--white__image');
var $logoWhiteWrapper = $('.logo--white__image__wrapper');

var moveLogo = function moveLogo(_ref, _ref2) {
    var logo = _ref.logo;
    var wrapper = _ref.wrapper;
    var logoBlock = _ref2.logoBlock;
    var logoWrapper = _ref2.logoWrapper;

TweenMax.to(logoBlock[0], dur, {
        y: logo,
        ease: ease
    });

TweenMax.to(logoWrapper[0], dur, {
        y: wrapper,
        ease: ease
    });
};

var values = {
    enter: {
        logo: -logoHeight,
        wrapper: logoHeight
    },
    leave: {
        logo: 0,
        wrapper: 0
    }
};

var BindAnimation = function BindAnimation($logo, $wrapper) {
    return {
        'mouseenter': function mouseenter() {
            if (byMouseMove) return;
            moveLogo(values.enter);
        },
        'mouseleave': function mouseleave() {
            if (byMouseMove) return;
            moveLogo(values.leave);
        },
        'mousemove': function mousemove(e) {
            if (!byMouseMove) return;
            var offsetTop = this.offsetTop;
            var y = e.pageY - offsetTop;

moveLogo({
                logo: -y,
                wrapper: y
            }, {
                logoBlock: $logo,
                logoWrapper: $wrapper
            });
        }
    };
};

$logoDarkBlock.on(BindAnimation($logoDark, $logoDarkWrapper));
$logoWhiteBlock.on(BindAnimation($logoWhite, $logoWhiteWrapper));

编译

CSS

.wrapper {
    margin: 200px auto;
    width: 650px;
    display: flex;
    justify-content: space-between;
}
.logo {
    overflow: hidden;
    padding: 40px;
    cursor: pointer;
}
.logo__wrapper {
    position: relative;
}
.logo--white {
    background-color: #fff;
}
.logo--white .logo__image svg {
    transition: opacity 0.15s ease-in-out;
}
.logo--white__image * {
    fill: #47988b !important;
}
.logo--white__image__wrapper {
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.15s ease-in-out;
}
.logo--white .logo__wrapper {
    overflow: hidden;
}
.logo--white .logo__wrapper:hover .logo--white__image__wrapper {
    opacity: 1;
}
.logo--white .logo__wrapper:hover .logo__image svg {
    opacity: 0.5;
}
.logo--dark {
    background-color: #292c31;
}
.logo--dark .logo__wrapper {
    overflow: hidden;
}
.logo--dark .logo__image {
    opacity: 0.6;
}
.logo--dark__image * {
    fill: #fff !important;
}
.logo--dark__image__wrapper {
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.15s ease-in-out;
}
.logo--dark:hover .logo--dark__image__wrapper {
    opacity: 1;
}

HTML

</div>
    </div>

</div>
    </div>

</div>
<script src="/libs/gsap/TweenMax.min.js"></script>

两款明暗动画LOGO，鼠标悬停时，通过改变SVG图形的填充色来改变图标的显示。

GSAP, logo

编辑器支持Emmet

快捷键

两款明暗动画LOGO，鼠标悬停时，通过改变SVG图形的填充色来改变图标的显示。

GSAP, logo

GSAP鼠标悬停在图片上时的透明水纹（波纹）特效

GSAP 会跟着鼠标转眼睛转脸的还会翻转的小板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：