Урок 7 – Анімації JavaScript: Додаємо Життя Вашим Веб-сторінкам

Урок 7

Урок 7 – Анімації JavaScript: Додаємо Життя Вашим Веб-сторінкам 🕺✨

Вітаємо на уроці 7! Ви вже освоїли маніпуляції з DOM, і тепер ваші сторінки виглядають динамічними. Але зізнаймося – статичні елементи? Це як чорно-біле телебачення у світі кольорового. Настав час оживити все на ваших сторінках! Давайте перетворимо ваш проект DOM_Project на справжній парк розваг.

Що Таке Анімації JavaScript? 🌀

Анімації JavaScript – це ніби урок танців для ваших веб-елементів. Хочете, щоб кнопка стрибала від радості? Або спливаюче вікно ковзало, ніби з важливим оголошенням? JavaScript дозволяє змінювати положення, розмір, колір і багато іншого.

Уявіть, що ви додаєте своїй сторінці характер – веселий, інтерактивний і такий, який не залишить байдужих.

Готуємо Полігон 🛠️

Давайте розширимо ваш існуючий проект DOM_Project.

  1. Перейдіть до вашої папки проекту:

    cd DOM_Project

  2. Створіть або оновіть файл index.html: Використовуйте наступний код для вашого index.html:

    <!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Анімації 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>Полігон Анімацій JavaScript 🎢</h1>
    <div id="box"></div>
    <button id="move-btn">Рухай!</button>
    <button id="bounce-btn">Стрибай!</button>
    <button id="fade-btn">Зникай!</button>
    <script src="script.js"></script>
</body>
</html>

  3. Додайте файл script.js: Створіть або оновіть файл script.js з наступним кодом:

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

// Рухаємо елемент
moveBtn.addEventListener("click", () => {
    let position = 0;
    const interval = setInterval(() => {
        if (position >= 300) {
            clearInterval(interval);
        } else {
            position++;
            box.style.left = position + "px";
        }
    }, 5);
});

// Стрибаємо
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);
});

// Зникаємо
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);
});

Тестуємо Анімації 🧪

  1. Запустіть ваш проект за допомогою Caddy:

    caddy file-server --listen :8080

  2. Відкрийте браузер і перейдіть за адресою http://localhost:8080.

  3. Перевірте кнопки:

    • Рухай!: Дивіться, як ваш блок рухається вправо, ніби щось забув.
    • Стрибай!: Насолоджуйтесь стрибками, ніби він на батуті.
    • Зникай!: Проведіть блок в останню путь з ефектом драматичного зникнення.

Оновлюйте за допомогою Ctrl + F5 🔄

Іноді браузери настільки прив’язані до кешу, що забувають оновлювати сторінку. Натисніть Ctrl + F5, щоб побачити всі останні зміни.

Що Далі?

Ви впоралися чудово! Тепер ваші сторінки стали живими завдяки анімаціям. У наступному уроці ми розглянемо просунуті бібліотеки для анімацій, як-от GSAP, які зроблять ваші ефекти настільки плавними, що вони засоромлять навіть масло.

До зустрічі на Уроці 8 – Просунуті Анімації: Плавні Рухи з Бібліотеками JavaScript!

Тепер ідіть і створюйте магію на своїх веб-сторінках! Але пам’ятайте: велика кількість анімацій – це шлях до перетворення сайту на луна-парк. 🎨✨

JavaScript  Анімації  Веб-розробка 

See also