Board logo

标题: [转载代码] 超酷的HTML 3D动态效果 [打印本页]

作者: CrLf    时间: 2014-8-19 00:06     标题: 超酷的HTML 3D动态效果

本帖最后由 CrLf 于 2014-8-19 00:07 编辑

以前看过,印象很深,搜了半天终于找出来了
以下代码转自 http://www.codefans.net/jscss/code/2956.shtml,这个应该是最原始的出处
--------------------------------------------------------------------------------
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.   <title>Wanna tell her - interactive DHTML</title>
  5.   <style type="text/css">
  6. html {
  7. overflow: hidden;
  8. }
  9. body {
  10. position: absolute;
  11. margin: 0px;
  12. padding: 0px;
  13. background: #fff;
  14. width: 100%;
  15. height: 100%;
  16. }
  17. #screen {
  18. position: absolute;
  19. left: 10%;
  20. top: 10%;
  21. width: 80%;
  22. height: 80%;
  23. background: #fff;
  24. }
  25. #screen img {
  26. position: absolute;
  27. cursor: pointer;
  28. width: 0px;
  29. height: 0px;
  30. -ms-interpolation-mode:nearest-neighbor;
  31. }
  32. #bankImages {
  33. visibility: hidden;
  34. }
  35. #FPS {
  36. position: absolute;
  37. right: 5px;
  38. bottom: 5px;
  39. font-size: 10px;
  40. color: #666;
  41. font-family: verdana;
  42. }
  43. </style>
  44.   <script type="text/javascript">
  45. /* ==== Easing function ==== */
  46. var Library = {};
  47. Library.ease = function() {
  48.     this.target = 0;
  49.     this.position = 0;
  50.     this.move = function(target, speed) {
  51.         this.position += (target - this.position) * speed;
  52.     }
  53. }
  54. var tv = {
  55.     /* ==== variables ==== */
  56.     O: [],
  57.     fps: 0,
  58.     screen: {},
  59.     angle: {
  60.         x: new Library.ease(),
  61.         y: new Library.ease()
  62.     },
  63.     camera: {
  64.         x: new Library.ease(),
  65.         y: new Library.ease()
  66.     },
  67.     create3DHTML: function(i, x, y, z, sw, sh) {
  68.         /* ==== create HTML image element ==== */
  69.         var o = document.createElement('img');
  70.         o.src = i.src;
  71.         tv.screen.obj.appendChild(o);
  72.         /* ==== 3D coordinates ==== */
  73.         o.point3D = {
  74.             x: x,
  75.             y: y,
  76.             z: new Library.ease(),
  77.             sw: sw,
  78.             sh: sh,
  79.             w: i.width,
  80.             h: i.height
  81.         };
  82.         o.point3D.z.target = z;
  83.         /* ==== push object ==== */
  84.         o.point2D = {};
  85.         tv.O.push(o);
  86.         /* ==== on mouse over event ==== */
  87.         o.onmouseover = function() {
  88.             if (this != tv.o) {
  89.                 this.point3D.z.target = tv.mouseZ;
  90.                 tv.camera.x.target = this.point3D.x;
  91.                 tv.camera.y.target = this.point3D.y;
  92.                 if (tv.o) tv.o.point3D.z.target = 0;
  93.                 tv.o = this;
  94.             }
  95.             return false;
  96.         }
  97.         /* ==== on mousedown event ==== */
  98.         o.onmousedown = function() {
  99.             if (this == tv.o) {
  100.                 if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
  101.                 else {
  102.                     tv.o = false;
  103.                     this.onmouseover();
  104.                 }
  105.             }
  106.         }
  107.         /* ==== main 3D function ==== */
  108.         o.animate = function() {
  109.             /* ==== 3D coordinates ==== */
  110.             var x = this.point3D.x - tv.camera.x.position;
  111.             var y = this.point3D.y - tv.camera.y.position;
  112.             this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
  113.             /* ==== rotations ==== */
  114.             var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
  115.             var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
  116.             var yz = tv.angle.cy * xz - tv.angle.sy * x;
  117.             var yx = tv.angle.sy * xz + tv.angle.cy * x;
  118.             /* ==== 2D transform ==== */
  119.             var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
  120.             x = yx * scale;
  121.             y = xy * scale;
  122.             var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
  123.             var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
  124.             /* ==== HTML rendering ==== */
  125.             var o = this.style;
  126.             o.left = Math.round(x + tv.screen.w - w * .5) + 'px';
  127.             o.top = Math.round(y + tv.screen.h - h * .5) + 'px';
  128.             o.width = w + 'px';
  129.             o.height = h + 'px';
  130.             o.zIndex = 10000 + Math.round(scale * 1000);
  131.         }
  132.     },
  133.     /* ==== init script ==== */
  134.     init: function(structure, FL, mouseZ, rx, ry) {
  135.         this.screen.obj = document.getElementById('screen');
  136.         this.screen.obj.onselectstart = function() {
  137.             return false;
  138.         }
  139.         this.screen.obj.ondrag = function() {
  140.             return false;
  141.         }
  142.         this.mouseZ = mouseZ;
  143.         this.camera.focalLength = FL;
  144.         this.angle.rx = rx;
  145.         this.angle.ry = ry;
  146.         /* ==== create objects ==== */
  147.         var i = 0,
  148.         o;
  149.         while (o = structure[i++]) this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
  150.         /* ==== start script ==== */
  151.         this.resize();
  152.         mouse.y = this.screen.y + this.screen.h;
  153.         mouse.x = this.screen.x + this.screen.w;
  154.         /* ==== loop ==== */
  155.         setInterval(tv.run, 16);
  156.         setInterval(tv.dFPS, 1000);
  157.     },
  158.     /* ==== resize window ==== */
  159.     resize: function() {
  160.         var o = tv.screen.obj;
  161.         if (o) {
  162.             tv.screen.w = o.offsetWidth / 2;
  163.             tv.screen.h = o.offsetHeight / 2;
  164.             for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {
  165.                 tv.screen.x += o.offsetLeft;
  166.                 tv.screen.y += o.offsetTop;
  167.             }
  168.         }
  169.     },
  170.     /* ==== main loop ==== */
  171.     run: function() {
  172.         tv.fps++;
  173.         /* ==== motion ease ==== */
  174.         tv.angle.x.move( - (mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
  175.         tv.angle.y.move((mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
  176.         tv.camera.x.move(tv.camera.x.target, .025);
  177.         tv.camera.y.move(tv.camera.y.target, .025);
  178.         /* ==== angles sin and cos ==== */
  179.         tv.angle.cx = Math.cos(tv.angle.x.position);
  180.         tv.angle.sx = Math.sin(tv.angle.x.position);
  181.         tv.angle.cy = Math.cos(tv.angle.y.position);
  182.         tv.angle.sy = Math.sin(tv.angle.y.position);
  183.         /* ==== loop through images ==== */
  184.         var i = 0,
  185.         o;
  186.         while (o = tv.O[i++]) o.animate();
  187.     },
  188.     /* ==== trace frames per seconds ==== */
  189.     dFPS: function() {
  190.         document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
  191.         tv.fps = 0;
  192.     }
  193. }
  194. /* ==== global mouse position ==== */
  195. var mouse = {
  196.     x: 0,
  197.     y: 0
  198. }
  199. document.onmousemove = function(e) {
  200.     if (window.event) e = window.event;
  201.     mouse.x = e.clientX;
  202.     mouse.y = e.clientY;
  203.     return false;
  204. }
  205. /* ==== starting script ==== */
  206. onload = function() {
  207.     onresize = tv.resize;
  208.     /* ==== build grid ==== */
  209.     var img = document.getElementById('bankImages').getElementsByTagName('img');
  210.     var structure = [];
  211.     for (var i = -300; i <= 300; i += 120) for (var j = -300; j <= 300; j += 120) structure.push({
  212.         img: img[0],
  213.         x: i,
  214.         y: j,
  215.         z: 0,
  216.         sw: .5,
  217.         sh: .5
  218.     });
  219.     /* ==== let's go ==== */
  220.     tv.init(structure, 350, -200, .005, .0025);
  221. }
  222. </script>
  223. </head>
  224. <body>
  225.   <div id="screen"></div>
  226.   <div id="bankImages">
  227.    <img alt="" src="http://www.codefans.net/jscss/demoimg/201112/2_cicadu.gif" />
  228.   </div>
  229.   <div id="FPS"></div>  
  230. </body>
  231. </html>
复制代码

作者: CrLf    时间: 2014-8-19 00:08

上文代码可以保存为 *.hta 文件
作者: 523066680    时间: 2014-8-19 10:14

记得在cnbeta上看到几个HTML5特效合集,挺棒的,又搜了一下,找不到以前那个了。

15个令人震惊的HTML5实验

10个让人眼花缭乱的 HTML5 和 JavaScript 效果

八大疯狂的HTML5 Canvas及WebGL动画效果




欢迎光临 批处理之家 (http://www.bathome.net/) Powered by Discuz! 7.2