Zoom in Zoom out cursor in Squarespace

[tuanphan]

Description

• zoom in zoom out cursor with solid color

• view demo – password: abc

#1. Install Code

You can use this code to Code Injection > Footer

<!-- @tuanphan Zoom in Zoom out cursor -->
<div class="custom-cursor"></div>
<style>
.custom-cursor {
  width: 32px;
  height: 32px;
  background: #febaed;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  animation: pulse 2.5s cubic-bezier(0.333, 0, 0.667, 1) infinite;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.custom-cursor.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.25);
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
}
body * {
  cursor: none !important;
}
</style>
<script>
function initCustomCursor() {
  let cursor = document.querySelector('.custom-cursor');
  
  // Create cursor if doesn't exist
  if (!cursor) {
    cursor = document.createElement('div');
    cursor.className = 'custom-cursor';
    document.body.appendChild(cursor);
  }
  
  const targetSelectors = 'body';
  
  // Track cursor position
  document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
  
  // Show custom cursor when hovering target elements
  document.querySelectorAll(targetSelectors).forEach(element => {
    element.addEventListener('mouseenter', () => {
      cursor.classList.add('active');
    });
    
    element.addEventListener('mouseleave', () => {
      cursor.classList.remove('active');
    });
  });
}

// Init on page load
document.addEventListener('DOMContentLoaded', initCustomCursor);

// Re-init on AJAX page transitions (Squarespace)
window.addEventListener('mercury:load', initCustomCursor);
</script>

#2. Customize

#2.1. To change zoom ratio, change 0.5 & 1.25

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
}

#2.2. To change zoom color, change this line

background: #febaed;