How to center a "
" or making the cursor not to detect it

Question

I'm working on a Home Page with a fullscreen background with "particles" moving everywhere. The particles detect the mouse cursor and move with the mouse cursor. The Home Page has a vertically centered div with a logo. The problem occurs when the mouse cursor is at the center of the screen (vertically speaking), over the div, that the particles stop moving and the animation stops immediately. I want to solve this, and I think the solution is making the cursor not to detect when its over that element, or centering the div. I don't know how to do it.

Please post the relevant code so we can see where the problem is — MichaelvE, Mar 21 '19 at 00:07

James Narayanan · Answer 1 · 2019-03-21T00:36:09.713

Here is an example of a block attached to the mouse cursor. It assigns the mousemove event to the entire document, not a specific div, allowing the cursor to always be tracked, including when over a centered div.

function moveBlock(event) {
  var block = document.getElementById('block');
  block.style.left = event.clientX + 'px';
  block.style.top = event.clientY + 'px';
}

document.addEventListener('mousemove', moveBlock);

body {
  background-color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#block {
  background-color: red;
  width: 50px;
  height: 50px;
  
  /* This is important, and allows the block to move
  * This is because the top and left style attributes do not work
  * without position being absolute or fixed
  */
  position: absolute; 
}

#coverup {
  background-color: #eee;
  padding: 50px;
  font-size: 5rem;
  font-family: Courier;
  text-align: center;
  width: 50vw;
  height: 50vh;
}

<html>

<body>
  <div id="block"></div>

  <!-- This is the centered div -->
  <div id="coverup">I cover the page</div>
</body>

</html>

score 0 · Answer 2 · answered Mar 21 '19 at 01:01

I solved it using this:

HTML

<div id="no-pointer" class="row">

        <div class="col-md-12 col-sm-12">
             <h1>Brand</h1>
             <h4>Slogan</h4>
             <span id="yes-pointer" onclick="openNav()"><a class="smoothScroll btn btn-default">Button</a></span>
        </div>

</div>

CSS

#no-pointer{
  pointer-events: none;
}

#yes-pointer{
  pointer-events: auto;
}

How to center a "" or making the cursor not to detect it

2 Answers2

How to center a "
" or making the cursor not to detect it