Cartes

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 November 2024

Carrousel de cartes 3D HTML CSS JavaScript

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;
  }
}

JS

// 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);
});

Cartes

Recommandé

Produits de cartes

Animations de cartes

Carrousel de cartes 3D HTML CSS JavaScript

HTML

CSS

JS

Recommandé

Produits de cartes

Animations de cartes

Carrousel de cartes 3D HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS