टीम पेज - भविष्यवादी डिजाइन

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

8 January 2025

माउस अनुयायी बिल्ली HTML CSS जावास्क्रिप्ट

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  height: 100%;
  font-family: 'Orbitron', sans-serif;
  background: #0d0d0d;
  color: #fff;
  overflow: hidden;
}
canvas#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}
.container {
  position: relative;
  z-index: 10;
  padding: 4rem;
  text-align: center;
}
.title {
  font-size: 3rem;
  color: #0ff;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px #0ff;
}
.card-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.team-card {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #0ff;
  padding: 2rem;
  width: 220px;
  border-radius: 15px;
  perspective: 1000px;
  box-shadow: 0 0 20px #0ff, 0 0 30px #00f;
  transition: transform 0.2s;
  cursor: pointer;
  transform-style: preserve-3d;
}
.team-card:hover {
  animation: pulse 1s infinite alternate;
}
.team-card img {
  width: 100px;
  border-radius: 50%;
  border: 3px solid #0ff;
  margin-bottom: 1rem;
}
.team-card h2 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}
.team-card p {
  color: #aaa;
  font-size: 0.9rem;
}
@keyframes pulse {
  from {
    box-shadow: 0 0 10px #0ff;
  }
  to {
    box-shadow: 0 0 20px #0ff, 0 0 30px #0f0;
  }
}

JS

const cards = document.querySelectorAll('.team-card');

// 3D Tilt effect
cards.forEach(card => {
  card.addEventListener('mousemove', e => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    const rotateX = (y - centerY) / 10;
    const rotateY = (centerX - x) / 10;
    card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = `rotateX(0deg) rotateY(0deg)`;
  });
});

// Particles background
const canvas = document.getElementById("bgCanvas");
const ctx = canvas.getContext("2d");
let particlesArray;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.addEventListener('resize', function(){
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  init();
});

function Particle(){
  this.x = Math.random() * canvas.width;
  this.y = Math.random() * canvas.height;
  this.size = Math.random() * 2 + 0.5;
  this.speedX = Math.random() * 1 - 0.5;
  this.speedY = Math.random() * 1 - 0.5;
  this.color = '#0ff';

this.update = function(){
    this.x += this.speedX;
    this.y += this.speedY;
    if(this.x < 0 || this.x > canvas.width) this.speedX *= -1;
    if(this.y < 0 || this.y > canvas.height) this.speedY *= -1;
  }

this.draw = function(){
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }
}

function init(){
  particlesArray = [];
  for(let i = 0; i < 100; i++){
    particlesArray.push(new Particle());
  }
}

function animate(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for(let i = 0; i < particlesArray.length; i++){
    particlesArray[i].update();
    particlesArray[i].draw();
  }
  requestAnimationFrame(animate);
}

init();
animate();

टीम पेज - भविष्यवादी डिजाइन

अनुशंसित

3डी कार्ड

yuhhxn द्वारा एक कोड

माउस अनुयायी बिल्ली HTML CSS जावास्क्रिप्ट

HTML

CSS

JS

अनुशंसित

3डी कार्ड

yuhhxn द्वारा एक कोड

माउस अनुयायी बिल्ली HTML CSS जावास्क्रिप्ट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS