3डी सिल्डर प्रभाव

799 kevekıbhack

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

अनुशंसित

25 August 2024

GSAP होवर प्रभाव

11 December 2024

चमकता हुआ लोडर

9 July 2025

डिवाइस पूर्वावलोकन नेविगेशन के साथ उत्तरदायी Iframe

HTML

<!DOCTYPE html>

<head>

<title>3D Slider Effect</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Arial', sans-serif;

background: #111;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

overflow: hidden;

perspective: 1000px;

}

.slider-container {

position: relative;

width: 100%;

max-width: 800px;

height: 500px;

transform-style: preserve-3d;

}

.slider-title {

position: absolute;

top: -80px;

left: 50%;

transform: translateX(-50%);

color: white;

font-size: 2rem;

text-align: center;

width: 100%;

z-index: 10;

}

.slider {

position: absolute;

width: 100%;

height: 100%;

transform-style: preserve-3d;

transition: transform 1s ease;

}

.slide {

position: absolute;

width: 300px;

height: 400px;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

background: white;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

transition: transform 1s ease;

}

.slide img {

width: 100%;

height: 100%;

object-fit: cover;

}

.slide-content {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 20px;

background: rgba(0, 0, 0, 0.7);

color: white;

transform: translateY(100%);

transition: transform 0.3s ease;

}

.slide:hover .slide-content {

transform: translateY(0);

}

.slide h3 {

margin-bottom: 10px;

font-size: 1.5rem;

}

.slide p {

font-size: 0.9rem;

}

.navigation {

position: absolute;

bottom: -60px;

left: 50%;

transform: translateX(-50%);

display: flex;

gap: 20px;

z-index: 10;

}

.nav-btn {

width: 50px;

height: 50px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.2);

border: 2px solid white;

color: white;

font-size: 1.2rem;

cursor: pointer;

transition: all 0.3s ease;

display: flex;

justify-content: center;

align-items: center;

}

.nav-btn:hover {

background: white;

color: #111;

}

@media (max-width: 768px) {

.slider-container {

height: 400px;

}

.slide {

width: 250px;

height: 350px;

}

</style>

</head>

<body>

<h2 class="slider-title">3D Image Slider</h2>

</div>

</div>

document.addEventListener('DOMContentLoaded', function() {

const slider = document.getElementById('slider');

const prevBtn = document.getElementById('prevBtn');

const nextBtn = document.getElementById('nextBtn');

// Sample data for slides

const slidesData = [

{

image: 'https://source.unsplash.com/random/800x600?nature',

title: 'Nature Beauty',

description: 'Explore the wonders of natural landscapes'

{

image: 'https://source.unsplash.com/random/800x600?city',

title: 'Urban Life',

description: 'Discover vibrant cityscapes'

{

image: 'https://source.unsplash.com/random/800x600?technology',

title: 'Modern Tech',

description: 'The latest in technological advancements'

{

image: 'https://source.unsplash.com/random/800x600?animal',

title: 'Wildlife',

description: 'Meet creatures from around the world'

{

image: 'https://source.unsplash.com/random/800x600?food',

title: 'Culinary Arts',

description: 'Delicious dishes from global cuisines'

}

];

// Create slides

slidesData.forEach((slide, index) => {

const slideElement = document.createElement('div');

slideElement.className = 'slide';

slideElement.innerHTML = `

<h3>${slide.title}</h3>

<p>${slide.description}</p>

</div>

slider.appendChild(slideElement);

});

const slides = document.querySelectorAll('.slide');

let currentSlide = 0;

const totalSlides = slides.length;

// Initialize slider

function initSlider() {

// Position slides in 3D space

slides.forEach((slide, index) => {

const angle = (index / totalSlides) * Math.PI * 2;

const radius = 500; // Distance from center

const x = Math.sin(angle) * radius;

const z = Math.cos(angle) * radius - radius;

slide.style.transform = `translate(-50%, -50%) translate3d(${x}px, 0, ${z}px) rotateY(${angle}rad)`;

slide.style.opacity = z < -300 ? '0' : '1';

});

}

// Rotate slider

function rotateSlider(direction) {

if (direction === 'next') {

currentSlide = (currentSlide + 1) % totalSlides;

} else {

currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;

}

const angle = (currentSlide / totalSlides) * -Math.PI * 2;

slider.style.transform = `rotateY(${angle}rad)`;

// Update slide positions for continuous rotation

slides.forEach((slide, index) => {

const slideAngle = (index / totalSlides) * Math.PI * 2 + angle;

const radius = 500;

const x = Math.sin(slideAngle) * radius;

const z = Math.cos(slideAngle) * radius - radius;

slide.style.transform = `translate(-50%, -50%) translate3d(${x}px, 0, ${z}px) rotateY(${slideAngle}rad)`;

slide.style.opacity = z < -300 ? '0' : '1';

slide.style.zIndex = Math.round(z);

});

}

// Event listeners

nextBtn.addEventListener('click', () => rotateSlider('next'));

prevBtn.addEventListener('click', () => rotateSlider('prev'));

// Keyboard navigation

document.addEventListener('keydown', (e) => {

if (e.key === 'ArrowRight') rotateSlider('next');

if (e.key === 'ArrowLeft') rotateSlider('prev');

});

// Initialize

initSlider();

// Auto-rotate (optional)

let autoRotate = setInterval(() => rotateSlider('next'), 3000);

// Pause auto-rotate on hover

slider.addEventListener('mouseenter', () => clearInterval(autoRotate));

slider.addEventListener('mouseleave', () => {

autoRotate = setInterval(() => rotateSlider('next'), 3000);

});

</script>

</body>

</html>

3डी सिल्डर प्रभाव

अनुशंसित

GSAP होवर प्रभाव

चमकता हुआ लोडर

डिवाइस पूर्वावलोकन नेविगेशन के साथ उत्तरदायी Iframe

HTML

CSS

JS

अनुशंसित

GSAP होवर प्रभाव

चमकता हुआ लोडर

डिवाइस पूर्वावलोकन नेविगेशन के साथ उत्तरदायी Iframe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS