HTML5的Canvas特性非常实用，我们不仅可以在Canvas画布上绘制各种图形，也可以制作绚丽的动画，比如这次介绍的水波纹动画特效。以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画，让人惊叹不已，这次分享的HTML5 Canvas水波纹动画同样非常震撼人心。

在线演示          源码下载

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML5 Canvas水波纹动画特效DEMO演示</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />

<link rel="stylesheet" type="text/css" href="css/zzsc.css">

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/jquery.waterrippleeffect.min.js"></script>

<style type="text/css">

     html, body, div, span, applet, object, iframe,

    h1, h2, h3, h4, h5, h6, p, blockquote, pre,

    a, abbr, acronym, address, big, cite, code,

    del, dfn, em, font, img, ins, kbd, q, s, samp,

    small, strike, strong, sub, sup, tt, var,

    b, u, i, center,

    dl, dt, dd, ol, ul, li,

    fieldset, form, label, legend,

    table, caption, tbody, tfoot, thead, tr, th, td {

        margin: 0;

        padding: 0;

        border: 0;

        outline: 0;

        font-size: 100%;

        vertical-align: baseline;

        /*background: transparent;*/

        box-sizing: border-box;

    }

    body {

        overflow: hidden;

    }

    .container{

        width: 480px;

        height: 480px;

        margin:20px auto;

        position: relative;

    }

    .clear {

        clear: both;

        height: 0;

        font-size: 0;

        line-height: 0;

    }

</style>

 <script>

    $( document ).ready( function() {

        //------------------------------------------------------------------------

        $( '#preloaderDiv' ).delay( 1000 ).fadeTo( 1000 , 0, function() {

            $( this ).css( 'display', 'none' );

        } );

        $( '#startDiv' ).css( 'cursor', 'pointer' ).click( function() {

            //$( this ).css( 'display', 'none' );

            $( this ).delay( 10 ).fadeTo( 1000 , 0, function() {

                $( this ).css( 'display', 'none' );

            } );

            init();

        } );

        //------------------------------------------------------------------------

        function init() {

            //Settings - params for WaterRippleEffect

            var settings = {

                image: './img/SwimmingPool.jpg',//image path

                rippleRadius: 3,//radius of the ripple

                width: 480,//width

                height: 480,//height

                delay: 1,//if auto param === true. 1 === 1 second delay for animation

                auto: true//if auto param === true, animation starts on it´s own

            };

            //------------------------------------------------------------------------

            //standalone

            //init

            var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings );

            document.getElementById( 'holder' ).style.cursor = 'pointer';

            //on click

            document.getElementById( 'holder' ).addEventListener( 'click', function( e ) {

                var mouseX = e.layerX;

                var mouseY = e.layerY;

                waterRippleEffect.disturb( mouseX, mouseY );

            } );

            //on mousemove

            document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) {

                var mouseX = e.layerX;

                var mouseY = e.layerY;

                waterRippleEffect.disturb( mouseX, mouseY );

            } );

            //------------------------------------------------------------------------

            //jQuery

            //init

            /*

            $( '#holder' ).waterRippleEffect( settings );

            $( '#holder' ).css( 'cursor', 'pointer' );

            */

            //on click

            /*

            $( '#holder' ).click( function( e ) {

                var mouseX = e.pageX - $( this ).offset().left;

                var mouseY = e.pageY - $( this ).offset().top;

                $( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );

            } );

            */

            //on mousemove

            /*

            $( '#holder' ).mousemove( function( e ) {

                var mouseX = e.pageX - $( this ).offset().left;

                var mouseY = e.pageY - $( this ).offset().top;

                $( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY );

            } );

            */

        };

        //------------------------------------------------------------------------

    } );

</script>

</head>

<body>

