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>
相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918415 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)7 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
方圆工作室7 小时前
Arduino音乐键盘程序
单片机·嵌入式硬件·计算机外设