Lekcja 7 – Animacje w JavaScript: Tchnij Życie w Swoje Strony Internetowe

Lekcja 7

Lekcja 7 – Animacje w JavaScript: Tchnij Życie w Swoje Strony Internetowe 🕺✨

Witaj na Lekcji 7! Już opanowałeś manipulacje DOM, a twoje strony nabrały dynamiki. Ale statyczne elementy? To jak oglądanie czarno-białego telewizora, gdy wszyscy korzystają z 4K. Czas dodać trochę życia! Zamienimy twój projekt DOM_Project w dynamiczne arcydzieło, które nawet twojej babci się spodoba.

Co to Są Animacje JavaScript? 🌀

Animacje JavaScript to jak lekcja tańca dla twoich elementów na stronie. Chcesz, żeby przycisk radośnie się bujał? Albo żeby wyskakujące okno wjeżdżało niczym król na bankiet? Dzięki JavaScript możesz zmieniać pozycję, rozmiar, kolor i wiele więcej.

Wyobraź sobie, że nadajesz swojej stronie charakter – wesoły, pełen energii i zapadający w pamięć.

Przygotowujemy Plac Zabaw 🛠️

Zaktualizujemy twój istniejący projekt DOM_Project.

  1. Przejdź do folderu projektu:

    cd DOM_Project

  2. Stwórz lub zaktualizuj plik index.html: Użyj poniższego kodu jako podstawy:

    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animacje w JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
        }
        #box {
            width: 100px;
            height: 100px;
            background-color: teal;
            margin: 50px auto;
            position: relative;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Plac Zabaw Animacji JavaScript 🎢</h1>
    <div id="box"></div>
    <button id="move-btn">Przesuń!</button>
    <button id="bounce-btn">Podskocz!</button>
    <button id="fade-btn">Zniknij!</button>
    <script src="script.js"></script>
</body>
</html>

  3. Dodaj plik script.js: Stwórz lub zaktualizuj plik script.js z tym kodem:

    const box = document.getElementById("box");
const moveBtn = document.getElementById("move-btn");
const bounceBtn = document.getElementById("bounce-btn");
const fadeBtn = document.getElementById("fade-btn");

// Przesuwamy element
moveBtn.addEventListener("click", () => {
    let position = 0;
    const interval = setInterval(() => {
        if (position >= 300) {
            clearInterval(interval);
        } else {
            position++;
            box.style.left = position + "px";
        }
    }, 5);
});

// Podskakujemy
bounceBtn.addEventListener("click", () => {
    let position = 0;
    let direction = 1;
    const interval = setInterval(() => {
        if (position >= 300 || position <= 0) {
            direction *= -1;
        }
        position += direction * 5;
        box.style.top = position + "px";
    }, 20);
});

// Znikamy
fadeBtn.addEventListener("click", () => {
    let opacity = 1;
    const interval = setInterval(() => {
        if (opacity <= 0) {
            clearInterval(interval);
            box.style.display = "none";
        } else {
            opacity -= 0.05;
            box.style.opacity = opacity;
        }
    }, 50);
});

Testujemy Animacje 🧪

  1. Uruchom projekt za pomocą Caddy:

    caddy file-server --listen :8080

  2. Otwórz przeglądarkę i przejdź na http://localhost:8080.

  3. Wypróbuj przyciski:

    • Przesuń!: Obserwuj, jak pudełko przesuwa się w prawo, jakby spieszyło się na spotkanie.
    • Podskocz!: Śmiej się, jak podskakuje, jakby było na trampolinie.
    • Zniknij!: Pożegnaj pudełko, gdy dramatycznie znika.

Odśwież za pomocą Ctrl + F5 🔄

Czasami przeglądarki za bardzo kochają pamięć podręczną. Użyj Ctrl + F5, żeby wymusić wczytanie najnowszych zmian.

Co Dalej?

Świetna robota! Tchnąłeś życie w swoją stronę internetową. W następnym lekcji przejdziemy do zaawansowanych bibliotek animacji, takich jak GSAP, które sprawią, że twoje efekty będą tak płynne, że masło się zawstydzi.

Do zobaczenia w Lekcji 8 – Zaawansowane Animacje: Płynne Ruchy z Bibliotekami JavaScript!

Teraz idź i animuj swoje strony jak profesjonalista. Ale pamiętaj: za dużo animacji może zamienić twoją stronę w lunapark. 🎨✨

JavaScript  Animacje  Tworzenie Stron 

Zobacz też