You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

110 lines
3.1 KiB

  1. var c = document.getElementById("c"),
  2. ctx = c.getContext("2d"),
  3. maskCanvas = document.createElement("canvas"),
  4. maskCtx = maskCanvas.getContext("2d");
  5. var width = document.documentElement.clientWidth
  6. var height = document.documentElement.clientHeight
  7. orb = new Image(300, 300),
  8. img = new Image(height, width)
  9. // $("canvas").css({width:height,height:width})
  10. img.src = "img/5.jpg";
  11. orb.src = "img/orb.png";
  12. goanimate()
  13. function goanimate(){
  14. cw = (maskCanvas.width = c.width = img.width),
  15. ch = (maskCanvas.height = c.height = img.height),
  16. console.log(cw, ch);
  17. ratio = ch / cw,
  18. mainTL = new TimelineMax({
  19. paused: true
  20. }),
  21. particles = [],
  22. Particle = function (index, x, y) {
  23. this.x = x;
  24. this.y = y;
  25. this.draw = function () {
  26. maskCtx.translate(this.x, this.y);
  27. // maskCtx.globalAlpha = this.progress;
  28. maskCtx.drawImage(orb, -this.size / 2, -this.size / 2, this.size, this.size);
  29. // maskCtx.globalAlpha = 1;
  30. maskCtx.translate(-this.x, -this.y);
  31. }
  32. mainTL.add(new TimelineMax().fromTo(this, rand(1.1, 2.8), {
  33. progress: 0,
  34. size: 200,
  35. x: "+=" + rand(-50, 50),
  36. y: "+=" + rand(-50, 50)
  37. }, {
  38. x: "+=" + rand(cw / 2, cw),
  39. size: 0,
  40. progress: 1,
  41. ease: Power4.easeIn //ease:Power0.easeNone
  42. }), 0);
  43. };
  44. // populate particles
  45. var pI, pX, pY;
  46. for (pX = pI = 0; pX < cw; pX += 100) {
  47. for (pY = 0; pY < ch; pY += 100) {
  48. pI++;
  49. particles.push(new Particle(pI, pX, pY));
  50. }
  51. }
  52. TweenMax.ticker.addEventListener('tick', updateStage); // redraw canvas upon each 'tick'
  53. // c.addEventListener('click', function(e){
  54. mainTL.play();
  55. TweenMax.delayedCall(3, function () {
  56. TweenMax.ticker.removeEventListener('tick', updateStage);
  57. }); // ...and stop 'tick' updates
  58. // });
  59. function updateStage() {
  60. console.log('ticking...')
  61. //update mask
  62. maskCtx.clearRect(0, 0, cw, ch);
  63. for (var i = 0; i < particles.length; i++) particles[i].draw();
  64. //update visible canvas
  65. ctx.globalCompositeOperation = "source-over";
  66. ctx.clearRect(0, 0, cw, ch);
  67. ctx.drawImage(img, 0, 0, cw, ch);
  68. ctx.globalCompositeOperation = "destination-in";
  69. ctx.drawImage(maskCanvas, 0, 0);
  70. }
  71. function doResize() {
  72. //proportional scale
  73. if (window.innerHeight / window.innerWidth < ratio) TweenMax.set(c, {
  74. transformOrigin: '0 0',
  75. scale: (window.innerWidth * ratio) / img.height
  76. });
  77. else TweenMax.set(c, {
  78. transformOrigin: '0 0',
  79. scale: (window.innerHeight / ratio) / img.width
  80. });
  81. // center positioning
  82. var data = c.getBoundingClientRect();
  83. TweenMax.set(c, {
  84. x: window.innerWidth / 2 - data.width / 2,
  85. y: window.innerHeight / 2 - data.height / 2
  86. });
  87. }
  88. // window.addEventListener('resize', doResize);
  89. // doResize(); //also called when #container fades in...
  90. function rand(min, max) {
  91. (min) ? min = min: min = 0;
  92. (max) ? max = max: max = 1;
  93. return min + (max - min) * Math.random();
  94. }
  95. }
  96. setTimeout(function () {
  97. img.src = "img/6.jpg";
  98. $("canvas").css("background", "url(./img/7.jpg)",);
  99. $("canvas").addClass('threeanimate')
  100. goanimate()
  101. },2600)