HTML5 Canvas水波纹动画特效

时间：2022-09-17 22:42:42

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

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特效专辑&lpar;一&rpar;——水波纹过渡特效&lpar;首页&rpar;

    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核心技术图形动画与游戏开发 &lpar;&lpar;美&rpar;David Geary&rpar; 中文PDF扫描版&ZeroWidthSpace;

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

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

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

  6. canvas水波纹效果

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

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

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

  8. 基于HTML5&sol;CSS3图片网格动画特效

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

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

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

随机推荐

  1. AngularJS中实现无限级联动菜单（使用demo）

    昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo directive的源代 ...

  2. Windows下安装MinGW，编译c&sol;c&plus;&plus;时出现cannot find -lpthread解决办法

    由于Mingw下没有带pthread库,所以在eclipse中设置多线程动态链接库,也不管用.需要自己下载, ftp://sourceware.org/pub/pthreads-win32/pthre ...

  3. iOS开发之网络编程--使用NSURLConnection实现大文件下载

    主要思路(实现下载数据分段写入缓存中) 1.使用NSURLConnectionDataDelegate以及代理方法.2.在成功获取响应的代理方法中,获得沙盒全路径,并在该路径下创建空文件和文件句柄.3 ...

  4. yii2URL美化

    yii2的url 域名/index.php?r=site%2Findex 实际为 域名/index.php?r=site/index 可以美化下 可以在main.php中配置 'components' ...

  5. 【转】COCOS2D-X之不断变化的数字效果Demo

    我们在玩"天天爱消除"或"天天连萌"的时候,每玩一盘后会有一个游戏结果界面,上面有一个显示所得分数的效果.今天我们这个Demo就是要实现与之相近的效果. 一.我 ...

  6. poj 3026 &lpar;最小生成树&rpar;

    题意:起点开始有超过100个人,总共不会超过100个外星人,问把所有的外星人都搜出来花的最小时间.一条路径上的时间跟人数是无关的,只跟路径长度有关. 思路:刚开始人都在起点,当派一定人数去最近的外星人 ...

  7. python 实例方法，类方法和静态方法

    在学习python代码时,看到有的类的方法中第一参数是cls,有的是self,经过了解得知,python并没有对类中方法的第一个参数名字做限制,可以是self,也可以是cls,不过根据人们的惯用用法, ...

  8. 服务器上的Git

    前面的话 如果想与他人使用,除了使用Git来完成日常工作之外,还需要一个远程的Git仓库.尽管从技术上可以从个人的仓库里推送和拉取修改内容,但并不鼓励这样做,因为一不留心就很容易弄混其他人的进度.因此 ...

  9. 深入理解 Python 中的上下文管理器

    提示:前面的内容较为基础,重点知识在后半段. with 这个关键字,对于每一学习Python的人,都不会陌生. 操作文本对象的时候,几乎所有的人都会让我们要用 with open ,这就是一个上下文管 ...

  10. Notepad&plus;&plus;远程连接Linux系统

    首先在官网下载 https://notepad-plus-plus.org/news/notepad-7.6.4-released.html 在命令行数输入ifconfig 查看自己的Linux的ip ...

相关文章