requestAnimationFrame.js

 window.requestAnimFrame = (function() {

                 return window.requestAnimationFrame ||

                     window.webkitRequestAnimationFrame ||

                     window.mozRequestAnimationFrame ||

                     window.oRequestAnimationFrame ||

                     window.msRequestAnimationFrame || function( /* function */ callback, /* DOMElement */ element) {

                     window.setTimeout(callback, 1000 / 60);

                 };

             })();

页面主要代码：

 <!DOCTYPE HTML>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <title>视差动画</title>

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

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

         <style type="text/css">

             body {

                 background:#dddddd;

             }

             #control {

                 width:1000px;

                 margin:0 auto;

             }

             #containter {

                 text-align:center;

             }

             #canavas {

                 margin:10px;

                 padding:10px;

                 background:#ffffff;

                 border:thin #aaaaaa;

             }

         </style>

         <script type="text/javascript">

             $(function() {

                 canvas = jQuery("#canavas")[0];

                 content = canvas.getContext("2d");

                 //天空背景

                 sky = new Image();

                 sky.src = "image/back.jpg";

                 //云朵

                 c1 = new Image();

                 c1.src = "image/cloud2.png";

                 c2 = new Image();

                 c2.src = "image/cloud1.jpg";

                 c3 = new Image();

                 c3.src = "image/cloud3.jpg";

                 lastTime = (+new Date())

                 requestAnimFrame(animate);

                 pause=false;

                 $("#b1").click(function(){

                  pause=!pause;

                 });

             });

             //获取随机数据

             function getRandom(min, max) {

                 return parseInt(Math.random() * (max - min) + min);

             }

             SKY_VELOCITY = 50;

             skyOffset = 0;

             C1_VELOCITY = 100;

             c1Offset = 0;

             C2_VELOCITY = 150;

             c2Offset = 0;

             C3_VELOCITY = 200;

             c3Offset = 0;

             fangxiag = 1;

             function drawBack() {

                 //背景移位

                 skyOffset = skyOffset < sky.width ? skyOffset + SKY_VELOCITY / fps : 0;

                 //远/中/近 三处的云朵移位

                 c1Offset = c1Offset < canvas.width ? c1Offset + C1_VELOCITY / fps : 0;

                 c2Offset = c2Offset < canvas.width ? c2Offset + C2_VELOCITY / fps : 0;

                 c3Offset = c3Offset < canvas.width ? c3Offset + C3_VELOCITY / fps : 0;

                 //绘制三朵云

                 content.save();

                 content.translate(-skyOffset, 0);

                 content.drawImage(sky, 0, 0);

                 content.drawImage(sky, sky.width, 0);

                 content.restore();

                 content.save();

                 content.translate(-c1Offset, 0);

                 content.drawImage(c1, 50, 50);

                 content.drawImage(c1, 600, 70);

                 content.drawImage(c1, 1050, 50);

                 content.drawImage(c1, 1600, 70);

                 content.restore();

                 content.save();

                 content.translate(-c2Offset, 0);

                 content.drawImage(c2, 130, 120);

                 content.drawImage(c2, 730, 170);

                 content.drawImage(c2, 1130, 120);

                 content.drawImage(c2, 1730, 170);

                 content.restore();

                 content.save();

                 content.translate(-c3Offset, 0);

                 content.drawImage(c3, 600, 250);

                 content.drawImage(c3, 100, 320);

                 content.drawImage(c3, 1600, 250);

                 content.drawImage(c3, 110, 320);

                 content.restore();

             }

             fps = 0;

             //实现动画

             function animate(time) {

                 if(!pause){

                //清楚背景

                 content.clearRect(0, 0, canvas.width, canvas.height);

                 //计算fps

                 fps = geFps(time);

                 //绘制背景

                 drawBack();

                 //绘制即时参数

                 content.fillText(fps.toFixed() + " fps", 20, 20);

                 }else{

                 lastFpsUpdateTime=time;              

             }

                 //继续下一帧动画

                 requestAnimFrame(animate);

             }

             var lastFpsUpdateTime = 0;

             //计算fps

             function geFps(time) {

                 fps = 1000 / (time - lastFpsUpdateTime);

                 lastFpsUpdateTime = time;

                 return fps;

             }

         </script>

     </head>

     <body>

         <div id="control">

             <input id="b1" type="button" value="暂停" />

         </div>

         <div id="containter">

             <canvas id="canavas" width="500" height="200"></canvas>

         </div>

     </body>

 </html>

来看效果：

htm5实现视差动画的更多相关文章

  1. Swift - 用UIScrollView实现视差动画效果

    Swift - 用UIScrollView实现视差动画效果 效果 源码 https://github.com/YouXianMing/Swift-Animations // // MoreInfoVi ...

  2. 【安卓高级】ViewPager视差动画效果

    在安卓开发中,是否遇见过一些很酷的视差动画效果,当ViewPager滑动下一页的时候,页面内的各种元素也能跟随滑动做位移效果,整体看起来非常有活力. 关键的PageTransformer PageTr ...

  3. Android ViewPager+属性动画 实现炫酷视差动画效果

    ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果 先来个仿QQ的侧滑面板效果 vp.setPageTransformer(true, new PageTran ...

  4. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7

    性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在 ...

  5. android仿漫画源码、抽奖转盘、Google相册、动画源码等

    Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...

  6. 视差滚动（Parallax Scrolling）的一点小心得

    下面内容来源于我知乎的这个答案:http://www.zhihu.com/question/20990029/answer/21436067 假期有空,整理到博客园这边,并做了一些语境的调整. ——— ...

  7. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  8. [译]理解 Windows UI 动画引擎

    本文译自 Nick Waggoner 的 "Understand what’s possible with the Windows UI Animation Engine",已获原 ...

  9. [Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. 【转】Dancing Links精确覆盖问题

    原文链接:http://sqybi.com/works/dlxcn/ (只转载过来一部分,全文请看原文,感觉讲得很好~)正文    精确覆盖问题    解决精确覆盖问题    舞蹈步骤    效率分析 ...

  2. 高并发网络编程之epoll详解

    select.poll和epoll的区别 在linux没有实现epoll事件驱动机制之前,我们一般选择用select或者poll等IO多路复用的方法来实现并发服务程序.在大数据.高并发.集群等一些名词 ...

  3. 编写3个不同版本的程序，令其均能输出ia的元素

    #include<iostream> #include<vector> #include<string> using namespace std; int main ...

  4. [ZZ]C++中，引用和指针的区别

    (1) 引用总是指向一个对象,没有所谓的 null reference .所有当有可能指向一个对象也由可能不指向对象则必须使用 指针. 由于C++ 要求 reference 总是指向一个对象所以 re ...

  5. 第2章 数字之魅——寻找最大的K个数

    寻找最大的K个数 问题描述 在面试中,有下面的问答: 问:有很多个无序的数,我们姑且假定它们各不相等,怎么选出其中最大的若干个数呢? 答:可以这样写:int array[100] …… 问:好,如果有 ...

  6. Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 类

    Ruby和其他面向对象的语言一样,使用类来组织方法,然后实例化类,创建对象.1.构造方法使用双引号是字符串的字面构造方法,也可以使用“具名构造方法”,即在类名上调用new方法 >> s=& ...

  7. SQL Server 2012 Express LocalDB

    微软最新推出的 SQL Server 2012 Express LocalDB 是一种 SQL Server Express 的运行模式,特别适合用在开发环境使用,也内置在 Visual Studio ...

  8. Linux内核初始化定义

    转载:http://blog.csdn.net/beatbean/article/details/8448623 1. Compile宏控制 位于include/linux/init.h /* The ...

  9. Krypton Factor

    Krypton Factor Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  10. 如何用拉姆达表达式(Lambda Expressions) 书写左链接查询

    在C#中,如果要实现两个列表的左链接查询,我们的一般用法就是用的linq表达式就是 List<Pet> pets = }, }, } }; List<Pet2> pets2 = ...