Un code par alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 May 2025

Titre collant piloté par défilement

8 February 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Futuristic Image Slider</title>
  <link rel="stylesheet" href="css/style.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=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <header>
      <h1>NEOMORPHIC<span>VISION</span></h1>
      <nav>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

<div class="slider-container">
      <div class="slider">
        <div class="slide active" data-index="0">
          <div class="slide-content">
            <h2>Cybernetic Landscapes</h2>
            <p>Experience a new world where technology and nature converge.</p>
            <button class="explore-btn">Explore</button>
          </div>
          <div class="slide-image">
            <img src="https://images.unsplash.com/photo-1558655146-9f40138edfeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Futuristic City">
          </div>
          <div class="slide-number">01</div>
        </div>
        <div class="slide" data-index="1">
          <div class="slide-content">
            <h2>Digital Horizons</h2>
            <p>Pushing the boundaries of what's possible with cutting-edge technology.</p>
            <button class="explore-btn">Explore</button>
          </div>
          <div class="slide-image">
            <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Digital Space">
          </div>
          <div class="slide-number">02</div>
        </div>
        <div class="slide" data-index="2">
          <div class="slide-content">
            <h2>Quantum Synthesis</h2>
            <p>Where science fiction meets reality in a symphony of light and energy.</p>
            <button class="explore-btn">Explore</button>
          </div>
          <div class="slide-image">
            <img src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Quantum Space">
          </div>
          <div class="slide-number">03</div>
        </div>
        <div class="slide" data-index="3">
          <div class="slide-content">
            <h2>Neo-Urban Visions</h2>
            <p>The cities of tomorrow, reimagined for a sustainable future.</p>
            <button class="explore-btn">Explore</button>
          </div>
          <div class="slide-image">
            <img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Neo Urban">
          </div>
          <div class="slide-number">04</div>
        </div>
      </div>

<div class="info-section">
      <div class="info-card">
        <i class="fas fa-rocket"></i>
        <h3>Future Tech</h3>
        <p>Exploring the cutting edge of technological innovation</p>
      </div>
      <div class="info-card">
        <i class="fas fa-microchip"></i>
        <h3>AI Systems</h3>
        <p>Intelligent solutions for tomorrow's challenges</p>
      </div>
      <div class="info-card">
        <i class="fas fa-vr-cardboard"></i>
        <h3>Virtual Reality</h3>
        <p>Immersive experiences that transcend reality</p>
      </div>
    </div>
  </div>

CSS

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

:root {
  --primary-color: #0070f3;
  --secondary-color: #00c6ff;
  --text-color: #e0e0e0;
  --dark-bg: #080b1a;
  --card-bg: #10172a;
  --accent-color: #7928ca;
  --transition-time: 0.5s;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--dark-bg);
  color: var(--text-color);
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(0, 40, 83, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(121, 40, 202, 0.2) 0%, transparent 40%);
  background-attachment: fixed;
}

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

/* Header Styles */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

h1 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 2px;
  color: var(--text-color);
  position: relative;
}

h1 span {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

nav a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  letter-spacing: 1px;
  padding: 0.5rem 1rem;
  position: relative;
  transition: color 0.3s;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  transition: width 0.3s ease;
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

nav a.active,
nav a:hover {
  color: #fff;
}

/* Slider Styles */
.slider-container {
  position: relative;
  height: 70vh;
  margin-bottom: 4rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  background: var(--card-bg);
}

.slider {
  height: 100%;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100px);
  transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.slide-content {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
  position: relative;
  z-index: 2;
}

.slide-image {
  width: 60%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slide-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--card-bg) 0%, rgba(16, 23, 42, 0.5) 50%, rgba(16, 23, 42, 0) 100%);
  z-index: 1;
}

.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.slide.active .slide-image img {
  transform: scale(1.1);
}

.slide-number {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  font-size: 6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.1);
  font-family: 'Orbitron', sans-serif;
}

.slide-content h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #fff, var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease 0.2s;
}

.slide-content p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease 0.4s;
}

.slide.active .slide-content h2,
.slide.active .slide-content p {
  opacity: 1;
  transform: translateY(0);
}

.explore-btn {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border: none;
  color: white;
  padding: 0.8rem 2rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: fit-content;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.7s ease 0.6s;
}

.slide.active .explore-btn {
  opacity: 1;
  transform: translateY(0);
}

.explore-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s ease;
}

.explore-btn:hover {
  box-shadow: 0 5px 15px rgba(0, 112, 243, 0.4);
  transform: translateY(-3px);
}

.explore-btn:hover::before {
  left: 100%;
}

/* Slider Controls */
.slider-controls {
  position: absolute;
  bottom: 2rem;
  left: 4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 5;
}

.prev-btn,
.next-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  transition: all 0.3s ease;
}

.prev-btn:hover,
.next-btn:hover {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  color: white;
}

.progress-bar {
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  width: 25%;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  transition: width 0.5s ease;
}

.slide-indicators {
  position: absolute;
  bottom: 2rem;
  right: 4rem;
  display: flex;
  gap: 0.5rem;
  z-index: 5;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  transform: scale(1.2);
}

/* Info Section */
.info-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.info-card {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 112, 243, 0.1), rgba(0, 198, 255, 0.1));
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s ease;
  z-index: -1;
}

.info-card:hover::before {
  clip-path: circle(100% at 50% 50%);
}

.info-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.info-card i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.info-card h3 {
  font-family: 'Orbitron', sans-serif;
  margin-bottom: 1rem;
  color: white;
}

