canvas水波纹效果,jquery鼠标水波纹插件

canvas水波纹效果,jquery鼠标水波纹插件

效果展示

jQuery水波纹效果,canvas水波纹插件

HTML代码片段

html 复制代码
<div class="scroll04wrap">
	<h3>发展历程</h3>
	<div class="scroll04">
		<p>不要回头,一直向前</p>
	</div>
</div>

css代码片段

css 复制代码
/* scroll04 */
.scroll04wrap{width: 100%;position: relative;margin-top: 100px;}
.scroll04wrap h3{font-size: 50px;color: #2e5c72;margin-bottom: 30px;line-height: 86px;font-weight: bold;text-align: center;}
.scroll04{width: 100%;position: relative;box-sizing: border-box;padding: 250px 0;background:url(images/qyqxbg02.jpg) no-repeat fixed;background-size: cover;display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;}
.scroll04 p{font-size: 28px;color: #fff;writing-mode: vertical-lr;font-family: cursive;font-weight: bold;letter-spacing: 5px;}

js代码片段

注:需引入 jquery.js 插件和 ripples.js 插件

javascript 复制代码
<script src="js/ripples.js"></script>
<script>
	$(document).ready(function() {
		try {
			$('.scroll04').ripples({
				resolution: 512,
				dropRadius: 20, //px
				perturbance: 0.04,
			});
		}
		catch (e) {
			$('.error').show().text(e);
		}
	});
</script>
相关推荐
sen_shan34 分钟前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君1 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
吃没吃1 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam2 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2762 小时前
Android Retrofit用法详解
前端
鸭梨大大大2 小时前
Spring Web MVC入门
前端·spring·mvc
吃没吃2 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2762 小时前
Android Room用法详解
前端
木木黄木木2 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
郁大锤3 小时前
Flask与 FastAPI 对比:哪个更适合你的 Web 开发?
前端·flask·fastapi