Tips for maintaining the particles.js interaction while ensuring it stays under other elements

I have incorporated particle.js as a background element. By adjusting the z-index, I successfully positioned it in the background. While exploring solutions on the Github issues page, I came across a suggestion involving the z-index and this code snippet:

"interactivity": {
    "detect_on": "canvas",

This piece of code was already present in the default particle configuration.

The issue I am facing is reminiscent of this particular question. Although the individual claims to have resolved the problem, upon inspecting their codepen link, it appears that the obstacle persists with no content displayed above the particles.

Here's my current setup: Github Repository THE PROBLEM = the interactivity only functions right above and below the first content box. I have experimented with various adjustments to the widths of elements and z-index values. Additionally, I attempted containing other content within an extra div.

Is there a method to enable interactivity on the edges?

javascripthtmlcssparticle.js

Answer №1

Give this a try in your HTML code

<div id="particles-js" style="position:fixed;width:100%;z-index:-10;"></div>

If you prefer having interactive controls with particles in the background

change interactivity to window instead of canvas in the particles.json configuration file

"interactivity": {
"detect_on": "window",

Answer №2

Initially, I imported this code from CodePen

Afterwards, I made some modifications to the CSS:

canvas {
width: 100%;
height:100%;
}

h1{
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 2rem;
padding-top: 20rem;
font-weight: 200;
z-index: 2;
}

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-colour: #000000;
z-index: -1 !important; 
}

Changes in the HTML code:

<body>
<div id="particles-js"></div>
<h1> My text for my overlay title </h1>

In index.js near line 73 of the exported code, update the "detect_on" setting from canvas to window for interactivity:

"detect_on": "window",

View a working example based on the changes

If you want another solution with different options for customization, check out this CodePen demonstration alternative working example, which showcases variations like changing dots to stars.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can an <option> element in WebKit be customized by adding an icon to it?

I have integrated a WebView into one of my software applications, and within the HTML page it is rendering, there is a <select> tag. I am interested in enhancing the <option> elements within this select tag by adding icons to them: (The shadow ...

htmlcssmacoswebview

Activate a CSS class on an image upon hovering over a div (WordPress)

In my current setup, I have a loop that retrieves and displays posts using the following code: <div class="row" style="margin-bottom:50px;"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <a h ...

phpjqueryhtmlcsswordpress

Utilize Express Node to display API information on HTML pages using Handlebars template

I'm seeking assistance in rendering data from an API to HTML using handlebars. I'm a bit puzzled on how to properly showcase the data on the webpage. Here's what I have so far: ROUTES FOLDER/FILE: const express = require('express&ap ...

javascriptnode.jsexpresstemplateshandlebars.js

Creating a carousel with a curved dial or wheel: A step-by-step guide

My goal is to create a carousel with curved container and downward movement for items not in focus. The description should change based on the focused item, and I prefer the carousel not to autoplay. via GIPHY I've been searching online for a soluti ...

jquerycsscarouselcurveowl-carousel-2

The page refreshes automatically when the search icon is clicked, but the ajax method does not trigger the page reload

Whenever I click on the search-box <a>, the JavaScript is triggered but doesn't execute the ajax method filter_data_guide_specs(). Instead, the page automatically reloads and fails to read the JS code. HTML <div class="form-group"> < ...

javascriptjqueryhtmlajaxlaravel

The MySQL error wreaks havoc on the Node.js server, causing it to

Whenever there is an error or exception coming from MySQL, my nodejs server ends up crashing. This is the code snippet from my backend where I tried using if-else in the query function to handle the response, but it still crashes the server. Even with try ...

javascriptmysqlnode.js

Securing paths in NuxtJS

Hey there! I'm just getting started with nuxt and have set up the following routes: /home /dashboard /login My goal is to secure the /dashboard route only for users who are logged in and have a token stored in LocalStorage. The simplest solution ...

javascriptvue.jsnuxt.js

What is the best way to eliminate the right margin from my div element?

On my contact page, there's a div with the ID of contactdetails that appears to have a margin on the right side when viewed in Chrome's developer tools. This margin is causing some layout issues, specifically preventing me from placing the Google ...

htmlcss

The proper functioning of border-collapse and empty-cells together is not achieved

Refer to the link provided: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables To conceal empty cells, use the rule empty-cells: hide;. This allows a cell's parent element background to shine through the cell if it is emp ...

htmlcss

Translating jQuery to Regular JavaScript Principles

Could someone please provide me with a comparison between various jQuery methods and their equivalent normal Javascript DOM methods? For example: prev() next() before() after() I would greatly appreciate it if you could offer a mapping of jQuery/Javascr ...

javascriptjqueryhtmldomdom-manipulation

What are the tips for aligning this button perfectly on the page, despite being centered in a computer's resolution?

Dealing with Responsive Design Hey there! I'm having an issue with my Bootstrap layout. I managed to center a button, but when I adjust the resolution or make it smaller, the button wraps and shifts to the right. Can anyone help me figure out what we ...

htmlcssbootstrap-5

Uncomplicating Media Queries in Styled Components with the Power of React.js and Material-UI

My approach to handling media queries in Styled Components involves three distinct functions. One function handles min-width queries, another deals with max-width, and the third caters to both min-width and max-width scenarios. Let me walk you through eac ...

javascriptreactjsmaterial-designmaterial-uistyled-components

Reboot JavaScript once a day for optimal performance

Is it possible for the JavaScript's ?random to be based on the current date so that it only loads once a day? <script type="text/javascript" src="http://external.example.com/bookmarklet.js?random"></script> I am asking this question beca ...

javascriptoptimizationbrowser-cache

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories. When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive. CSS: button:hover { t ...

javascriptjqueryhtmlcss

Using multiple html files with ui-router's ui-view feature

Is it possible to create a complex UI using multiple HTML files with ui-view in AngularJS? I am trying to achieve a layout similar to this: I attempted to implement something on Plunker, but it seems like I'm struggling to grasp the underlying concep ...

javascripthtmlnode.jsangularjsangular-ui-router

"Converting to Typescript resulted in the absence of a default export in the module

I converted the JavaScript code to TypeScript and encountered an issue: The module has no default export I tried importing using curly braces and exporting with module.exports, but neither solution worked. contactController.ts const contacts: String[ ...

javascripttypescriptexpress

Transforming a string into an array containing objects

Can you help me understand how to transform a string into an array of objects? let str = `<%-found%>`; let result = []; JSON.parse(`["${str}"]`.replace(/},{/g, `}","{`)).forEach((e) => ...

javascriptarraysjson

Encountering an IndexError while iterating through a table in Selenium using Python due to a list index being out of range

Encountering IndexError: list index out of range while iterating through an HTML table but unsure about the cause. My function for iterating through the table involves clicking on web page frames and downloading files from another frame. The table consis ...

pythonhtmlselenium

React: Error - Unable to use this.setState as a function

When attempting to pass a value from the Child Class to the Parent Class and set it in the Parent's state, I encounter the following error: TypeError: this.setState is not a function Parent Class class Header extends React.Component { constr ...

javascriptjqueryreactjsreact-redux

Remove the Prisma self-referencing relationship (one-to-many)

I'm working with this particular prisma schema: model Directory { id String @id @default(cuid()) name String? parentDirectoryId String? userId String parentDirectory Directory? @relation("p ...

javascripttypescriptprismaself-referenceself-referencing-table