Сделать анимацию, которую мы видим на многих сайтах - это максимально просто.
Хочу сразу предупредить, что я не говорю о какой-то специализированной анимации, которая присутствует в играх. Речь пойдет о простом постоянном движении объектов.
Почему я посмотрел в сторону анимации
Я иногда просматриваю рынок труда, что бы понимать на какую зарплату могу претендовать и обратил внимание на вакансию vc.ru. Я увидел, что там требуется знание библиотеки Vanila.js и умение делать анимацию. Меня интересует пока только нативный JS, поэтому я на нем решил реализовать анимацию.
Пока программисты не начали кидаться какахами со словами "какой рынок труда тебе, личинка джуна! Иди выучись в начале". Понимаю, я всего 5 месяцев работаю, но любопытно, на какую сумму тянут мои навыки
Чуть позже я попробую реализовать один из проектов представленных в этой вакансии.
Примечание по коду
- Стили задаю через JS, а не CSS, что бы не забывать, как это делается;
- Не думал над оптимизацией кода, так как задача больше была понять общий принцип анимации;
- Велика вероятность, что на самом деле анимация делается не так, а то я просто через функции сделал повтор стилей. Как-то это по дилетантски.
Я заметил, что на телефонах setInterval не работает и не понимаю почему. Все остальное работает без проблем.
демонстрация анимации после кода
для просмотра анимации нажмите на текст
Я еще до кучи сделал себе заготовочку для анимации, что бы легко ее применять на сайте, там уже и код почище.