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. js Promise fetch demo

    <html> <head> <title></title> </head> <body> </body> <s ...

  2. C/C++内存泄漏检测 —— memleax

    memleax是个开源项目,原理是通过注入hook目标进程的malloc(new也是用的malloc)内存分配函数,在指定时间未释放则认为内存泄漏.优点是不需要重启,attach到目标进程. gith ...

  3. 用纯JS实现，点击一个列表时，输出对应的索引（不能用JQuery哦）

    你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10.这是因为var声明的变量是函数作用域的,而不是块级作用域的.也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10 ...

  4. 对List数组进行排序 Collections.sort(param1,param2)

    @SuppressWarnings("unchecked") List<PageData> group_items_list = (List<PageData&g ...

  5. Quick Noodle Physics in Blender Tutorial

    https://www.youtube.com/watch?v=Lg7jxAMs60QQuick Noodle Physics in Blender Tutorial 新增平面Plane作为地面; 新 ...

  6. XML映射配置文件

    XML映射配置文件 http://www.mybatis.org/mybatis-3/configuration.html Type Handlers 类型处理器 每当MyBatis在Prepared ...

  7. python------模块定义、导入、优化 ------->xml模块

    1. xml模块 引用参考原文链接:https://www.cnblogs.com/python-gm/p/8032465.html      谢谢 xml是实现不同语言或程序之间进行数据交换的协议, ...

  8. linux 变量定义

    本地变量:用户自定义的变量. 环境变量:用于所有用户变量,用于用户进程前,必须用export命令导出. 位置变量:$0(脚本名),$1-$9:脚本参数. 特定变量:脚本运行时的一些相关信息. $# 传 ...

  9. sqler sql 转rest api 源码解析（二） resp 协议

    resp 协议主要是方便使用redis 客户端进行连接,resp 主要是依赖 tidwall/redcon golang redis 协议包 resp 服务说明 server_resp.go 文件,干 ...

  10. S老师 破坏神学习

    代码质量不高 就不整理了 发上来留个纪念 表示自己写过了 数据库:MySQL,服务端:PhotonServer 视频:https://pan.baidu.com/s/1i4ROaRr 客户端:http ...