Jak zrobić efekt przejść między podstronami, aby tło zmieniało się delikatnie na białe i ładowało inna podstronę

Aby uzyskać efekt przejścia między podstronami, w którym tło delikatnie zmienia się na białe przed załadowaniem innej podstrony, możesz użyć HTML, CSS i JavaScript. Oto prosty przykład, jak to osiągnąć:

1. HTML

Zacznij od podstawowej struktury HTML. Dodaj kilka podstron, które będą ładowane w ramach tej samej strony.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Efekt Przejścia</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="content">
        <h1>Strona Główna</h1>
        <p>Witaj na stronie głównej.</p>
        <a href="page1.html" class="link">Przejdź do Strony 1</a>
        <a href="page2.html" class="link">Przejdź do Strony 2</a>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS

Utwórz plik styles.css, w którym zdefiniujesz style oraz efekt przejścia.

body {
    margin: 0;
    transition: background-color 0.5s ease;
}

.white-bg {
    background-color: white;
}

#content {
    padding: 20px;
}

3. JavaScript

Następnie dodaj logikę w pliku script.js, aby obsłużyć przejścia.

document.querySelectorAll('.link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // Zatrzymaj domyślne działanie linku
        
        // Zmień tło na białe
        document.body.classList.add('white-bg');

        // Poczekaj na zakończenie efektu przejścia
        setTimeout(() => {
            window.location.href = this.href; // Przejdź do nowej strony
        }, 500); // Czas musi odpowiadać czasowi trwania przejścia w CSS
    });
});

Jak to działa:

HTML: Zawiera dwa linki do podstron. W momencie kliknięcia w link, JavaScript przechwyci to zdarzenie.
CSS: Definiuje efekt przejścia dla tła.
JavaScript:
- Przechwytuje kliknięcie w link.
- Zmienia klasę ciała dokumentu na white-bg, co powoduje, że tło zmienia się na białe.
- Po 0,5 sekundy (czasu przejścia zdefiniowanego w CSS) zmienia lokalizację na docelową stronę.

Uwaga:

Upewnij się, że wszystkie podstrony (np. page1.html, page2.html) są poprawnie utworzone, aby przejścia mogły działać.

Ten prosty skrypt i style powinny dać ci podstawowy efekt przejścia między stronami. Możesz dostosować czas przejścia i kolory według własnych potrzeb.