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. Gym - 101806Q：QueryreuQ（回文树）

    A string is palindrome, if the string reads the same backward and forward. For example, strings like ...

  2. day 023-python 包

    包 : 我 们创建的每个文件夹都可以被称之为包. 但是我们要注意, 在python2中规定.中包内必须存在 __init__.py文件.  python3可有可无,但一般要求写上.创建包的目的不是为了 ...

  3. ACM-ICPC 2018 沈阳赛区网络预赛-K：Supreme Number

    Supreme Number A prime number (or a prime) is a natural number greater than 11 that cannot be formed ...

  4. Flutter,H5,React Native

    Flutter介绍 - Flutter,H5,React Native之间的对比   Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在i ...

  5. url参数和字典的相互转化

    目标url:https://www.baidu.com/s?&wd=python&ie=utf-8 将字典转成url参数 使用urllib.parse的urlencode方法,将字典对 ...

  6. Python学习之---Python中的内置函数（方法）（更新中。。。）

    add(item)   #将item添加到s中,如果item已经在s中,则无任何效果 break        #退出循环,不会再运行循环中余下的代码 bool()     #将参数转换为布尔型 by ...

  7. MyBatis-Plus使用教程

    单机版 安装环境 上传压缩包到/usr/local/software/下 解压安装包,进入解压目录的bin目录下,启动命令: ./solr start -force 默认端口是8983,请求虚拟机, ...

  8. 20165313 预备作业3 Linux安装及学习

    虚拟机安装 刚开始我觉得既然有了教程,安装虚拟机应该是很简单的事情,然而由于电脑本身系统地地问题,导致我数次安装失败,后来咨询了老师并查阅了资料,最终才安装好. 其中最主要的问题就是电脑虚拟化的修改. ...

  9. ArrayList 与 LinkedList的区别

    今天查看源码,分析一下两者的异同.外加阐述内部类. 内部类参考官方文档,地址如下: https://docs.oracle.com/javase/tutorial/java/javaOO/nested ...

  10. 使用sync 修饰符------子组件内部可以修改props

    首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...