Bymas | фиксация джаваскрипт

155876556 (06.05.2022 в 19:16)
REWERK , я же кинул файл, там код просто большой , не стал писать сюда не поместится

Ну так я не могу понять, как взаимодействие происходит скрипта со страницей.
________
посл. ред. 06.05.2022 в 20:10; всего 1 раз(а); by REWERK

REWERK , типа пузыри поднимающиеся в верх

REWERK , вот код

javascript

   (function() {      var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;      // Main     initHeader();     addListeners();      function initHeader() {         width = window.innerWidth;         height = window.innerHeight;         target = {x: 0, y: height};          largeHeader = document.getElementById('large-header');         largeHeader.style.height = height+'px';          canvas = document.getElementById('demo-canvas');         canvas.width = width;         canvas.height = height;         ctx = canvas.getContext('2d');          // create particles         circles = [];         for(var x = 0; x < width*0.5; x++) {             var c = new Circle();             circles.push(c);         }         animate();     }      // Event handling     function addListeners() {         window.addEventListener('scroll', scrollCheck);         window.addEventListener('resize', resize);     }      function scrollCheck() {         if(document.body.scrollTop > height) animateHeader = false;         else animateHeader = true;     }      function resize() {         width = window.innerWidth;         height = window.innerHeight;         largeHeader.style.height = height+'px';         canvas.width = width;         canvas.height = height;     }      function animate() {         if(animateHeader) {             ctx.clearRect(0,0,width,height);             for(var i in circles) {                 circles[i].draw();             }         }         requestAnimationFrame(animate);     }      // Canvas manipulation     function Circle() {         var _this = this;          // constructor         (function() {             _this.pos = {};             init();             console.log(_this);         })();          function init() {             _this.pos.x = Math.random()*width;             _this.pos.y = height+Math.random()*100;             _this.alpha = 0.1+Math.random()*0.3;             _this.scale = 0.1+Math.random()*0.3;             _this.velocity = Math.random();         }          this.draw = function() {             if(_this.alpha <= 0) {                 init();             }             _this.pos.y -= _this.velocity;             _this.alpha -= 0.0005;             ctx.beginPath();             ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);             ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';             ctx.fill();         };     }  })();

javascript

   (function() {        var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;        // Main      initHeader();      addListeners();        function initHeader() {          width = window.innerWidth;          height = window.innerHeight;          target = {x: 0, y: height};            largeHeader = document.getElementById('large-header');          largeHeader.style.height = height+'px';            canvas = document.getElementById('demo-canvas');          canvas.width = width;          canvas.height = height;          ctx = canvas.getContext('2d');            // create particles          circles = [];          for(var x = 0; x < width*0.5; x++) {              var c = new Circle();              circles.push(c);          }          animate();      }        // Event handling      function addListeners() {          window.addEventListener('scroll', scrollCheck);          window.addEventListener('resize', resize);      }        function scrollCheck() {          return false;          if(document.body.scrollTop > height) animateHeader = false;          else animateHeader = true;      }        function resize() {          width = window.innerWidth;          height = window.innerHeight;          largeHeader.style.height = height+'px';          canvas.width = width;          canvas.height = height;      }        function animate() {          if(animateHeader) {              ctx.clearRect(0,0,width,height);              for(var i in circles) {                  circles[i].draw();              }          }          requestAnimationFrame(animate);      }        // Canvas manipulation      function Circle() {          var _this = this;            // constructor          (function() {              _this.pos = {};              init();              console.log(_this);          })();            function init() {              _this.pos.x = Math.random()*width;              _this.pos.y = height+Math.random()*100;              _this.alpha = 0.1+Math.random()*0.3;              _this.scale = 0.1+Math.random()*0.3;              _this.velocity = Math.random();          }            this.draw = function() {              if(_this.alpha <= 0) {                  init();              }              _this.pos.y -= _this.velocity;              _this.alpha -= 0.0005;              ctx.beginPath();              ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);              ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';              ctx.fill();          };      }    })();