3D-Schieberegler mit drei Figuren

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

9 November 2024

Atilla Demir: Webentwickler, Designer und kreativer Blog

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explore Nature - 3D Slider Website</title>
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

header {
            background-color: #2c3e50;
            color: white;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #ecf0f1;
            text-decoration: none;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 1.5rem;
        }

.nav-links a {
            color: #ecf0f1;
            text-decoration: none;
            transition: color 0.3s;
        }

.nav-links a:hover {
            color: #3498db;
        }

.hamburger {
            display: none;
            cursor: pointer;
        }

footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 1.5rem 0;
            margin-top: 2rem;
        }

/* Page Styles */
        .page {
            display: none;
            padding: 2rem 0;
            min-height: 80vh;
        }

.page.active {
            display: block;
        }

.page h1 {
            margin-bottom: 1.5rem;
            color: #2c3e50;
            text-align: center;
        }

/* Home Page with 3D Slider */
        .slider-container {
            position: relative;
            width: 100%;
            height: 500px;
            margin: 2rem auto;
            perspective: 1000px;
        }

.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%);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            transition: transform 1s ease, opacity 0.5s 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);
        }

.navigation {
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
        }

.nav-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(44, 62, 80, 0.7);
            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: #3498db;
        }

/* Gallery Page */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 2rem;
        }

.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            height: 250px;
            transition: transform 0.3s ease;
        }

.gallery-item:hover {
            transform: translateY(-5px);
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.gallery-item:hover img {
            transform: scale(1.05);
        }

.gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(44, 62, 80, 0.8);
            color: white;
            padding: 15px;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }

.gallery-item:hover .gallery-caption {
            transform: translateY(0);
        }

/* About Page */
        .about-content {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            align-items: center;
            margin-top: 2rem;
        }

.about-text {
            flex: 1;
            min-width: 300px;
        }

.about-image {
            flex: 1;
            min-width: 300px;
            height: 400px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

.about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* Responsive Styles */
        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background-color: #2c3e50;
                flex-direction: column;
                align-items: center;
                padding-top: 2rem;
                transition: left 0.3s ease;
            }

.nav-links.active {
                left: 0;
            }

.nav-links li {
                margin: 1rem 0;
            }

.hamburger {
                display: block;
            }

.slider-container {
                height: 400px;
            }

.slide {
                width: 250px;
                height: 350px;
            }

.about-content {
                flex-direction: column;
            }
        }

@media (max-width: 480px) {
            .slider-container {
                height: 350px;
            }

.slide {
                width: 220px;
                height: 300px;
            }

.gallery {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <a href="#" class="logo">ExploreNature</a>
                <ul class="nav-links">
                    <li><a href="#" class="nav-link" data-page="home">Home</a></li>
                    <li><a href="#" class="nav-link" data-page="gallery">Gallery</a></li>
                    <li><a href="#" class="nav-link" data-page="about">About</a></li>
                </ul>
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
        </div>
    </header>

<main class="container">
        
        <section id="home" class="page active">
            <h1>Discover Beautiful Landscapes</h1>
            <div class="slider-container">
                <div class="slider" id="slider">
                    
                </div>
                <div class="navigation">
                    <button class="nav-btn" id="prevBtn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn" id="nextBtn"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
            <p style="text-align: center; margin-top: 4rem; max-width: 800px; margin-left: auto; margin-right: auto;">
                Explore our collection of stunning nature photographs from around the world. 
                All images are free to use under the Pexels license.
            </p>
        </section>

<section id="gallery" class="page">
            <h1>Nature Photo Gallery</h1>
            <div class="gallery">
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg" alt="Mountain Landscape">
                    <div class="gallery-caption">
                        <h3>Mountain Vista</h3>
                        <p>Beautiful mountain range at sunset</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/15286/pexels-photo.jpg" alt="Forest">
                    <div class="gallery-caption">
                        <h3>Enchanted Forest</h3>
                        <p>Mystical forest with sunlight filtering through trees</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/2387873/pexels-photo-2387873.jpeg" alt="Ocean Waves">
                    <div class="gallery-caption">
                        <h3>Ocean Waves</h3>
                        <p>Powerful waves crashing on rocky shore</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/1179229/pexels-photo-1179229.jpeg" alt="Desert">
                    <div class="gallery-caption">
                        <h3>Sandy Dunes</h3>
                        <p>Vast desert landscape with rolling dunes</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg" alt="Misty Mountains">
                    <div class="gallery-caption">
                        <h3>Misty Peaks</h3>
                        <p>Cloud-covered mountain peaks</p>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg" alt="Lake">
                    <div class="gallery-caption">
                        <h3>Serene Lake</h3>
                        <p>Calm lake reflecting the surrounding mountains</p>
                    </div>
                </div>
            </div>
        </section>

<section id="about" class="page">
            <h1>About Our Project</h1>
            <div class="about-content">
                <div class="about-text">
                    <h2>Our Mission</h2>
                    <p>We are dedicated to showcasing the beauty of nature through photography. Our goal is to provide high-quality, royalty-free images that can be used by everyone.</p>
                    <p>All photos in our collection are sourced from Pexels, a free stock photo website where all images are licensed under the Pexels license, which means you can use them for free for both personal and commercial projects.</p>
                    <h2 style="margin-top: 1.5rem;">Why Nature Photography?</h2>
                    <p>Nature photography helps us appreciate the world around us and reminds us of the importance of conservation. Through these images, we hope to inspire people to protect our planet's natural wonders.</p>
                </div>
                <div class="about-image">
                    <img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt="Photographer in nature">
                </div>
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <p>© 2023 ExploreNature. All photos from <a href="https://pexels.com" style="color: #3498db;">Pexels</a> (Free to use under Pexels license).</p>
            <p style="margin-top: 0.5rem;">Created with HTML, CSS, and JavaScript</p>
        </div>
    </footer>

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    
    <script>
        // Mobile menu toggle
        const hamburger = document.querySelector('.hamburger');
        const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });

// Page navigation
        const navLinksAll = document.querySelectorAll('.nav-link');
        const pages = document.querySelectorAll('.page');

navLinksAll.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const pageId = link.getAttribute('data-page');
                
                // Hide all pages
                pages.forEach(page => {
                    page.classList.remove('active');
                });
                
                // Show selected page
                document.getElementById(pageId).classList.add('active');
                
                // Close mobile menu if open
                navLinks.classList.remove('active');
            });
        });

// 3D Slider functionality
        document.addEventListener('DOMContentLoaded', function() {
            const slider = document.getElementById('slider');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            
            // Free royalty-free nature photos from Pexels
            const slidesData = [
                {
                    image: 'https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg',
                    title: 'Mountain Sunset',
                    description: 'Stunning sunset over snow-capped peaks'
                },
                {
                    image: 'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg',
                    title: 'Alpine Lake',
                    description: 'Crystal clear lake surrounded by mountains'
                },
                {
                    image: 'https://images.pexels.com/photos/15286/pexels-photo.jpg',
                    title: 'Forest Path',
                    description: 'Sunlit path through ancient forest'
                },
                {
                    image: 'https://images.pexels.com/photos/2387873/pexels-photo-2387873.jpeg',
                    title: 'Ocean Cliffs',
                    description: 'Dramatic coastal cliffs meeting the sea'
                },
                {
                    image: 'https://images.pexels.com/photos/1179229/pexels-photo-1179229.jpeg',
                    title: 'Desert Sunrise',
                    description: 'Golden sunrise over sand dunes'
                }
            ];
            
            // Create slides
            slidesData.forEach((slide, index) => {
                const slideElement = document.createElement('div');
                slideElement.className = 'slide';
                slideElement.innerHTML = `
                    <img src="${slide.image}" alt="${slide.title}">
                    <div class="slide-content">
                        <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() {
                slides.forEach((slide, index) => {
                    const angle = (index / totalSlides) * Math.PI * 2;
                    const radius = 500;
                    
                    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
                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
            let autoRotate = setInterval(() => rotateSlider('next'), 4000);
            
            // Pause auto-rotate on hover
            slider.addEventListener('mouseenter', () => clearInterval(autoRotate));
            slider.addEventListener('mouseleave', () => {
                autoRotate = setInterval(() => rotateSlider('next'), 4000);
            });
        });
    </script>
</body>
</html>

3D-Schieberegler mit drei Figuren

Empfohlen

HTML-Produkt-Website-Vorlage

Ein Code von pivete290

Atilla Demir: Webentwickler, Designer und kreativer Blog

HTML

CSS

JS

Empfohlen

HTML-Produkt-Website-Vorlage

Ein Code von pivete290

Atilla Demir: Webentwickler, Designer und kreativer Blog

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS