canvas水波紋效果，jquery鼠標水波紋插件

效果展示

HTML代碼片段

<div class="scroll04wrap"><h3>發展歷程</h3><div class="scroll04"><p>不要回頭，一直向前</p></div>
</div>

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 插件

<script src="js/ripples.js"></script>
<script>$(document).ready(function() {try {$('.scroll04').ripples({resolution: 512,dropRadius: 20, //pxperturbance: 0.04,});}catch (e) {$('.error').show().text(e);}});
</script>