<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Пример анимации движения в JS

Пример анимации движения в JS

Несмотря на существенный прорыв в создании анимаций на CSS, JavaScript по прежнему остаётся главным инструментом по анимациям в веб-разработке. На этом уроке, мы рассмотрим пример простейшей JS анимации движения блока. При клике по кнопке, блок начнет двигаться вниз, на заданное расстояние.

Сделаем нужные HTML и CSS заготовки - создадим в разметке кнопку и блок.

<div class="btn">Запускай!</div>
<div class="box"></div>

Оформим красиво внешний вид элементов. Поместим кнопку в верхнем левом углу окна браузера, а блок сместим ниже на 50 пикселей. Обоим элементам зададим абсолютное позиционирование. Мы сами задаем значения свойств top и left, в дальнейшем от них и будем отталкиваться, при создании анимации. Анимация движения - это плавная смена координат у элемента.

// CSS свойства кнопки
.btn {
    width: 120px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
}

// CSS свойства блока
.box {
    width: 120px;
    height: 120px;
    background: #ea78e5;
    position: absolute;
    top: 50px;
    left: 0;
}

Пример анимации движения в JS.

Программируем на JS

Мы хотим наш блок переместить вниз по оси Y на 150 пикселей относительно нижнего края окна браузера.

Пример анимации движения в JS.

Получим оба элемента из документа по селектору класса и создадим для них переменные. Вспоминаем, что все элементы на сайте - это объекты, следовательно, в переменных у нас будет лежать тип данных object.

let btn = document.querySelector('.btn');
    box = document.querySelector('.box');

Создаем функцию с логичным названием moveDown, отвечающую за всю JS анимацию. Внутри функцию создадим переменную coordY со значением 50. Цифра 50 - это стартовая позиция блока по оси Y. Мы будем 50 увеличивать на единицу, пока она не дойдет до 150. На отметке 150, мы остановим анимацию.

function moveDown(){
    let coordY = 50;
}

Для реализации данного сценария, внутри главной функции создадим вспомогательную функцию frame, которая будет изменять Y координату блока. Пропишем условие, как это будет происходить. Если (if) значение переменной станет равным 150 пикселям, то выполнится команда clearInterval и анимация остановится.

В противном случае (else), значение переменной будет увеличиваться на единицу, создавая плавное движение. Перепишем стартовую координату (50) на конечную (150) через стили и добавим строку 'px'.

function moveDown(){
    let coordY = 50;
    function frame() {
        if (coordY == 150) {
          clearInterval();
        } else {
          coordY++;
          box.style.top = coordY + 'px';
        }
    }

Команда setInterval каждые 10 миллисекунд будет запускать функцию frame и проверять верно ли условие.

let time = setInterval(frame, 10);

Если верно и позиция равна 150, то анимация остановится. Значение переменной time передается в качестве параметра в команду clearInterval.

clearInterval(time);

Иначе верхняя позиция блока будет увеличиваться на 1 при каждом запуске функции frame, не давая анимации заглохнуть. Привяжем функцию moveDown к обработчику события. При клике по кнопке, запустится анимация.

btn.addEventListener('click', moveDown);

Сейчас язык JavaScript востребован, как никогда раньше. Поэтому, за последнее время появилось так много фреймворков, помогающих ускорить разработку на JS. Самый популярный JS фреймворк - это React, этот видеокурс "React JS, Redux, ES2015 с Нуля до Гуру" поможет вам в кратчайшие сроки, приобрести навык работы с React.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.