IT-школа
Створення анімації за допомогою JavaScript та Anime.js
Анімація у JavaScript – це потужний спосіб зробити ваш вебсайт чи вебдодаток більш живим та цікавим для користувачів. У цій статті ми розглянемо, як створити просту анімацію у JavaScript з використанням бібліотеки анімації Anime.js.
Крок 1: підготовка робочого середовища
Перш за все, ми повинні створити файл HTML та під’єднати бібліотеку Anime.js. Створіть новий файл з назвою ‘index.html’ та додайте наступний код:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Анімація за допомогою Anime.js</title>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js”></script>
<style>
#animatedElement {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
</style>
</head>
<body>
<div id=”animatedElement”></div>
<script>
// JavaScript-код для створення анімації буде тут
</script>
</body>
</html>
У цьому коді ми під’єднали бібліотеку Anime.js та створили блок ‘div’ з ідентифікатором ‘animatedElement’, який буде анімованим.
Динаміка за вашими правилами: анімація у JavaScript!
Крок 2: Створення анімації з Anime.js
Тепер додаймо JavaScript-код, який створить нашу анімацію. Вставте наступний код між тегами <script> та </script> у вашому файлі index.html:
// Створюємо анімацію з Anime.js
var animatedElement = document.getElementById(‘animatedElement’);
anime({
targets: animatedElement,
translateX: 250, // Зміщення по осі X
translateY: 150, // Зміщення по осі Y
rotate: ‘1turn’, // Обертання на 360 градусів
duration: 2000, // Тривалість анімації у мілісекундах
easing: ‘easeInOutQuad’ // Вид ефекту руху
});
У цьому коді ми використовуємо Anime.js для створення анімації елементу з ідентифікатором ‘animatedElement’. Ми задаємо різні параметри анімації, такі як зміщення по осі X та Y, обертання та тривалість.
Крок 3: Перегляд результату
Збережіть ваш файл ‘index.html’ та відкрийте його у веббраузері. Ви повинні побачити, як блок ‘animatedElement’ анімується згідно з заданими параметрами.
У цій статті ми показали, як легко створити просту анімацію за допомогою JavaScript та бібліотеки анімації Anime.js. З використанням цих інструментів ви можете створювати захопливі анімації для ваших вебсайтів та вебдодатків.
Не соромтеся експериментувати та розширювати ці концепції для створення власних унікальних анімацій. Якщо ви тільки починаєте свій шлях у програмуванні, то маємо для вас курс з вивчення JavaScript. Даний курс охоплює всі аспекти цієї мови з нуля, тож підійде, як новачкам, так і досвідченим програмістам від 10 років. Уроки проходять у зручний для вас час онлайн або в офісі на м. Академмістечко, м. Житомирська.
