From 9f808f4a3d586d7eeeb5153b5ad4df7fc5d0cba5 Mon Sep 17 00:00:00 2001 From: hackerhgl Date: Sun, 11 Jul 2021 20:40:07 +0500 Subject: [PATCH] Controlled canvas animation on scroll --- build/script.js | 2 +- src/scripts/header.js | 25 +++++++++++++++++++------ src/scripts/particles.js | 2 +- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/build/script.js b/build/script.js index c873b76..36a33bd 100644 --- a/build/script.js +++ b/build/script.js @@ -1 +1 @@ -!function(){var t=[,function(t,e,n){"use strict";function o(t,e,n){t===document&&(t=document.scrollingElement||document.documentElement||document.body.parentNode||document.body);var o=!1,i=t.scrollTop,r=t===document.body&&document.documentElement?document.documentElement:t;function d(n){n.preventDefault();var d=function(t){return t.detail?t.wheelDelta?t.wheelDelta/t.detail/40*(t.detail>0?1:-1):-t.detail/3:t.wheelDelta/120}(n);i+=-d*e,i=Math.max(0,Math.min(i,t.scrollHeight-r.clientHeight)),o||c()}function c(){o=!0;var e=(i-t.scrollTop)/n;t.scrollTop+=e,Math.abs(e)>.5?a(c):o=!1}t.addEventListener("mousewheel",d,{passive:!1}),t.addEventListener("DOMMouseScroll",d,{passive:!1});var a=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,20)}}n.r(e),n.d(e,{default:function(){return o}})},function(t,e,n){"use strict";n.r(e);var o=n(3);let i;const r=document.getElementById("header");function d(t,e,n,o){e.clearRect(.5*-n.width,.5*-n.height,2*n.width,2*n.height),t.forEach((t=>{t.update(n,e,o)})),i=requestAnimationFrame((()=>d(t,e,n,o)))}!function(){const t=o.canvas();function e(){t.width=window.innerWidth-function(){const t=document.createElement("div");t.style.visibility="hidden",t.style.overflow="scroll",t.style.msOverflowStyle="scrollbar",document.body.appendChild(t);const e=document.createElement("div");t.appendChild(e);const n=t.offsetWidth-e.offsetWidth;return t.parentNode.removeChild(t),n}()-1,t.height=document.getElementById("header").offsetHeight,function(){null!=i&&(o.setVelocity(o.BASE_VELOCITY),cancelAnimationFrame(i));const t=o.canvas(),e=canvas.getContext("2d");e.translate(t.width/2,t.height/2);const n=o.getDimensions();d(o.grid3d(t),e,t,n),window.addEventListener("mousemove",(function(t){const e=o.canvas(),n=canvas.getContext("2d"),i=e.width/2-.045*t.clientX,r=e.height/2-.045*t.clientY;n.setTransform(1,0,0,1,i,r)}))}()}window.addEventListener("resize",e,!1),e()}();var c=function(t){var e,n,o,i,r=(t=t||{}).delay||50;function d(){e=null,i=0}return d(),function(){return n=window.scrollY,null!=e&&(i=n-e),e=n,clearTimeout(o),o=setTimeout(d,r),i}}();const a=3*o.BASE_VELOCITY;window.onscroll=function(){const t=.22*window.scrollY;r.style.transform=`translateY(${t}px)`;var e=.15*c();e<-a&&(e=-a),e>a&&(e=a),0==e&&(e=o.BASE_VELOCITY),o.setVelocity(e)}},function(t,e,n){"use strict";function o(){return document.getElementById("canvas")}n.r(e),n.d(e,{canvas:function(){return o},BASE_VELOCITY:function(){return r},setVelocity:function(){return c},getDimensions:function(){return a},grid3d:function(){return u}});const i=()=>.16*(o().width+o().height),r=.08;var d=r;function c(t){d=t??d}function a(t){var e=o();const n={x:e.width/2,y:e.height/2};return{initial:{start:{xs:n.x-.14*e.width,ys:n.y-.14*e.height,xe:n.x+.14*e.width,ye:n.y+.14*e.height},end:{xs:n.x-.05*e.width,ys:n.y-.05*e.height,xe:n.x+.05*e.width,ye:n.y+.05*e.height}},center:n}}function u(t){t=o();const e=Math.floor(.26*(t.width+t.height));return Array(e).fill(0).map((()=>function(t){const e={init:!1,x:0,y:0,size:0,z:0,update:function(t,n,o){e.z-=d,(e.z<1||e.z>i())&&e.init(!0);var r=.1+l(e.z,0,t.width,e.size,0),c=l(e.x/e.z,0,1,0,t.width),a=l(e.y/e.z,0,1,0,t.height);n.beginPath(),n.arc(c,a,Math.abs(r),0,2*Math.PI,!1),n.fillStyle="white",n.fill()},init:function(n=!1){var o,r;e.x=(2*Math.random()-1)*(.045*t.height),e.y=(2*Math.random()-1)*(.045*t.height),e.size=.7+Math.random(),e.z=d<0?n?(o=0,r=.1,(Math.random()*(r-o)+o)*i()):e.z:n?Math.random()*i():e.z}};e.init||e.init(!1);return e}(t)))}function l(t,e,n,o,i){return(t-e)/(n-e)*(i-o)+o}},function(){window.isToggled=!1,window.toggle=function(){const t=[document.getElementById("download-card"),document.getElementById("footer"),document.getElementById("header")],e=[document.getElementById("contact"),document.getElementById("skills")];window.isToggled?(window.isToggled=!1,t.forEach((t=>{t.style.display="block"})),e.forEach((t=>{t.classList.remove("toggled")}))):(window.isToggled=!0,t.forEach((t=>{t.style.display="none"})),e.forEach((t=>{t.classList.add("toggled")})))}}],e={};function n(o){var i=e[o];if(void 0!==i)return i.exports;var r=e[o]={exports:{}};return t[o](r,r.exports,n),r.exports}n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,{a:e}),e},n.d=function(t,e){for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};!function(){"use strict";n.r(o);var t=n(1);n(2),n(4);window.onload=function(){(0,t.default)(document,120,12)}}()}(); \ No newline at end of file +!function(){var t=[,function(t,e,n){"use strict";function o(t,e,n){t===document&&(t=document.scrollingElement||document.documentElement||document.body.parentNode||document.body);var o=!1,i=t.scrollTop,r=t===document.body&&document.documentElement?document.documentElement:t;function d(n){n.preventDefault();var d=function(t){return t.detail?t.wheelDelta?t.wheelDelta/t.detail/40*(t.detail>0?1:-1):-t.detail/3:t.wheelDelta/120}(n);i+=-d*e,i=Math.max(0,Math.min(i,t.scrollHeight-r.clientHeight)),o||c()}function c(){o=!0;var e=(i-t.scrollTop)/n;t.scrollTop+=e,Math.abs(e)>.5?a(c):o=!1}t.addEventListener("mousewheel",d,{passive:!1}),t.addEventListener("DOMMouseScroll",d,{passive:!1});var a=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,20)}}n.r(e),n.d(e,{default:function(){return o}})},function(t,e,n){"use strict";n.r(e);var o=n(3);let i;const r=document.getElementById("header");let d;function c(t,e){t.clearRect(.5*-e.width,.5*-e.height,2*e.width,2*e.height),d.forEach((n=>{n.update(e,t)})),i=requestAnimationFrame((()=>c(t,e)))}!function(){const t=o.canvas();function e(){t.width=window.innerWidth-function(){const t=document.createElement("div");t.style.visibility="hidden",t.style.overflow="scroll",t.style.msOverflowStyle="scrollbar",document.body.appendChild(t);const e=document.createElement("div");t.appendChild(e);const n=t.offsetWidth-e.offsetWidth;return t.parentNode.removeChild(t),n}()-1,t.height=document.getElementById("header").offsetHeight,function(){null!=i&&(o.setVelocity(o.BASE_VELOCITY),cancelAnimationFrame(i));const t=o.canvas(),e=canvas.getContext("2d");e.translate(t.width/2,t.height/2),d=o.grid3d(t),c(e,t),window.addEventListener("mousemove",(function(t){const e=o.canvas(),n=canvas.getContext("2d"),i=e.width/2-.045*t.clientX,r=e.height/2-.045*t.clientY;n.setTransform(1,0,0,1,i,r)}))}()}window.addEventListener("resize",e,!1),e()}();var a=function(t){var e,n,o,i,r=(t=t||{}).delay||50;function d(){e=null,i=0}return d(),function(){return n=window.scrollY,null!=e&&(i=n-e),e=n,clearTimeout(o),o=setTimeout(d,r),i}}();const l=3*o.BASE_VELOCITY;window.onscroll=function(){const t=.22*window.scrollY;r.style.transform=`translateY(${t}px)`;var e=.15*a();e<-l&&(e=-l),e>l&&(e=l),0==e&&(e=o.BASE_VELOCITY),o.setVelocity(e);const n=document.getElementById("contact").offsetTop;if(window.scrollY>=n&&null!=i&&(cancelAnimationFrame(i),i=null),window.scrollY.16*(o().width+o().height),r=.08;var d=r;function c(t){d=t??d}function a(t){var e=o();const n={x:e.width/2,y:e.height/2};return{initial:{start:{xs:n.x-.14*e.width,ys:n.y-.14*e.height,xe:n.x+.14*e.width,ye:n.y+.14*e.height},end:{xs:n.x-.05*e.width,ys:n.y-.05*e.height,xe:n.x+.05*e.width,ye:n.y+.05*e.height}},center:n}}function l(t){t=o();const e=Math.floor(.26*(t.width+t.height));return Array(e).fill(0).map((()=>function(t){const e={init:!1,x:0,y:0,size:0,z:0,update:function(t,n){e.z-=d,(e.z<1||e.z>i())&&e.init(!0);var o=.1+u(e.z,0,t.width,e.size,0),r=u(e.x/e.z,0,1,0,t.width),c=u(e.y/e.z,0,1,0,t.height);n.beginPath(),n.arc(r,c,Math.abs(o),0,2*Math.PI,!1),n.fillStyle="white",n.fill()},init:function(n=!1){var o,r;e.x=(2*Math.random()-1)*(.045*t.height),e.y=(2*Math.random()-1)*(.045*t.height),e.size=.7+Math.random(),e.z=d<0?n?(o=0,r=.1,(Math.random()*(r-o)+o)*i()):e.z:n?Math.random()*i():e.z}};e.init||e.init(!1);return e}(t)))}function u(t,e,n,o,i){return(t-e)/(n-e)*(i-o)+o}},function(){window.isToggled=!1,window.toggle=function(){const t=[document.getElementById("download-card"),document.getElementById("footer"),document.getElementById("header")],e=[document.getElementById("contact"),document.getElementById("skills")];window.isToggled?(window.isToggled=!1,t.forEach((t=>{t.style.display="block"})),e.forEach((t=>{t.classList.remove("toggled")}))):(window.isToggled=!0,t.forEach((t=>{t.style.display="none"})),e.forEach((t=>{t.classList.add("toggled")})))}}],e={};function n(o){var i=e[o];if(void 0!==i)return i.exports;var r=e[o]={exports:{}};return t[o](r,r.exports,n),r.exports}n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,{a:e}),e},n.d=function(t,e){for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};!function(){"use strict";n.r(o);var t=n(1);n(2),n(4);window.onload=function(){(0,t.default)(document,120,12)}}()}(); \ No newline at end of file diff --git a/src/scripts/header.js b/src/scripts/header.js index 91a774e..111281a 100644 --- a/src/scripts/header.js +++ b/src/scripts/header.js @@ -2,6 +2,7 @@ import * as engine from "./particles"; let animationNo = undefined; const header = document.getElementById("header"); +let grid; (function () { const c = engine.canvas(); @@ -21,9 +22,8 @@ const header = document.getElementById("header"); const c = engine.canvas(); const ctx = canvas.getContext("2d"); ctx.translate(c.width / 2, c.height / 2); - const dimensions = engine.getDimensions(); - const grid = engine.grid3d(c); - loop(grid, ctx, c, dimensions); + grid = engine.grid3d(c); + loop(ctx, c); window.addEventListener("mousemove", function mouseMove(e) { const c = engine.canvas(); @@ -35,13 +35,13 @@ const header = document.getElementById("header"); } })(); -function loop(grid, ctx, c, d) { +function loop(ctx, c) { ctx.clearRect(-c.width * 0.5, -c.height * 0.5, c.width * 2, c.height * 2); grid.forEach((particle) => { - particle.update(c, ctx, d); + particle.update(c, ctx); }); - animationNo = requestAnimationFrame(() => loop(grid, ctx, c, d)); + animationNo = requestAnimationFrame(() => loop(ctx, c)); } function getScrollbarWidth() { @@ -113,4 +113,17 @@ window.onscroll = function () { } engine.setVelocity(speed); + + const threshold = document.getElementById('contact').offsetTop; + // const scroll = h.clientHeight + parallax; + if (window.scrollY >= threshold && animationNo != null) { + cancelAnimationFrame(animationNo); + animationNo = null; + } + if (window.scrollY < threshold && animationNo == null) { + const c = engine.canvas(); + const ctx = c.getContext('2d'); + loop(ctx, c); + } + }; diff --git a/src/scripts/particles.js b/src/scripts/particles.js index d60fc2b..1db6b95 100644 --- a/src/scripts/particles.js +++ b/src/scripts/particles.js @@ -49,7 +49,7 @@ function particleObject(c) { y: 0, size: 0, z: 0, - update: function update(c, ctx, d) { + update: function update(c, ctx) { particle.z -= velocity; if (particle.z < MIN_Z) { particle.init(true);