CRD002

Parallax Card

A stunning 3D parallax effect card that responds to mouse movement

CSS Effects
Font Awesome Included: This snippet uses Font Awesome icons. The required stylesheet is automatically included at the top of the code block. If you are going to use this snippet in your project, add the stylesheet to your <head>.

Live Preview

Parallax Effect

Move your mouse around

Code

HTML 
<!-- Font Awesome Icons; Make sure to add it in the <head> tag -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
<div class="parallax-card">
  <div class="parallax-card-content">
    <div class="parallax-card-icon"><i class="fas fa-rocket"></i></div>
    <h3>Parallax Effect</h3>
    <p>Move your mouse around</p>
  </div>
</div>
CSS 
.parallax-card {
  position: relative;
  width: 280px;
  height: 320px;
  perspective: 1000px;
  border-radius: 16px;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.parallax-card-content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);
  background-size: 200% 200%;
  border-radius: 16px;
  color: white;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  animation: gradient-animation 7s ease infinite;
  transition: transform 0.5s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  padding: 24px;
  text-align: center;
}

.parallax-card-icon {
  font-size: 50px;
  margin-bottom: 20px;
  transform: translateZ(40px);
}

.parallax-card h3 {
  font-size: 24px;
  margin-bottom: 12px;
  transform: translateZ(30px);
}

.parallax-card p {
  font-size: 16px;
  opacity: 0.9;
  transform: translateZ(20px);
}

/* Parallax effect on mouse move */
.parallax-card:hover {
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .parallax-card {
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }
}

/* JavaScript needed for the effect */
JavaScript 
// Add this script to enable the parallax effect
document.addEventListener('DOMContentLoaded', function() {
  const card = document.querySelector('.parallax-card');
  const content = card.querySelector('.parallax-card-content');
  
  // Values for the parallax effect
  const maxRotation = 12; // Maximum rotation in degrees
  
  // Add event listeners for mouse movement
  card.addEventListener('mousemove', handleMouseMove);
  card.addEventListener('mouseleave', handleMouseLeave);
  card.addEventListener('mouseenter', handleMouseEnter);
  
  // Handle mouse movement to create parallax effect
  function handleMouseMove(e) {
    const rect = card.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    // Calculate mouse position relative to the center of the card
    const mouseX = e.clientX - centerX;
    const mouseY = e.clientY - centerY;
    
    // Calculate rotation values
    const rotateY = (mouseX / (rect.width / 2)) * maxRotation;
    const rotateX = -((mouseY / (rect.height / 2)) * maxRotation);
    
    // Apply the transform
    content.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  }
  
  // Reset card position when mouse leaves
  function handleMouseLeave() {
    content.style.transform = 'rotateX(0) rotateY(0)';
  }
  
  // Add a slight tilt when mouse enters (optional)
  function handleMouseEnter() {
    setTimeout(() => {
      content.style.transition = 'transform 0.1s ease';
    }, 100);
  }
});