Loading...
(function(){<br />
let canvas = document.createElement('canvas'),<br />
ctx = canvas.getContext('2d'),<br />
w = canvas.width = innerWidth,<br />
h = canvas.height = innerHeight,<br />
particles = [],<br />
properties = {<br />
bgColor : 'rgba(17, 17, 19, 1)',<br />
particleColor : 'rgba(255, 40, 40, 1)',<br />
particleRadius : 3,<br />
particleCount : 60,<br />
particleMaxVelocity : 0.5,<br />
lineLength : 150,<br />
particleLife : 6,<br />
};<br />
<br />
document.querySelector('body').appendChild(canvas);<br />
<br />
window.onresize = function() {<br />
w = canvas.width = innerWidth;<br />
h = canvas.height = innerHeight;<br />
}<br />
<br />
class Particle {<br />
constructor() {<br />
this.x = Math.random()*w;<br />Loading...
ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
The ResizeObserver interface reports changes to the size of an element’s content box, border box, or the SVG bounding box.
To use ResizeObserver, you create a new instance and pass it a callback function that will be executed whenever the element’s size changes.
The element you want to observe is passed to the .observe() method.
1const someFunction = () => {}2let resizeObserver;34if(container ) {5 resizeObserver = new ResizeObserver(someFunction)6 resizeObserver.observe(observeElement)7}8
To stop observing an element, use the unobserve method.
Documentation:
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/unobserve
1resizeObserver.unobserve(observeElement);