Hovering triggers the appearance of Particle JS

I am attempting to add particle js as the background for my website. I have tried implementing this code snippet:

https://codepen.io/nikspatel/pen/aJGqpv

My CSS includes: position: fixed; z-index: -10; in order to keep the particles fixed on the screen even when scrolling.

Initially, it works well. However, as I scroll down, it does not behave as expected. The particles stop following the cursor and disappear altogether after further scrolling. I also attempted setting it as an iframe background, but encountered issues with the particles getting stuck when moving the cursor over certain divs.

You can see the issue here: http://mycontinent.com.my/test

This is the desired effect I am aiming for:

Any suggestions or solutions are greatly appreciated. Thank you.

javascripthtmlcss

Answer №1

Remember to always match the value of the "detect_on" attribute in the particles-js configuration

interactivity": {
   "detect_on": "document"
}

Answer №2

Here's something new to try:

 body,
    html {
        height: 100%
    }

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
}

I then inserted the code just after the opening body tag. Please note that the canvas class is not visible as it is dynamically generated by the particles.js library.

Check out this reference site

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

The element vanishes from sight after being detached and re-appended

Currently, I am utilizing hQuery's draggable and droppable features. My goal is to move an element from its original parent to its new dropped parent after dragging it. However, when I detach and append the element, it seems to disappear! What could ...

javascriptjquerycss

Exploring how to incorporate Express middleware into Firebase Functions for handling HTTPS requests

Encountering a challenge while using Express middleware with Firebase Functions. In this sample, a function is linked to the app() instance as shown below: app.get('*', (req, res) => { res.send(`Hello ${req.user.name}`); }); exports.autho ...

javascriptexpressfirebasegoogle-cloud-functions

Enabling table row scrolling with keyboard navigation in React

Struggling to figure out how to make my table scroll while navigating through the rows using the onKeyDown event. It seems that the event isn't updating when using the keyboard, even though the highlighting of the selected row with selected is working ...

javascriptreactjsmaterial-ui

A different approach to calling JavaScript functions

I have a method that populates an array. I would like to utilize it in this manner: arrayname.fill("First Array"); And not like this: arrayname = fill("First Array"); What approach should I take? function fillArray(name) { let newArray = ...

javascriptfunction

iPad2 always displays UIWebView in 'portrait' orientation

I have a sophisticated HTML5 website that includes JavaScript. It is displayed in a UIWebView. The JavaScript on the page is supposed to determine whether the iPad is in Portrait or Landscape mode. Unfortunately, I have encountered an issue. Regardless of ...

javascriptiosuiwebview

Utilizing server-side variables with JavaScript in Node.js, Express.js, and EJS

Hello everyone, I am just getting started with backend programming and I'm currently working on a project where I need to send an array of objects to the client. My goal is for the client to then add an object to this array. I am using node.js in conj ...

javascriptnode.jsexpressejs

Guide on generating virtual nodes from a string containing HTML tags using Vue 3

Investigation I stumbled upon this solution for converting a simple SVG with one path layer into Vue2 vnode list and wanted to adapt it for Vue3. After scouring resources, including the MDN docs, I couldn't find any pre-existing solutions. So, I dec ...

javascriptvue.jsvuetify.jshtml-parsing

Are elements loaded and hidden by ng-hide and ng-show, or does loading only occur with ng-show?

Is this method of programming effective for handling large elements such as 10 mb images? Are there alternative solutions that would work better? ...

javascriptangularjs

Show the selected row's data from a gridview in a dropdown menu

I am facing an issue with displaying the selected row value in a dropdown list. Can anyone assist me with this problem? Here is an example scenario: https://i.sstatic.net/RYssP.png Upon looking at the image, you will notice that the selected row's ...

c#htmlasp.net

Steps to include a tooltip on a button that triggers a modal

I am currently utilizing Bootstrap and jQuery to enhance the functionality of components in my application. I am specifically looking to incorporate tooltips into certain elements. The tooltips are implemented through jQuery within my index.html page: < ...

javascriptjquerybootstrap-modaltooltip

Implement CSS to layer HTML 5 canvases while including a margin

I have a design conundrum in my app where I am using multiple stacked HTML canvas elements for drawing. My goal is to make the canvases fit perfectly within their containing div while also maintaining a left and bottom margin. This is how my HTML structur ...

css

The issue arises in Selenium IDE when a variable is mistakenly identified as a string instead of a

Hey there, I've encountered an issue while using Selenium IDE. I'm trying to increment a variable by two, but instead of performing numerical addition, it seems to be concatenating strings. <tr> <td>store</td> <td> ...

javascriptselenium

"Can you provide some guidance on transferring the selected row value to a button that is located outside the grid, including a parameter in v-data-table

<v-toolbar flat> <v-toolbar-title>Details</v-toolbar-title> <div style="width:100%"> <v-col class="text-right"> <v-btn id="btnCopy" @click="Redirect()" clas ...

javascriptvue.jsvuetify.js

Retrieving the hidden field value using JavaScript on the server side

I'm encountering an issue with asp:hiddenfield where, after changing its value on the client side and trying to retrieve it on the server side, it returns null. Here is my client-side code: function pageLoad() { var gV = $('#<%=Hidden ...

c#javascriptjqueryasp.net

Issue with Firefox pageMod addon: window.location not functioning properly

I'm developing a unique Firefox Add-on that implements page redirects based on keyboard input. The keyboard detection is functioning properly, however, the redirect functionality seems to be failing. The complete code can be found on GitHub (even thou ...

javascriptjqueryfirefox-addon

Only show a single li element in CSS at a time

I'm working with Angular 2 and I have a list: <ul> <li *ngFor="let show of (ann)"> {{show}} </li> </ul> I want to show one item from the list every 3 seconds in an infinite loop. Here&apos ...

cssangular

Importing a .js file into HTML with AJAX

The following JavaScript code is located within index.html between "<script type="text/javascript">" function callanular() { peticion_http = new XMLHttpRequest(); peticion_http.onreadystatechange = showContent; peticion_ht ...

javascripthtmljqueryajax

Error: The value for $regex must be in the form of a string

Encountering a problem with an error in the Console: { [MongoError: $regex has to be a string] name: 'MongoError', message: '$regex has to be a string', waitedMS: 0, ok: 0, errmsg: '$regex has to be a string', code ...

javascripthtmlajaxnode.jsmongodb

Sidebar content alignment vertically

Struggling with aligning items in a sidebar, specifically regarding the fixed footer and the overflow of the main sidebar container. Trying to achieve a layout where the scrollable element stays within the designated space. Current setup includes: ...

htmlcsstwitter-bootstrapbootstrap-5

React JS Bootstrap Dropdown Troubleshooting

I'm facing a challenge in my React.js project while trying to implement a filter. The issue is that the list appears when I click on the button, but it doesn't disappear on the second click or if I click outside the list. Initially, I imported t ...

javascriptcssreactjstwitter-bootstrap