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. pycharm中如何安装Scrapy库

    先打开pycharm软件. 然后先安装pywin32和setuptools库. 安装成功后再尝试Twisted库,如果失败,就去晚上下载一个库:https://www.lfd.uci.edu/~goh ...

  2. CF453(Div1 简单题解)

    A .Little Pony and Expected Maximum pro:给定M,N,表示一个M面的骰子,甩N次,问出现的最大的数的期望. sol:容斥,f(i)表示最大数<=i的期望,那 ...

  3. 能用padding，margin解决的不要使用伪元素，能用背景解决的也不要用伪元素

    能用padding,margin解决的不要使用伪元素,能用背景解决的也不要用伪元素

  4. xdoj-1298(模拟--简易SQL解释器）

    题目链接 一 知识点: 1  substr有2种用法:       假设:string s = "0123456789";      string sub1 = s.substr( ...

  5. 20155208徐子涵 2016-2017-2 《Java程序设计》第4周学习总结

    20155208徐子涵 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 继承 继承作为面向对象的第二大特征,基本上就是避免多个类间重复定义 ...

  6. 2018.4.2 sqlite优化

    一.参数优化. ```PRAGMA foreign_keys=ON;PRAGMA cache_size=8000;PRAGMA synchronous=OFF;PRAGMA temp_store=ME ...

  7. 获奖感想和JAVA阶段性学习总结

    一.获奖感想 事实上,这次能够获得小黄衫,实在是出乎我的意料.毕竟班级中还有不少比我优秀的人,但我不会妄自菲薄.我知道,这件小黄衫不仅仅是老师对我的奖励,更是对我的一种鞭策,一种激励.它要求我要在以后 ...

  8. 用idea编写第一个jsp文件

    创建一个JAVA-web项目的前提:1.下载并安装JDK2.安装并配置Tomcat服务器 下面开始创建JAVA-web项目: 1.File——>new——>Project...   2.跟 ...

  9. 【BZOJ2019】nim

    直播写题这刺激233 原题: 著名游戏设计师vfleaking,最近迷上了Nim.普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输. ...

  10. LG4238 【【模板】多项式求逆】

    前言 学习了Great_Influence的递推实现,我给大家说一下多项式求逆严格的边界条件,因为我发现改动一些很小的边界条件都会使程序出错.怎么办,背代码吗?背代码是不可能,这辈子都不会背代码的.理 ...