Tarjetas

1,220 alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

4 December 2024

Control deslizante de tarjetas animadas expandibles

28 March 2025

Tarjetas móviles delineadas de CodePen Home

19 July 2023

Carrusel de tarjetas con CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Tilt Team Cards</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="title">Our <span>Amazing</span> Team</h1>
    
    <div class="team-grid">
      <div class="team-card" data-tilt data-tilt-max="20" data-tilt-speed="400" data-tilt-perspective="1000">
        <div class="card-content">
          <div class="profile-img-container">
            <div class="profile-img">
              <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" alt="Sarah Johnson">
            </div>
          </div>
          <div class="card-text">
            <h2 class="member-name">Sarah Johnson</h2>
            <p class="member-role">CEO & Founder</p>
            <p class="member-description">Visionary leader with over 10 years of experience in tech industry.</p>
            <div class="social-icons">
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
              <a href="#"><i class="fab fa-github"></i></a>
            </div>
          </div>
          <div class="glow"></div>
        </div>
      </div>

<div class="team-card" data-tilt data-tilt-max="20" data-tilt-speed="400" data-tilt-perspective="1000">
        <div class="card-content">
          <div class="profile-img-container">
            <div class="profile-img">
              <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" alt="Michael Chen">
            </div>
          </div>
          <div class="card-text">
            <h2 class="member-name">Michael Chen</h2>
            <p class="member-role">CTO</p>
            <p class="member-description">Tech genius with a passion for innovative solutions and cutting-edge technologies.</p>
            <div class="social-icons">
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
              <a href="#"><i class="fab fa-github"></i></a>
            </div>
          </div>
          <div class="glow"></div>
        </div>
      </div>

<div class="team-card" data-tilt data-tilt-max="20" data-tilt-speed="400" data-tilt-perspective="1000">
        <div class="card-content">
          <div class="profile-img-container">
            <div class="profile-img">
              <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2" alt="Emma Rodriguez">
            </div>
          </div>
          <div class="card-text">
            <h2 class="member-name">Emma Rodriguez</h2>
            <p class="member-role">Lead Designer</p>
            <p class="member-description">Award-winning designer with an eye for detail and beautiful aesthetics.</p>
            <div class="social-icons">
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
              <a href="#"><i class="fab fa-dribbble"></i></a>
            </div>
          </div>
          <div class="glow"></div>
        </div>
      </div>

<div class="team-card" data-tilt data-tilt-max="20" data-tilt-speed="400" data-tilt-perspective="1000">
        <div class="card-content">
          <div class="profile-img-container">
            <div class="profile-img">
              <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79" alt="James Wilson">
            </div>
          </div>
          <div class="card-text">
            <h2 class="member-name">James Wilson</h2>
            <p class="member-role">Lead Developer</p>
            <p class="member-description">Coding wizard who turns complex problems into elegant solutions.</p>
            <div class="social-icons">
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
              <a href="#"><i class="fab fa-github"></i></a>
            </div>
          </div>
          <div class="glow"></div>
        </div>
      </div>

<div class="team-card" data-tilt data-tilt-max="20" data-tilt-speed="400" data-tilt-perspective="1000">
        <div class="card-content">
          <div class="profile-img-container">
            <div class="profile-img">
              <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956" alt="Olivia Kim">
            </div>
          </div>
          <div class="card-text">
            <h2 class="member-name">Olivia Kim</h2>
            <p class="member-role">Marketing Director</p>
            <p class="member-description">Strategic marketer with a knack for brand storytelling and growth hacking.</p>
            <div class="social-icons">
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          <div class="glow"></div>
        </div>
      </div>

<div class="team-card" data-tilt data-tilt-max="20" data-tilt-speed="400" data-tilt-perspective="1000">
        <div class="card-content">
          <div class="profile-img-container">
            <div class="profile-img">
              <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e" alt="David Patel">
            </div>
          </div>
          <div class="card-text">
            <h2 class="member-name">David Patel</h2>
            <p class="member-role">Product Manager</p>
            <p class="member-description">User-focused product specialist with a track record of successful launches.</p>
            <div class="social-icons">
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
              <a href="#"><i class="fab fa-medium"></i></a>
            </div>
          </div>
          <div class="glow"></div>
        </div>
      </div>
    </div>
  </div>

CSS

:root {
  --primary-color: #6b38fb;
  --secondary-color: #9f73ff;
  --bg-color: #0c0c14;
  --card-bg: rgba(16, 16, 29, 0.8);
  --text-primary: #ffffff;
  --text-secondary: #b3b3cc;
  --glow-color: rgba(107, 56, 251, 0.35);
  --card-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  --hover-shadow: 0 25px 50px rgba(107, 56, 251, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg-color);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(107, 56, 251, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(107, 56, 251, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(16, 16, 29, 0.9) 0%, var(--bg-color) 100%);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.title {
  text-align: center;
  font-size: 3.5rem;
  margin-bottom: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  opacity: 0;
  transform: translateY(30px);
  background: linear-gradient(to right, var(--text-primary), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.title span {
  color: var(--primary-color);
  position: relative;
}

.title span::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.title.animate span::after {
  transform: scaleX(1);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 4rem;
}

.team-card {
  position: relative;
  height: 420px;
  transform-style: preserve-3d;
  perspective: 1000px;
  opacity: 0;
  transform: translateY(50px);
}

.card-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  border-radius: 20px;
  padding: 30px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.team-card:hover .card-content {
  box-shadow: var(--hover-shadow);
  border-color: rgba(107, 56, 251, 0.2);
  transform: translateZ(10px);
}

.profile-img-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 25px;
  transform: translateZ(35px);
}

.profile-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--primary-color);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.profile-img::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle at center, rgba(107, 56, 251, 0.5), transparent 60%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.6s ease;
}

.team-card:hover .profile-img::before {
  opacity: 1;
}

.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.team-card:hover .profile-img img {
  transform: scale(1.1);
}

.card-text {
  transform: translateZ(30px);
  text-align: center;
}

.member-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
}

.member-role {
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1rem;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
}

.member-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
}

.team-card.animate .member-name,
.team-card.animate .member-role,
.team-card.animate .member-description,
.team-card.animate .social-icons {
  transform: translateY(0);
  opacity: 1;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.4s;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-icons a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  transform: scale(0);
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
}

.social-icons a:hover {
  color: #ffffff;
  transform: translateY(-5px);
}

.social-icons a:hover::before {
  transform: scale(1);
}

.glow {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  background: radial-gradient(circle at center, var(--glow-color), transparent 50%);
  opacity: 0;
  filter: blur(50px);
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: -1;
}

.team-card:hover .glow {
  opacity: 1;
}

/* Media Queries for Responsiveness */
@media (max-width: 1200px) {
  .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
  }
  
  .title {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  .title {
    font-size: 2.5rem;
  }
  
  .container {
    padding: 3rem 1.5rem;
  }
  
  .team-card {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .container {
    padding: 2rem 1rem;
  }
}

// Initialize GSAP and TextPlugin
gsap.registerPlugin(TextPlugin);

// Initialize Vanilla Tilt for 3D effects
VanillaTilt.init(document.querySelectorAll(".team-card"), {
  max: 20,
  speed: 400,
  glare: true,
  "max-glare": 0.3,
  gyroscope: true,
  scale: 1.03,
  perspective: 1000
});

// Animation timeline
const mainTimeline = gsap.timeline({ defaults: { ease: "power3.out" } });

// Animate the title
mainTimeline.to(".title", {
  opacity: 1,
  y: 0,
  duration: 1.2
}).add(() => {
  document.querySelector('.title').classList.add('animate');
});

// Staggered animation for the cards
mainTimeline.to(".team-card", {
  opacity: 1,
  y: 0,
  duration: 0.8,
  stagger: 0.15,
  onComplete: function() {
    // Add the animate class to each card for the text animations
    document.querySelectorAll('.team-card').forEach(card => {
      card.classList.add('animate');
    });
  }
}, "-=0.4");

// Mouse move effect for cards
document.querySelectorAll('.team-card').forEach(card => {
  const glow = card.querySelector('.glow');
  
  card.addEventListener('mousemove', (e) => {
    const cardRect = card.getBoundingClientRect();
    const x = e.clientX - cardRect.left;
    const y = e.clientY - cardRect.top;
    
    // Move glow effect to follow mouse
    gsap.to(glow, {
      left: x - glow.offsetWidth / 2,
      top: y - glow.offsetHeight / 2,
      duration: 0.5,
      ease: "power2.out"
    });
    
    // Add subtle rotation based on mouse position
    const rotateY = ((x / cardRect.width) - 0.5) * 10;
    const rotateX = ((y / cardRect.height) - 0.5) * -10;
    
    gsap.to(card.querySelector('.card-content'), {
      rotateY: rotateY,
      rotateX: rotateX,
      duration: 0.3,
      ease: "power1.out"
    });
  });
  
  // Reset on mouse leave
  card.addEventListener('mouseleave', () => {
    gsap.to(glow, {
      left: "20%",
      top: "20%",
      duration: 0.5,
      ease: "power2.out"
    });
    
    gsap.to(card.querySelector('.card-content'), {
      rotateY: 0,
      rotateX: 0,
      duration: 0.5,
      ease: "power1.out"
    });
  });
});

// Random floating animation for cards to create a subtle "alive" effect
document.querySelectorAll('.team-card').forEach((card, index) => {
  const randomDelay = index * 0.2;
  const randomDuration = 2 + Math.random() * 2;
  
  gsap.to(card, {
    y: "+=10",
    duration: randomDuration,
    repeat: -1,
    yoyo: true,
    ease: "sine.inOut",
    delay: randomDelay
  });
});

// Text animation effect for card descriptions
document.querySelectorAll('.member-description').forEach((desc) => {
  const originalText = desc.textContent;
  desc.textContent = '';
  
  // Create text animation on hover
  desc.parentElement.parentElement.addEventListener('mouseenter', () => {
    gsap.to(desc, {
      duration: 1,
      text: {
        value: originalText,
        delimiter: ""
      },
      ease: "none"
    });
  });
  
  desc.parentElement.parentElement.addEventListener('mouseleave', () => {
    gsap.to(desc, {
      duration: 0.5,
      text: {
        value: originalText,
        delimiter: ""
      },
      ease: "none"
    });
  });
});

// Add shine effect on card hover
document.querySelectorAll('.profile-img').forEach(img => {
  const shine = document.createElement('div');
  shine.classList.add('shine-effect');
  shine.style.position = 'absolute';
  shine.style.top = '0';
  shine.style.left = '0';
  shine.style.width = '100%';
  shine.style.height = '100%';
  shine.style.background = 'linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%)';
  shine.style.transform = 'translateX(-100%)';
  shine.style.pointerEvents = 'none';
  
  img.appendChild(shine);
  
  img.parentElement.parentElement.addEventListener('mouseenter', () => {
    gsap.to(shine, {
      x: '100%',
      duration: 1,
      ease: "power2.out"
    });
  });
});

// Scroll animation to reveal cards as they enter viewport
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.1
});

document.querySelectorAll('.team-card').forEach(card => {
  observer.observe(card);
});