Vertikalni scroll snap

Ovaj HTML dokument stvara interaktivnu web stranicu s posebnim efektom klizanja (scroll snap) u dva smjera:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal & Vertical Scroll Snap</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: Arial, sans-serif;
            overflow: hidden;
            height: 100vh;
        }

/* Horizontal scroll container */
        .horizontal-container {
            display: flex;
            width: 100%;
            height: 100vh;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
        }

/* Horizontal sections */
        .horizontal-section {
            flex: 0 0 100%;
            width: 100%;
            height: 100vh;
            scroll-snap-align: start;
            position: relative;
            overflow-y: hidden;
        }

/* Vertical scroll container within each horizontal section */
        .vertical-container {
            height: 100vh;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
        }

/* Vertical sections */
        .vertical-section {
            height: 100vh;
            scroll-snap-align: start;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            font-weight: bold;
            color: white;
        }

/* Colors for horizontal sections */
        .horizontal-section:nth-child(1) .vertical-section { background-color: hsl(0, 80%, 60%); }
        .horizontal-section:nth-child(2) .vertical-section { background-color: hsl(120, 80%, 40%); }
        .horizontal-section:nth-child(3) .vertical-section { background-color: hsl(240, 80%, 60%); }
        .horizontal-section:nth-child(4) .vertical-section { background-color: hsl(60, 80%, 50%); }

/* Shade variations for vertical sections */
        .vertical-section:nth-child(1) { filter: brightness(1); }
        .vertical-section:nth-child(2) { filter: brightness(0.9); }
        .vertical-section:nth-child(3) { filter: brightness(0.8); }
        .vertical-section:nth-child(4) { filter: brightness(0.7); }

/* Navigation indicators */
        .nav-indicators {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 100;
        }

.horizontal-indicator {
            width: 40px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            cursor: pointer;
        }

.vertical-indicators {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 100;
        }

.vertical-indicator {
            width: 10px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            cursor: pointer;
        }

/* Instructions */
        .instructions {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="instructions">
        Scroll horizontally to move between sections<br>
        Scroll vertically within each section
    </div>

<div class="horizontal-container">
        
        <div class="horizontal-section">
            <div class="vertical-container">
                <div class="vertical-section">Section 1-1</div>
                <div class="vertical-section">Section 1-2</div>
                <div class="vertical-section">Section 1-3</div>
                <div class="vertical-section">Section 1-4</div>
            </div>
        </div>

<div class="horizontal-section">
            <div class="vertical-container">
                <div class="vertical-section">Section 2-1</div>
                <div class="vertical-section">Section 2-2</div>
                <div class="vertical-section">Section 2-3</div>
                <div class="vertical-section">Section 2-4</div>
            </div>
        </div>

<div class="horizontal-section">
            <div class="vertical-container">
                <div class="vertical-section">Section 3-1</div>
                <div class="vertical-section">Section 3-2</div>
                <div class="vertical-section">Section 3-3</div>
                <div class="vertical-section">Section 3-4</div>
            </div>
        </div>

<div class="horizontal-section">
            <div class="vertical-container">
                <div class="vertical-section">Section 4-1</div>
                <div class="vertical-section">Section 4-2</div>
                <div class="vertical-section">Section 4-3</div>
                <div class="vertical-section">Section 4-4</div>
            </div>
        </div>
    </div>

<div class="nav-indicators">
        <div class="horizontal-indicator"></div>
        <div class="horizontal-indicator"></div>
        <div class="horizontal-indicator"></div>
        <div class="horizontal-indicator"></div>
    </div>

<div class="vertical-indicators">
        <div class="vertical-indicator"></div>
        <div class="vertical-indicator"></div>
        <div class="vertical-indicator"></div>
        <div class="vertical-indicator"></div>
    </div>

// Click handlers for indicators
            horizontalIndicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    horizontalContainer.scrollTo({
                        left: index * horizontalContainer.clientWidth,
                        behavior: 'smooth'
                    });
                });
            });

verticalIndicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    // Find active horizontal section
                    const activeHorizontalIndex = Math.floor((horizontalContainer.scrollLeft + (horizontalContainer.clientWidth / 2)) / horizontalContainer.clientWidth);
                    const activeVerticalContainer = verticalContainers[activeHorizontalIndex];
                    
                    activeVerticalContainer.scrollTo({
                        top: index * activeVerticalContainer.clientHeight,
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>

Horizontalno klizanje: Stranica ima 4 glavna odjeljka koji se protežu vodoravno. Kada korisnik klizi lijevo ili desno, stranica će automatski “zapeti” (snap) na najbližem odjeljku, stvarajući efekt odvojenih stranica.
Vertikalno klizanje: Unutar svakog od 4 glavna horizontalna odjeljka nalaze se 4 vertikalna pododjeljka. Kada korisnik klizi gore ili dolje unutar određenog horizontalnog odjeljka, stranica će automatski “zapeti” na najbližem vertikalnom pododjeljku.

Dodatne značajke koda uključuju:

Različite boje za svaki glavni horizontalni odjeljak
Varijacije u svjetlini za vertikalne pododjeljke
Navigacijske pokazatelje (indikatore) na dnu ekrana za horizontalno kretanje
Navigacijske pokazatelje na desnoj strani ekrana za vertikalno kretanje
JavaScript koji osvježava aktivne pokazatelje na temelju trenutne pozicije klizanja
Mogućnost navigacije klikom na pokazatelje za brzo kretanje do određenog odjeljka
Upute za korisnika koje se prikazuju u gornjem lijevom kutu ekrana

Ovaj efekt dvosmjernog klizanja omogućen je CSS svojstvima scroll-snap-type i scroll-snap-align

Odgovori Otkaži odgovor

O platformi

Kodiraj kako vidiš

Prednosti Tehničara

Zašto odabrati Tehničar.net?