OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to implement infinite scroll with particle system?

  • Thread starter Thread starter SinaBanana
  • Start date Start date
S

SinaBanana

Guest
I have been trying to implement infinite scroll with my particle system, but have not been successful. Basically on my site the particle system is the background, and I have fixed content on top. But I would like to infinitely scroll through the background, generate new particles as I go, and then seamlessly transition when I am at the top again. I am utilizing webflow, so that is where I manage the CSS.

I am quite new to this, so I apologize if my query seems a bit naive.

Does anyone know how to best approach this?

Thank you,

Sina

Here is the particles.js code I am using (used this resource):

Code:
<style>
.particles-js-canvas-el {
position: absolute;
max-width: 100%;
max-height:100%;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 0;
}</style>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 

<script>

particlesJS(

{
  "particles": {
    "number": {
      "value": 11,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#000000"
    },
    "shape": {
      "type": "edge",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 1,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 8,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 3,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": false,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

For the infinite scroll, I have tried adding variations of this:

Code:
    const particlesCanvas = document.getElementById('particles-js');
    let scrollTop = 0;

    function infiniteScroll() {
      const scrollPosition = window.scrollY;
      const windowHeight = window.innerHeight;

      particlesCanvas.style.transform = `translateY(${-scrollPosition}px)`;

      if (scrollPosition >= windowHeight) {
        window.scrollTo(0, 1);
      }

      requestAnimationFrame(infiniteScroll);
    }

    window.addEventListener('scroll', infiniteScroll);
    requestAnimationFrame(infiniteScroll);
  });

The best I can manage is infinite scroll (200% canvas height), but then it being jumpy and the background being completely generated anew.

<p>I have been trying to implement infinite scroll with my particle system, but have not been successful. Basically on my site the particle system is the background, and I have fixed content on top. But I would like to infinitely scroll through the background, generate new particles as I go, and then seamlessly transition when I am at the top again. I am utilizing webflow, so that is where I manage the CSS.</p>
<p>I am quite new to this, so I apologize if my query seems a bit naive.</p>
<p>Does anyone know how to best approach this?</p>
<p>Thank you,</p>
<p>Sina</p>
<p>Here is the particles.js code I am using (used <a href="https://vincentgarreau.com/particles.js/" rel="nofollow noreferrer">this</a> resource):</p>
<pre><code><style>
.particles-js-canvas-el {
position: absolute;
max-width: 100%;
max-height:100%;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 0;
}</style>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script>

particlesJS(

{
"particles": {
"number": {
"value": 11,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#000000"
},
"shape": {
"type": "edge",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 8,
"random": false,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 3,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
</code></pre>
<p>For the infinite scroll, I have tried adding variations of this:</p>
<pre><code> const particlesCanvas = document.getElementById('particles-js');
let scrollTop = 0;

function infiniteScroll() {
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;

particlesCanvas.style.transform = `translateY(${-scrollPosition}px)`;

if (scrollPosition >= windowHeight) {
window.scrollTo(0, 1);
}

requestAnimationFrame(infiniteScroll);
}

window.addEventListener('scroll', infiniteScroll);
requestAnimationFrame(infiniteScroll);
});
</code></pre>
<p>The best I can manage is infinite scroll (200% canvas height), but then it being jumpy and the background being completely generated anew.</p>
 

Latest posts

Top