.info-card p {
  color: var(--text-color);
  line-height: 1.6;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .slide-content {
    width: 50%;
    padding: 2rem;
  }

.slide-image {
    width: 50%;
  }

.info-section {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 1rem;
  }

nav ul {
    gap: 1rem;
  }

.slider-container {
    height: 80vh;
  }

.slide {
    flex-direction: column-reverse;
  }

.slide-content {
    width: 100%;
    padding: 2rem;
  }

.slide-image {
    width: 100%;
    height: 60%;
  }

.slide-image::before {
    background: linear-gradient(0deg, var(--card-bg) 0%, rgba(16, 23, 42, 0.5) 50%, rgba(16, 23, 42, 0) 100%);
  }

.slider-controls {
    left: 50%;
    transform: translateX(-50%);
  }

.slide-indicators {
    display: none;
  }

.info-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }

nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }

.slide-content h2 {
    font-size: 1.8rem;
  }

.slide-content p {
    font-size: 1rem;
  }

.slider-container {
    height: 90vh;
  }
}

JS

document.addEventListener('DOMContentLoaded', () => {
  // Slider elements
  const slides = document.querySelectorAll('.slide');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const indicators = document.querySelectorAll('.indicator');
  const progressBar = document.querySelector('.progress');

// Variables
  let currentSlide = 0;
  const totalSlides = slides.length;
  let autoplayInterval;
  const autoplayDelay = 5000; // 5 seconds

// Initialize
  updateProgressBar();
  startAutoplay();

// Functions
  function goToSlide(index) {
    // Handle index boundaries
    if (index < 0) index = totalSlides - 1;
    if (index >= totalSlides) index = 0;

// Remove active class from current slide and add to new slide
    slides[currentSlide].classList.remove('active');
    indicators[currentSlide].classList.remove('active');

currentSlide = index;

slides[currentSlide].classList.add('active');
    indicators[currentSlide].classList.add('active');

updateProgressBar();
    resetAutoplay();
  }

function nextSlide() {
    goToSlide(currentSlide + 1);
  }

function prevSlide() {
    goToSlide(currentSlide - 1);
  }

function updateProgressBar() {
    const progressWidth = ((currentSlide + 1) / totalSlides) * 100;
    progressBar.style.width = `${progressWidth}%`;
  }

function startAutoplay() {
    autoplayInterval = setInterval(nextSlide, autoplayDelay);
  }

function resetAutoplay() {
    clearInterval(autoplayInterval);
    startAutoplay();
  }

// Event Listeners
  prevBtn.addEventListener('click', prevSlide);
  nextBtn.addEventListener('click', nextSlide);

indicators.forEach(indicator => {
    indicator.addEventListener('click', () => {
      const slideIndex = parseInt(indicator.dataset.index);
      goToSlide(slideIndex);
    });
  });

// Add keyboard navigation
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') {
      prevSlide();
    } else if (e.key === 'ArrowRight') {
      nextSlide();
    }
  });

// Add touch support
  let touchStartX = 0;
  let touchEndX = 0;

const sliderContainer = document.querySelector('.slider-container');

sliderContainer.addEventListener('touchstart', (e) => {
    touchStartX = e.changedTouches[0].screenX;
  });

sliderContainer.addEventListener('touchend', (e) => {
    touchEndX = e.changedTouches[0].screenX;
    handleSwipe();
  });

function handleSwipe() {
    const swipeThreshold = 50;

// Swipe left (next slide)
    if (touchStartX - touchEndX > swipeThreshold) {
      nextSlide();
    }

// Swipe right (previous slide)
    if (touchEndX - touchStartX > swipeThreshold) {
      prevSlide();
    }
  }

// Pause autoplay when user hovers over the slider
  sliderContainer.addEventListener('mouseenter', () => {
    clearInterval(autoplayInterval);
  });

sliderContainer.addEventListener('mouseleave', () => {
    startAutoplay();
  });

// Add parallax effect to images on mousemove
  sliderContainer.addEventListener('mousemove', (e) => {
    const { left, top, width, height } = sliderContainer.getBoundingClientRect();
    const x = (e.clientX - left) / width - 0.5;
    const y = (e.clientY - top) / height - 0.5;

slides.forEach(slide => {
      const img = slide.querySelector('img');
      if (img) {
        img.style.transform = `scale(1.1) translate(${x * 20}px, ${y * 20}px)`;
      }
    });
  });

// Reset parallax effect when mouse leaves
  sliderContainer.addEventListener('mouseleave', () => {
    slides.forEach(slide => {
      const img = slide.querySelector('img');
      if (img) {
        img.style.transform = 'scale(1.1)';
      }
    });
  });

// Button hover effects
  const exploreBtns = document.querySelectorAll('.explore-btn');
  exploreBtns.forEach(btn => {
    btn.addEventListener('mouseenter', () => {
      btn.style.transform = 'translateY(-3px)';
    });

btn.addEventListener('mouseleave', () => {
      btn.style.transform = 'translateY(0)';
    });
  });

// Add animation to info cards on scroll
  const infoCards = document.querySelectorAll('.info-card');
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = 1;
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, { threshold: 0.1 });

infoCards.forEach(card => {
    card.style.opacity = 0;
    card.style.transform = 'translateY(20px)';
    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    observer.observe(card);
  });
});

Un code par alejandrokundrah

Recommandé

Un code par Liamgilles76

Titre collant piloté par défilement

Un code par bachir123

HTML

CSS

JS

Recommandé

Un code par Liamgilles76

Titre collant piloté par défilement

Un code par bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS