Урок 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="ru">
<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  Анимации  Веб-разработка  Веселое программирование 

Смотрите также