jQuery toggleClass example

Toggle class name on click in jQuery

by joshmoto

HTML

<div id="target_1" class="target"></div>
<div id="target_2" class="target"></div>
<div id="target_3" class="target"></div>

<mark>
  <span data-x></span>
  <span data-y></span>
  <span data-o></span>
</mark>

SCSS

BODY {
  width: 100%;
  height: 1440px;
  position: relative;
  cursor: none;
  padding: 0;
  margin: 0;
  background: black;
  
  &:hover {
    
    MARK {
      opacity: 1;
    }
  }
}

MARK {
  opacity: 0;
  transition: all 0.25s ease;
  background: transparent;
  display: block;
  
  SPAN {
    display: block;
  }
  
  [data-o] {
    transition: all 0.25s ease;
    border: 1px solid lime;
    width: 41px;
    height: 41px;
    position: fixed;
    transform: translate(-21px,-21px);
    z-index: 1;
    
    &:before {
      display: block;
      content: '';
      background: lime;
      position: absolute;
      width: 1px;
      top: 10px; left: calc(50% - 1px); bottom: 10px;
    }
    
    &:after {
      display: block;
      content: '';
      background: lime;
      position: absolute;
      height: 1px;
      top: calc(50% - 1px); left: 10px; right: 10px;
    }
  }
  
  [data-x] {
    &::before {
      transition: all 0.25s ease;
      display: block;
      content: '';
      width: 1px;
      background: lime;
      position: fixed;
      top: 10px;
      bottom: var(--cursor-x-bottom);
      left: var(--cursor-x-left);
    }

    &::after {
      transition: all 0.25s ease;
      display: block;
      content: '';
      width: 1px;
      background: lime;
      position: fixed;
      top: var(--cursor-x-top);
      bottom: 10px;
      left: var(--cursor-x-left);
    }
    
   } 
   
   [data-y] {
     
    &::before {
      transition: all 0.25s ease;
      display: block;
      content: '';
      height: 1px;
      background: lime;
      position: fixed;
      top: var(--cursor-y-top);
      right: var(--cursor-y-right);
      left: 10px;
    }

    &::after {
      transition: all 0.25s ease;
      display: block;
      content: '';
      height: 1px;
      background: lime;
      position: fixed;
      top: var(--cursor-y-top);
      right: 10px;
      left: var(--cursor-y-left);
    }
   
}
}

.target {
  position: absolute;
  width: 40px;
 ...

JavaScript

// our crosshair constant
const crosshair = $('MARK');

// let cursor mouse position in window object
let winDimensions = {};
let cursorMousePos = {};

function targets() {
	$('.target').each(function(e) {
  console.log(this.pageX);
  });
}

targets();


// document on mouse move
$(document).on('mousemove', function(e) {

  // window dimensions
  winDimensions.x = $(window).outerWidth();
  winDimensions.y = $(window).outerHeight();

  // update cursor mouse position x and y
  cursorMousePos.x = e.pageX - $(this).scrollLeft();
  cursorMousePos.y = e.pageY - $(this).scrollTop();

  // set crosshair x y position css
  $('[data-o]', crosshair).css({
    left: cursorMousePos.x + 'px',
    top: cursorMousePos.y + 'px'
  })

  // set css var property --cursor-x position
  let x = $('[data-x]', crosshair);
  let y = $('[data-y]', crosshair);

  x[0].style.setProperty(
    '--cursor-x-left', cursorMousePos.x + 'px'
  );

  x[0].style.setProperty(
    '--cursor-x-bottom', ((winDimensions.y - cursorMousePos.y) + 31) + 'px'
  );

  x[0].style.setProperty(
    '--cursor-x-top', (cursorMousePos.y + 31) + 'px'
  );
  
  
  
  y[0].style.setProperty(
    '--cursor-y-top', cursorMousePos.y + 'px'
  );

  y[0].style.setProperty(
    '--cursor-y-right', ((winDimensions.x - cursorMousePos.x) + 31) + 'px'
  );

  y[0].style.setProperty(
    '--cursor-y-left', (cursorMousePos.x + 31) + 'px'
  );


});