超酷！SVG文本湍流（流水）特效

Turbulence font of svg text，鼠标在屏幕上移动会造成文字在流水中摇晃的动画特效。

svg, 文本效果, filter

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

document.addEventListener("mousemove", getPosition);

let mousePosition = {
    x: 0,
    y: 0
};

let svg = document.getElementById("svgText");

let turbulence = svg.querySelectorAll("#filter feTurbulence")[0];
let displacement = svg.querySelectorAll("#filter feDisplacementMap")[0];

function getPosition(event) {
    mousePosition.x = Math.abs(event.clientX - window.innerWidth / 2);
    //mousePosition.x = event.clientX / 2;

mousePosition.y = Math.abs(event.clientY - window.innerHeight / 2);
    //mousePosition.y = event.clientY / 2;

animate();
}

function animate() {
    let valueX = parseFloat(mousePosition.x) * 0.0001;

let valueY = parseFloat(mousePosition.y) * 0.001;

console.log(valueX.toFixed(3));

TweenMax.to(turbulence, 2, {
        attr: {
            baseFrequency: Math.abs(valueX.toFixed(3)) + " " + Math.abs(valueX.toFixed(3))
        },
        ease: Expo.easeOutIn
    });
    TweenMax.to(displacement, 2, {
        attr: {
            scale: map_range(mousePosition.y, 0, window.innerWidth, 18, 25)
        },
        ease: Expo.easeOutIn
    });
}

function map_range(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

编译

CSS

HTML

Turbulence font of svg text，鼠标在屏幕上移动会造成文字在流水中摇晃的动画特效。

svg, 文本效果, filter

编辑器支持Emmet

快捷键

Turbulence font of svg text，鼠标在屏幕上移动会造成文字在流水中摇晃的动画特效。

svg, 文本效果, filter

HTML5 GSAP带彩色碎片（纸屑）化特效的文本打字动画

HTML5/SVG给图片添加紊流（feTurbulence）滤镜特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：