<div class="container">

    <div id='holder' style='width:480px; height:480px; position:absolute;'></div>

    <div id='startDiv' style='background-color:#000; position:absolute; width:480px; height:480px;'>

        <img src='img/startBt.jpg' width='480px' height='480px' alt='Start' style='position:absolute; top:50%; left:50%; margin-top:-240px; margin-left:-240px;'>

    </div>

    <div id='preloaderDiv' style='background-color:#000; position:absolute; width:480px; height:480px; pointer-events:none'>

        <img src='img/PreloaderDark.gif' width='44px' height='48px' alt='Preloader' style='position:absolute; top:50%; left:50%; margin-top:-22px; margin-left:-24px;'>

    </div>

</div>

<div style="text-align:center;clear:both;">

<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

<script src="/follow.js" type="text/javascript"></script>

</div>

</body>

</html>

HTML5 Canvas水波纹动画特效的更多相关文章

  1. Android特效专辑(一)——水波纹过渡特效(首页)

    Android特效专辑(一)--水波纹过渡特效(首页) 也是今天看到的一个特效,感觉挺漂亮的,最近也一直在筹划一个APP,就想把他当做APP的首页,然后加些处理,关于首页APP的特效等我完工了再贴出来 ...

  2. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  3. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  4. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  5. Android -- 贝塞尔实现水波纹动画（划重点！！）

    1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一 ...

  6. canvas水波纹效果

    先看效果 演示效果 自然界中水波纹效果十分麻烦,我这里只是根据水波纹的几个特性,在理想环境下模拟水波纹的扩散效果. 这里应用到的属性有:扩散.波动.折射. 扩散:很好理解,水波纹会从触发原点开始向周围 ...

  7. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  8. 基于HTML5/CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  9. HTML5 Canvas绘文本动画（使用CSS自定义字体）

    一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...

随机推荐

  1. JavaScript操作符-3---算数，逻辑，赋值，比较，三元

    JavaScript操作符 学习目标 1.掌握什么是表达式 2.掌握javascript操作符的分类 3.掌握算数操作符 什么是表达式 将类型的数据(如常量.变量.函数等),用运算符号按一定的规则链接 ...

  2. sqlplus/rman登录报权限错误ORA-01031/ORA-04005/0RA-00554

    安装Weblogic误操作对Oracle用户属组进行了修改 --本地sqlplus登录报错权限问题??? [oracle@enmo admin]$ sqlplus / as sysdba SQL*Pl ...

  3. OTG作为大容量设备

    /********************************************************************************* * OTG作为大容量设备 * 说明 ...

  4. Shell #*/ 和 %/*

    #!/bin/bash i="this/is/a/path.config" name=${i#*/} path=${i%/*} echo $name echo $path is/a ...

  5. JS书写规范

    1.js代码是由语句组成的,每一条语句以分号结尾: 语句是有关键字,元素符,表达式组成的:2.js代码严格区分大小写3.所有的标点符号都是英文的4.//表示单行注释,/* */表示多行注释

  6. SEO : 建站注意

    1.url格式.尽可能的短一些,实践证明,较短的url格式还是比较利于搜索引擎收录的. 2.网站前台要纯静态.虽然搜索引擎对静态页面和动态页面并没有本质上的差别对待,但是实践告诉我们静态页面对服务器的 ...

  7. window cmd-常用命令

    1.常用命令 dir 文件列表 cd 改变目录md 创建目录 rd 删除目录 type 显示文件内容 fc 比较目录 attrib 修改文件属性 copy 复制文件 del 删除文件 ren 文件改名 ...

  8. python绝对路径相对路径函数

    绝对路径 os.path.abspath("文件名")  参数可为“”即当前路径 相对路径 os.path.dirname("文件名")   参数可为“”即当前 ...

  9. （8）Python连接操作MySQL

    pymysql模块下的方法 '''必须实例化对象才能建立连接''' 1.pymysql.connect  #和MySQL建立连接 '''得由对象去调用定义游标''' 2.xxx.sursor()  # ...

  10. canvas的认识，时钟的设置

    canvas的三要素:ID标识,width宽度,height高度,他是行元素 IE9才支持canvas,canvas是一个透明的画板,要用js去画 绘制一个圆 线性渐变颜色 径向渐变 图片的绘制: 视 ...