Include my Javascript animation on all the html body so it stays while scrolling the page-CodePudding

Hi i'm learning html/css and javascript and I think I'm having an issue with my html structure. Basically what I want to do is that my particles animation stays on the website while scrolling the page. I have a Javascript file that does a getElementById('particles') to run the canvas on a div but it only stays on the first page.

I tried to move the "particles" div as a main div that will contain all the sections but it didn't work.

Here's the repository of the files if anyone is interested: https://github.com/DanielVillacis/DanielVillacis.github.io

Here's my html structure :

document.addEventListener('DOMContentLoaded', function() {
  particleground(document.getElementById('particles'), {
    dotColor: '#FFFFFF',
    lineColor: '#FFFFFF'
  });
  var intro = document.getElementById('intro');
  intro.style.marginTop = -intro.offsetHeight / 2   'px';
}, false);

html,
body {
  width: 100%;
  height: 100vh;
}

canvas {
  display: inline-block;
  vertical-align: baseline;
}

header,
section {
  display: block;
}

#particles {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

section {
  height: 100vh;
  width: 100%;
  display: inline-block;
  scroll-snap-align: start;
}

<body>
  <div >
    <main role="main">
      <section >
        <div id="particles">
          <header  id="splash" role="banner">
            <div id="intro">

            </div>
          </header>
        </div>
      </section>

      <section >
        <div >
        </div>
      </section>

      <section >
        <div >
        </div>
      </section>

      <section >
        <h2 >Contact</h2>
        <div >
        </div>
      </section>
    </main>
  </div>
</body>

CodePudding user response：

Use the CSS position: fixed; property.

With position set to fixed, your canvas is positioned relative to the viewport and hence would remain even while scrolling.

.pg-canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 100vh;
}

CodePudding user response：

You have put the particles (which are shown on a canvas) into a section which will scroll out of view.

The particles library you are using places this canvas just before the element you have given it, which has id particles.

You can fix just the canvas by adding position: fixed to the canvas selector in your style sheet (watch out if you have other canvases to give a more definite selector).

This will work in many cases to fix the canvas with the particles to the viewport. But note this description from MDN

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

You are OK at the moment because you move intro with top but if that were a translate you’d have to put the canvas out of intro.