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

221 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

25 March 2025

यूआरएल लोड

14 September 2024

मिनियन आई टॉगल

3 January 2025

एलेक्जेंडररेस्टेलमास्की द्वारा लिखित एक कोड

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डी सिल्डर प्रभाव

अनुशंसित

यूआरएल लोड

मिनियन आई टॉगल

एलेक्जेंडररेस्टेलमास्की द्वारा लिखित एक कोड

HTML

CSS

JS

अनुशंसित

यूआरएल लोड

मिनियन आई टॉगल

एलेक्जेंडररेस्टेलमास्की द्वारा लिखित एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS