当前位置:主页 > JavsScript库 > 动画 >

使用WebGL实现逼真的水波纹效果 - effect.js
栏目分类:动画   发布日期:2021-08-15   浏览次数:

一个普通的 JavaScript 库,它使用 WebGL 将逼真的水波纹效果应用于图像。 

基于Three.js和GSAP JavaScript 库。

如何使用它:

1. 按如下方式加载所需的 JavaScript 库:

<!-- Three.js -->

<script src="/path/to/cdn/three.min.js"></script>

<!-- GSAP -->

<script src="/path/to/cdn/gsap.min.js"></script>

<!-- ripple-effect.js -->

<script src="src/ripple-effect.min.js"></script>

2. 创建一个容器来保存图像。

<div class="example"></div>

3. 对图像应用基本的波纹效果。

var rippleDemo = new RippleEffect({

    parent: document.querySelector('.example'),      

    texture: '/path/to/image.jpg',

});

4. 使用以下参数配置涟漪效应:

var rippleDemo = new RippleEffect({

    parent: document.querySelector('.example'),      

    texture: '/path/to/image.jpg',

    intensity: 1,

    strength: 2,

    area: 6,

    waveSpeed: 0.01,

    hover: true, // 悬停时触发动画

    speedIn: 1.4,

    speedOut: 1.2,

    easing: 'Expo.easeOut',

});

5. 手动启动和停止动画。

rippleDemo.start

rippleDemo.stop

必选参数

名称类型默认描述
parentDom elementnull将注入动画的 DOM 元素。动画的图像将采用父级的大小。
textureImagenullImage动画的。
可选参数

名称类型默认描述
intensityFloat1用于确定涟漪效应的强度。0 表示没有效果,1 表示全纹波。
strengthFloat2涟漪效应的强度。
areaFloat6受涟漪效应影响的区域。
waveSpeedFloat0.01涟漪波行进速度。
speedInFloat1.4入站动画的速度(以秒为单位)。
speedOutFloat1.2出站动画的速度(以秒为单位)。
hoverBooleantrue如果设置为 false 动画将不会在悬停时触发(查看startstop进行交互)
easingStringExpo.easeOut过渡的缓和,见greensock easing
方法

名称描述
start启动涟漪效应。
stop停止涟漪效应。


官方网站:https://github.com/SaboSuke/ripple-hover-effect

上一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库