Создание простой анимации через изменение стилей: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы научитесь создавать простые анимации, изменяя стили HTML-элементов с помощью JavaScript. Вы будете работать с различными свойствами CSS, такими как `width`, `height`, `opacity`, `background-color`, `transform`, и другими. Каждое задание представляет собой интерактивный пример, где вам нужно будет дополнить JavaScript код, чтобы добиться желаемого анимационного эффекта.

Список тем

Задание 1: Простое перемещение

Переместите квадрат вправо, изменяя его свойство `left`. Квадрат должен сдвинуться на 100 пикселей вправо от своего начального положения.

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 50px;
  top: 50px;
}

HTML

Восстановить HTML

                      <div class="square" id="mySquare"></div>

<div class="square" id="mySquare"></div>

JavaScript

const square = document.input__1("mySquare");
square.style.input__2 = "150px";

                     const square = document.input__1("mySquare");
square.style.input__2 = "150px";

Для перемещения элемента используйте свойство `style.left`. Вам нужно получить доступ к элементу с помощью `document.getElementById()` или `document.querySelector()` и изменить его свойство `style.left`, добавив пиксели к текущему значению.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 2: Изменение прозрачности

Сделайте квадрат полупрозрачным, изменив его свойство `opacity`. Квадрат должен стать наполовину прозрачным.

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: blue;
}

HTML

Восстановить HTML

                      <div class="square" id="mySquare2"></div>

<div class="square" id="mySquare2"></div>

JavaScript

const square2 = document.input__1("mySquare2");
square2.style.input__2 = input__3;

                     const square2 = document.input__1("mySquare2");
square2.style.input__2 = input__3;

Для изменения прозрачности элемента используйте свойство `style.opacity`. Значение opacity должно быть между 0 (полностью прозрачный) и 1 (полностью непрозрачный).

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 3: Комбинированная анимация: движение и прозрачность

Переместите квадрат вправо и одновременно сделайте его полупрозрачным. Используйте свойства `left` и `opacity`.

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: green;
  position: absolute;
  left: 50px;
  top: 150px;
}

HTML

Восстановить HTML

                      <div class="square" id="mySquare3"></div>

<div class="square" id="mySquare3"></div>

JavaScript

const square3 = document.input__1("mySquare3");
square3.style.input__2 = "200px";
square3.style.input__3 = input__4;

                     const square3 = document.input__1("mySquare3");
square3.style.input__2 = "200px";
square3.style.input__3 = input__4;

Вам нужно изменить два свойства стиля элемента: `left` для перемещения и `opacity` для прозрачности. Вы можете сделать это в JavaScript, получив элемент и изменив оба свойства `style`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 4: Анимация по клику

Переместите квадрат вправо при клике на кнопку. При каждом клике квадрат должен сдвигаться на 50 пикселей вправо.

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: orange;
  position: absolute;
  left: 50px;
  top: 250px;
}
.button {
  padding: 10px 20px;
  background-color: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
}

HTML

Восстановить HTML

                      <div class="square" id="mySquare4"></div>
<button id="myButton" class="button">Кликни меня</button>

<div class="square" id="mySquare4"></div>
<button id="myButton" class="button">Кликни меня</button>

JavaScript

const square4 = document.input__1("mySquare4");
const button = document.input__2("myButton");

button.addEventListener('click', function() {
  let currentLeft = parseInt(square4.style.left) || 50;
  square4.style.input__3 = currentLeft + input__4 + "px";
});

                     const square4 = document.input__1("mySquare4");
const button = document.input__2("myButton");

button.addEventListener('click', function() {
  let currentLeft = parseInt(square4.style.left) || 50;
  square4.style.input__3 = currentLeft + input__4 + "px";
});

Вам нужно добавить обработчик событий `click` на кнопку. Внутри обработчика получите доступ к квадрату и измените его свойство `style.left`. Не забудьте получить текущее значение `left` и добавить к нему 50px.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 5: Плавное перемещение с setInterval

Плавно переместите квадрат вправо на 200 пикселей, используя `setInterval`. Квадрат должен двигаться постепенно, создавая эффект анимации.

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: purple;
  position: absolute;
  left: 50px;
  top: 350px;
}

HTML

Восстановить HTML

                      <div class="square" id="mySquare5"></div>

<div class="square" id="mySquare5"></div>

JavaScript

const square5 = document.input__1("mySquare5");
let currentLeft = 50;
const targetLeft = 250;
const animationInterval = input__2(function() {
  if (currentLeft < targetLeft) {
    currentLeft++;
    square5.style.input__3 = currentLeft + "px";
  } else {
    input__4(animationInterval);
  }
}, input__5);

                     const square5 = document.input__1("mySquare5");
let currentLeft = 50;
const targetLeft = 250;
const animationInterval = input__2(function() {
  if (currentLeft < targetLeft) {
    currentLeft++;
    square5.style.input__3 = currentLeft + "px";
  } else {
    input__4(animationInterval);
  }
}, input__5);

Используйте `setInterval` для периодического изменения свойства `style.left` квадрата. Внутри `setInterval` увеличивайте значение `left` на небольшую величину (например, 1px) до достижения нужного положения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 6: Плавное появление с setInterval

Плавно увеличьте прозрачность квадрата от 0 до 1, используя `setInterval`. Квадрат должен постепенно становиться видимым.

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: teal;
  opacity: 0;
}

HTML

Восстановить HTML

                      <div class="square" id="mySquare6"></div>

<div class="square" id="mySquare6"></div>

JavaScript

const square6 = document.input__1("mySquare6");
let currentOpacity = 0;
const targetOpacity = 1;
const fadeInterval = input__2(function() {
  if (currentOpacity < targetOpacity) {
    currentOpacity += 0.01;
    square6.style.input__3 = currentOpacity;
  } else {
    input__4(fadeInterval);
  }
}, input__5);

                     const square6 = document.input__1("mySquare6");
let currentOpacity = 0;
const targetOpacity = 1;
const fadeInterval = input__2(function() {
  if (currentOpacity < targetOpacity) {
    currentOpacity += 0.01;
    square6.style.input__3 = currentOpacity;
  } else {
    input__4(fadeInterval);
  }
}, input__5);

Аналогично предыдущему заданию, используйте `setInterval`. Внутри интервала постепенно увеличивайте значение `style.opacity` от 0 до 1.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 7: Анимация масштабирования

Плавно увеличьте размер квадрата в 2 раза, используя `setInterval` и свойство `transform: scale()`. Квадрат должен увеличиваться постепенно.

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: gold;
}

HTML

Восстановить HTML

                      <div class="square" id="mySquare7"></div>

<div class="square" id="mySquare7"></div>

JavaScript

const square7 = document.input__1("mySquare7");
let currentScale = 1;
const targetScale = 2;
const scaleInterval = input__2(function() {
  if (currentScale < targetScale) {
    currentScale += 0.01;
    square7.style.transform = `scale(${input__3})`;
  } else {
    input__4(scaleInterval);
  }
}, input__5);

                     const square7 = document.input__1("mySquare7");
let currentScale = 1;
const targetScale = 2;
const scaleInterval = input__2(function() {
  if (currentScale < targetScale) {
    currentScale += 0.01;
    square7.style.transform = `scale(${input__3})`;
  } else {
    input__4(scaleInterval);
  }
}, input__5);

Используйте `setInterval` для изменения свойства `transform: scale()` квадрата. Внутри интервала постепенно увеличивайте значение scale от 1 до 2.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Задание 8: Анимация вращения

Плавно вращайте квадрат на 360 градусов, используя `setInterval` и свойство `transform: rotate()`. Квадрат должен вращаться непрерывно.

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: silver;
}

HTML

Восстановить HTML

                      <div class="square" id="mySquare8"></div>

<div class="square" id="mySquare8"></div>

JavaScript

const square8 = document.input__1("mySquare8");
let currentRotation = 0;
const rotationInterval = input__2(function() {
  currentRotation += 1;
  square8.style.transform = `rotate(${input__3}deg)`;
  if (currentRotation >= 360) {
    currentRotation = 0; // Для непрерывного вращения
  }
}, input__4);

                     const square8 = document.input__1("mySquare8");
let currentRotation = 0;
const rotationInterval = input__2(function() {
  currentRotation += 1;
  square8.style.transform = `rotate(${input__3}deg)`;
  if (currentRotation >= 360) {
    currentRotation = 0; // Для непрерывного вращения
  }
}, input__4);

Используйте `setInterval` для изменения свойства `transform: rotate()` квадрата. Внутри интервала постепенно увеличивайте угол вращения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку