Particles Canvas | Популярная анимация частиц на чистом JS с исходниками

#ParticlesJS #canvas #JS
В видео создадим многим знакомую анимацию #частиц соединяющихся линиями.
Ссылка на файлы проекта : threepixdroid?w=wall-9...

[@fineno3789]

Очень удивлён, что такой контент получает столько внимания. Качество микрофона, структура подачи, не быстрая, понятная и главное, что приятная! Однозначно подписка, буду ожидать такие видео.

[@user-ll3qg1xm5b]

Блин, это гиперкруто. Лично я бы хотел видеть больше видосов, где ты, так сказать, разбираешь популярные библиотеки. Люблю ванильный js)

[@avramishin]

Годное руководство, чётко, понятно, без лишнего трепа. Автор молодец!

[@annashalbuzova8124]

Супер, спасибо большое за такой годный контент по теме canvas. Автору большой респект)🤘👍

[@mishan9199]

Боже мой! Это лучший канал по программированию из всех, что я видел! Очень качественная подача материала, всё ну уж очень понятно! Автор продолжай в том же духе! Однозначно луцык и подписка!

[@ThreePixDroid_RU]

Спасибо большое!)

[@Vlafder]

Твои видео настолько подробны и хороши, что я смог перенести твой код на питон и все заработало как надо. Автор удачи тебе

[@ThreePixDroid_RU]

Спасибо) Да в этом и смысл) Алгоритм можно перенести куда угодно) Рад ,что ты этим воспользовался) как раз python кстати можно использовать в программе Blender для создания 3д анимаций используя тот же самый алгоритм)

[@user-zf3ep5ko7p]

@@ThreePixDroid_RU Обязательно расскажу про твой канал друзьям

[@ThreePixDroid_RU]

@@user-zf3ep5ko7p Хорошая новость) Спасибо)

[@whiteblackmask2459]

Top! Спасибо, все очень доступно и понятно.

[@ThreePixDroid_RU]

Пожалуйста)

[@avinadevil6097]

Замечательно, превосходно, прекрасно.

[@DanielPark-lq3oi]

ты супер мне прям очень понравился ролик 👍👍❤❤

[@revel1051]

Очень годно! С меня подписка и лайк.

[@user-bj6mx9rf2b]

Если будешь продолжать делать такие видео, ты обязательно станешь очень популярным. Продолжай)

[@ThreePixDroid_RU]

Да, буду продолжать) Спасибо)

[@dn_zlv]

Прям от души! Спасибо

[@ThreePixDroid_RU]

Пожалуйста!)

[@gm_Maker]

Круто!😮

[@askerkotsev363]

Почему так приятно было слушать ?

[@user-yk5iv1yc6l]

Гениально.Молодец.С меня подписка и лайк!

[@ThreePixDroid_RU]

Круто!)

[@HugoBossKosta]

ты супер, спасибо!!!

[@mew6085]

Такой зашел типо думаю да хуйня видел это, а потом как писать начал кучу новых фишек узнал и в голове а пиздато парниша сочиняет))

[@yuriit.8192]

Очень круто! Подача и уровень знаний и результат притягивают! ..заставляют изучать, разбираться и интересоваться! Попал на твой канал случайно ..в поисках взаимосвязи звука и анимации, созданной на js. Лайк и подписка!!+

[@AleshkaKartoshka812]

Идея и видео блестящая!

[@ThreePixDroid_RU]

Спасибо! Идея конечно не моя, это очень популярный эффект в интернете, только реализация моя)

[@adeptusCustodius]

Супер!

[@sornelaeda1507]

Очень круто.

[@ThreePixDroid_RU]

Спасибо!!!)

[@raccoonkiller5953]

Боже! Моему восхищению нет предела!) огромное спасибо тебе! надеюсь еще будут видео! оч жду!) А не мог бы ты поподробнее останавливаться, разжевывать что делаешь, что за методы, и как их можно применять?) Огромное спасибо!)

[@ThreePixDroid_RU]

Спасибо) Вообще видео расчитано на тех кто уже понимает js и хочет практики) Видео будет на днях, ну а в следующем после него попробую подробнее разжевать.

[@onikun2120]

Красиво, капец

[@a.osethkin55]

Круть!!

[@joeford8788]

все получилось, спасибо

[@ThreePixDroid_RU]

пожалуйста;)

[@montenote]

Больше подобных уроков пожалуйста! 100 лайков тебе за труд)

[@ThreePixDroid_RU]

спасибо)

[@jonidepovich7027]

Класс мне нратца... ;)

[@maksimozhiganov6734]

Очень понравилось. Спасибо большое за интересный контент. Хотелось бы увидеть реализацию движения с музыкой. Спасибо за твой труд.

[@ThreePixDroid_RU]

в планах есть пара уроков по визуализации звука с интересными эффектами на canvas.

[@AMIR-yc9lv]

Спасибо

[@ThreePixDroid_RU]

Не за что!)

[@ozbeeeee]

juda zor

[@askerkotsev363]

Чувак ты крут

[@drondron6605]

Doyti do etogo video ya uchilsta god. OGM.

[@WEBSTART-LIVE]

Отлично) на русском мало подобного материала.

[@ThreePixDroid_RU]

Скоро станет намного больше! Уже 8 каналов появилось с тех пор как я стал записывать подобные видео! :D

[@user-ic8zh9nw4m]

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

[@iventeye]

Очень круто! Не могли бы подсказать, где найти информацию про анимацию на js, сколько не искал информация либо устаревшая, либо говориться про анимацию на jquery

[@Salem_Witch_]

Круто, спасибо! а где посмотреть, как привязать это дело к музыке? ужасно хочется попробовать это сделать))

[@justnewbie3268]

ахуеть как круто!

[@ThreePixDroid_RU]

Спасибо!)

[@iamdan8203]

Доброго времени суток. Видео интересное и полезное. Кстати, этот код можно несколько оптимизировать: в функции, рисующей линии, во внутреннем цикле можно j приравнять к (i + 1). Таким образом операций нужно делать гораздо меньше, ведь не нужно перебирать те точки, которые уже рассматривались. Всего доброго

[@ThreePixDroid_RU]

Спасибо, всё верно. Кроме того не обязательно рассчитывать точную дистанцию от точки до точки, можно обойтись сравнением квадрата текущего расстояния и нужного расстояния что в свою очередь увеличит производительность. Или если расстояние всё таки нужно, можно воспользоваться формулой восьмиугольника и получить расстояние с погрешностью ~5%, но зато работает тоже намного быстрее чем извлекать корень.

[@easylaneof]

Видео интересное, но могу дать пару советов по поводу кода. Например, те же пробелы. Я понимаю, что это дело личное, но все же лучше, как мне кажется, следовать общепринятым правилам (вроде на learn.js есть). Ну, и смешивание старого и нового синтаксиса довольно странное. Вроде как class и for in, но при этом почему то var. А так ты большой молодец, спасибо за видео

[@ThreePixDroid_RU]

Спасибо) Обязательно буду стараться улучшать код и благодарю за ссылку на "Learn.JS" , уже нашёл нужный раздел - "Советы по стилю кода" называется) Сайт супер , похоже там море полезной информации) Кайф)

[@sokolawp]

Алгоритм, добавляющий линии между точками нужно оптимизировать. Во-первых, он рисует линии между двумя одними и теми же точками, а во-вторых он по два раза рисует линии, например при первом проходе он нарисует линию когда индексы цикла будут, скажем, i = 1 и j = 2, а во второй раз нарисует, когда индексы будут i = 2 и j = 1. А вот как улучшить - будет вашим домашним заданием) Изменив циклы можно ускорить проход по точкам в два раза минимум.

[@sokolawp]

Ну и еще есть некоторые нелогичные моменты, но для новичка пойдет

[@sevvver1469]

Это лучший гайд из тех которые я видел. Появился вопрос: Возможно ли сделать так, чтобы курсор считался точкой?

[@ThreePixDroid_RU]

Привет) да можно)Для этого надо добавить слушатель событий перемещения курсора. и 2 переменные для хранения координат мыши.. будет похоже на это.. AddEventListener('mousemove', e => { mx = e. clientX; my = e. clientY; }) после этого в методе где двигаем частицы, берём самую первую из массива и присваиваем ей координаты мыши. Particles [0].x = mx; particles [0].y = my.... Почитай про слушатели событий) Есть видео в котором как раз такой способ используется - Притяжение и отталкивание частиц.. kzbin.info/www/bejne/gXa0pKBorrFpgsk

[@user-zy2vd5gw7e]

Это. Просто. Гениально. Возник вопрос - как перемещать частицы по определенной траектории?

[@ThreePixDroid_RU]

Например создать массив координат по которым должна следовать частица....

[@despero3226]

@@ThreePixDroid_RU таким же образом получится привязать поведение частиц к курсору? Так, чтобы были (все) частицы, как в случае на видео, но с циклом жизни 6-8сек, но так же и те, что появлялись вокруг курсора и будто бы следовали за ним

[@user-cf6ek5kn4z]

Все очень круто, а как сделать адаптив? Есть идеи? А то на мобильном такой скрипт сильно растягивается и частицы не перемещаются(

[@ThreePixDroid_RU]

Привет;) Вроде должно помочь простое изменение размера Canvas.. если добавить слушатель событий, типа resize. ну и для мобильных устройств количество частиц лучше снижать.

[@johnd1431]

Нихуясь это чо, АСМР программирование?

[@yuriit.8192]

Подскажи, пожалуйста, как анимацию сохранить в видео?? Например эти частицы я хочу запустить на 5 мин и это все сохранить в файл mp4, к примеру. И как на слабом пк убрать торможение? При движении частицы дергаются. Так же не получается заменить фон на картинку. Не знаю как это прописать в Properties (( Я только учусь, поэтому такие возможно вопросы. Спасибо!

[@halvin5394]

КТО ТЫ, БЭТМЕН?!?

[@teador1131]

Привет смотрю из будущего,тоесть сегодня, хахахх, красава спасибо норм получилось , да и позновательно,но есть вопросик один, как теперь на анимацию наложить блок, все что мог перепробывал не канает, зарание от души за ответ! с уважением Luko....

[@user-ln8mv3nu1j]

да да я тоже пытаюсь поверх как то поставить не получается

[@user-qn4lh3gk9w]

можно вставить анимацию не в body а в свой блок, ему назначить position: relative, поверх - блок с position: absolute

[@party_koala]

Спасибо за урок! Скажите, пожалуйста, а возможно ли вместо частиц сделать, например, текст, разные слова?

[@ThreePixDroid_RU]

Да, конечно.. , самый простой способ рисовать текст вместо кругов. fillText. developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText

[@gleuphoria2711]

@@ThreePixDroid_RUпривет можно его поставить как лоадер сайта?😮

[@Grapeoff]

В функции drawLines мы типа пытаемся отрисовать линию начиная с точки i до всех оставшихся 69 точек? И это всё реально так быстро рендерится что мы не замечаем, что всё это выполняется как бы последовательно и заново каждый кадр?

[@ThreePixDroid_RU]

Да. Но это не самая удачная реализация.

[@vvv01able]

Мне кажется линии оптимальнее чертить: for(var i = 0; i

[@ThreePixDroid_RU]

Всё верно, так намного лучше) но уже ничего не поделаешь, видео записано) В будущем сниму ремейк🙂

[@vvv01able]

@@ThreePixDroid_RU )) Совершенству нет предела. Мне кажется ремейк не нужен. Видео очень приятное получилось. Разве что загружаемые исходники подредактировать можно. Лучше радуйте всех другими залипательными эффектами. )

[@xPyc9x]

а можно ли задать изначальную форму для частиц? то есть какой- то шар или пирамида и весь движ будет в нутри этой формы не зависимо от формы будь то шар или квадрат и тд надеюсь объяснил свои мысли

[@ThreePixDroid_RU]

конечно можно) думаю довольно простым вариантом будет загрузить черно белое изображение и создать частицы например только на черных пикселях. Каждый раз проверять координату частицы и если она выходит на белые пиксели разворачивать её. А направление для отскока можно вычислить например на основе координат самой частицы и пикселя на который она наталкивается.

[@askerkotsev363]

Сделай пожалуйста разбор с лепестками сакуры

[@markfialko]

Привет, не подскажешь почему при смене размера окна в настройках разработчика в гугл скорость частиц возрастает очень? Спасибо за видео!

[@ThreePixDroid_RU]

Тут скорость частиц зависит от частоты обновления экрана - может это как то связанно..

[@r_sklepovyy]

Привет, спасибо за урок, как плавно менять цвет?

[@ThreePixDroid_RU]

Привет) ниже ссылку прикреплю. там как раз плавно меняется цвет.. kzbin.info/www/bejne/qGfPaGiejLCjl8U

[@4aek03]

Как сделать вместо черного фона в градиент?

[@TechSoft-ps1nk]

А как научиться так понимать язык? Пишу код, но не понимаю некоторые моменты. Начал недавно, есть смысл продолжать?

[@ThreePixDroid_RU]

Просто практиковаться. Конечно продолжай, это ведь круто и приятно создавать что то самому. Да и много где пригодится может. Например можно написать алгоритм генерации плафонов для светильников и распечатать их на 3D принтере, современные фотополимерные 3d принтеры выдают очень хороший результат, очень часто превосходящий по качеству магазинные. Можно конечно просто нарисовать плафон в 3д без программирования.. но это ведь скучно... а если есть генератор, то он каждый раз может выдавать плафон нужной формы если подкрутить настройки, а так же наносить на него уникальный рисунок - это круто.

[@user-bj6mx9rf2b]

А можно сделать так чтобы на одной половине были красные а на другой синие, и чтоб когда частица переходила на другую сторону то меняла цвет соответствующий цвету стороны?

[@ThreePixDroid_RU]

Конечно. Просто получаешь координаты точки по 'X' и ширины холста. Добавляешь условие - если значение координаты Х < половины ширины холста. то цвет устанавливаешь например синий. иначе красный.

[@ThreePixDroid_RU]

напиши в группу ВК если не понятно, там тебе скину готовый код.

[@pomadubchak9851]

Брат объясни как сделать анимацию при наведении мыши на часть этой анимации, чтобы она немного увеличивалась и поворачиваласи типа 3д эффект докрутить, урок гиперактивности понятен спасибо и объясни мне такому как кто можна реализовать

[@kertaw3853]

Тогда придётся переделывать

[@user-zf3ep5ko7p]

if self.x+self.xspeed >= width or self.x+self.xspeed = height or self.y+self.yspeed

[@Nick-hq8of]

о вы из англии

[@ThreePixDroid_RU]

из России..

[@user-qq7te5tp8n]

У меня вопрос (может и глупым показаться, но мне все равно). Можно ли подобное сделать при работе с ReactJS?

[@ThreePixDroid_RU]

Привет) конечно можно)

[@user-qq7te5tp8n]

@@ThreePixDroid_RU а каким образом? есть библиотеки какие-то? Просто я думаю не корректно будет, если в react приложении использовать файлы подобия script.js

[@ThreePixDroid_RU]

react это и есть библиотека;)

[@user-qq7te5tp8n]

@@ThreePixDroid_RU я имел ввиду библиотека для библиотеки). Ну я нашел парочку - react-konva и react-canvas. Но с их помощью подобное как видосе (судя по описанию) сделать невозможно.

[@ThreePixDroid_RU]

подразумевается , что библиотеки будут использоваться по назначению, а всё что нельзя сделать используя их , напиши на чистом js.

[@user-cq3lx9ru8u]

Привет! А как в данном случае сделать фото или видео формат самого процесса симуляции, возможно ли ето сделать? Или где можна найти такую информацию. Наперед спасибкаю!

[@ThreePixDroid_RU]

Скриншот можно сделать, если кликнуть правой кнопкой мыши по холсту и 'сохронить изображение как'. Видео можно записать с помощью любого доступного скринрекордера. Я обычно так и делаю, просто перехожу в полноэкранный режим в браузере клавишей f11 и включаю запись экрана obs например. Есть вроде несколько библиотек js, позволяющих делать запись, по крайней мере точно видел библиотеки с помощью которых можно сохранить анимацию с холста в gif. А ещё для начала лучше перенести эту анимацию например на pixi.. чтоб не тормозила.

[@user-cq3lx9ru8u]

@@ThreePixDroid_RU Спасибо очень информативно.

[@vovastarenko3880]

а на гит дабе есть ?

[@user-cq3lx9ru8u]

Привет! Очень интересная тема, я новачок в этом деле. Но у меня не вышло как у вас на видео, только черный фон. Хотелось понять почему не вышло. Спасибо за ответ если прочитатете.

[@ThreePixDroid_RU]

Привет, слушай, ты можешь просто готовый файл скачать по ссылке в описании! там всё работать должно)

[@ThreePixDroid_RU]

Даже вот так! это прямая ссылка на файлы проекта - vk.com/doc278773966_507731335?hash=a3deb8576e131cdf47&dl=f714fb6610f22f7b2a

[@user-cq3lx9ru8u]

@@ThreePixDroid_RU Спасибо

[@abylayhan2087]

Как можно наложить текст поверх анимаций ?

[@ThreePixDroid_RU]

можно создать текстовый блок и разместить поверх блока canvas или использовать метод filltext в js в самом конце цикла анимации. например ctx.fillStyle = "green"; ctx.font = "32px Arial"; ctx.fillText("Text", 300, 300);

[@CLAUSTROPHOBIA327]

делал точно так же даже красных частиц не появилось, тупо черный фон(

[@ThreePixDroid_RU]

Ну значит где то ошибка) В описании есть ссылка на файлы, можно скачать и убедиться что всё работает) а ещё сравнить со своим кодом и найти ошибки) Вот ссылка m.vk.com/doc278773966_507731335?hash=iMiD8vVfxfuGW5jmamb4sNZ6CRBinuJjDvEcA3KVQIk

[@dadstreets]

15:29 что за музыка на заднем плане?

[@ThreePixDroid_RU]

Привет) Видео монтировал на чужом ноутбуке и пока нет возможности посмотреть название трека. сорри... скорее всего трек взял в фонотеке ютуба

[@arhitech6246]

Здравствуйте а как привязать это к движению мыши?

[@ThreePixDroid_RU]

Привет, воспользуйся слушателем событий. addEventListener(`mousemove`, тут вызываешь нужный метод ) Возможно это видео поможет, там как раз работа с мышью -> kzbin.info/www/bejne/gXa0pKBorrFpgsk

[@arhitech6246]

@@ThreePixDroid_RU и ещё вопрос, а как разместить этот js на фоне сайта?

[@ThreePixDroid_RU]

Например в свойствах css установить canvas z-index на -1

[@arhitech6246]

@@ThreePixDroid_RU я когда вставляю , и прописываю z-index = -1, у меня section и весь первый экран убегают вниз, а если section убрать внутрь canvas то он пропадает

[@ThreePixDroid_RU]

зафиксируй canvas. position: absolute top: 0 left: 0

[@fastcode9721]

Как теперь добавить контент на сайт?

[@ThreePixDroid_RU]

Посмотри тут. kzbin.info/www/bejne/jpi7eIt7prZ9p6s

[@torcher5023]

Что-то эти 60 частиц с трудом в 60 фпс рендерятся, а если взять больше 100, то вообще слайдшоу получается

[@ThreePixDroid_RU]

Вся суть в алгоритме, который можно довольно сильно прокачать, чтоб тянуло намного больше частиц ) Моя задача была показать как сделать, а сам перенес этот алгоритм в blender ) там нечему тормозить когда ролик отрендерится)

[@torcher5023]

Да, я уже попробовал немного изменить вложенный цикл, стало работать быстрее, но сложность алгоритма всё равно квадратичная. Не подскажите, какие ещё улучшения можно использовать? Читал про квадродеревья, но они довольно сложны в реализации.

[@ThreePixDroid_RU]

Больше всего тут кушает вычисление квадратного корня для получения расстояния, отрисовка линий и частиц. Частицы можно изменить с кругов на квадраты. Вложенный цикл должен начинаться со значения j = i + 1 , что бы повторно не вычислять расстояние между частицами. Вычисление квадратного корня можно заменить на вычисление гипотенузы с помощью Math.hypot(dx, dy)... или лучше на вычисление приблизительного расстояния - найти формулу можно тут в самом низу en.m.wikibooks.org/wiki/Algorithms/Distance_approximations. Прежде чем вычислить расстояние можно убедится что dx и dy уже меньше требуемого расстояния. Сократить к минимуму числа с плавающей запятой. вместо деления использовать умножение. например вместо / 2, умножить на .5 . включить аппаратное ускорение в браузере. Объявить все возможные константы и переменные заранее. Думаю если сделать вышесказанное, уже будет лучше. ( кстати можно ведь вообще корень не вычислять, а просто возвести в квадрат , максимальное расстояние между частицами. то есть сравнивать квадраты ) ещё хороший вариант - это объединить частицы между которыми рисуется линия в группы, и нарисовать одну длинную зигзаг линию через группу частиц, Это позволит сократить количество вызовов, beginPath. У меня с половиной условий из перечисленных, уже тянет 250 частиц без намёка на тормоза.

[@blackdragon8896]

я так понимаю его как фон для сайта не реально сделать?

[@ThreePixDroid_RU]

Ну как же не реально) Просто помещаете его в нужное место и всё.. Если надо что то сверху него разместить , то размещаете.. Если есть знания Сss и html ,то проблем быть не должно)

[@blackdragon8896]

@@ThreePixDroid_RU я просто начинающий и не понял как его загнать под фон, а в гугле только уже готовые прописаные. С обычной картинкой все норм а вот JS я не знаю совсем

[@ThreePixDroid_RU]

Вот как картинку в body разместить знаешь? Точно так же и Canvas.. Незнаю как понятнее описать.. Давай так... если тебе очень надо напиши мне в группе ВКонтакте.. завтра после работы скину тебе готовый проект с этой анимацией и объясню как подключил...

[@blackdragon8896]

@@ThreePixDroid_RU мне капец как надо, честное слово. Буду очень благодарен. Я учусь на программиста и нас нихера не обучают из-за этой пандемии, так плюс ещё я за границей учусь. Приходится все самому полностью, мои друзья на сегодня это гугл, гитхаб, ютуб и индийский парень

[@blackdragon8896]

Чуть не забыл книга Герберта Шилдта

[@ascilator7174]

Привет, а можешь ответить на вопрос по какой причине линии на мобилках могут не отображаться? Вот если что мой вариант. Кстати он даже на микро реагирует) ascilator.github.io/particles/

[@ThreePixDroid_RU]

Привет) Линии пропадают и на пк в некоторых случаях, не могу уловить от чего. Похоже в момент инициализации где-то... Если сжать окно просмотра - так, чтобы ширина была меньше высоты и обновить страничку, линии не появляются. Возможно линии получаются просто очень короткими line_lebg: w / 9, Проблема в этой строчке... поставь фиксированную длину, например 150 и всё работает норм. Над будет заценить как оно с микрофоном, пока нет возможности к сожалению) Успехов!)

[@ascilator7174]

@@ThreePixDroid_RU да, спасибо, конкретные значения помогли. Хотя почему оно не работает с w /9, ведь w это же по сути тоже конкретное значение

[@ThreePixDroid_RU]

@@ascilator7174 линия просто короткая получается.. Например: ширина окна 500px w : 9 = 55.5 радиус круга 20.. тоесть 2 круга рядом это уже 40px значит линия между ними всего 15px плюс у неё альфа(прозрачность) стоит и по этому их не видно..

[@ascilator7174]

@@ThreePixDroid_RU ну тогда справедливо

[@onikun2120]

velocity от -0.25 до 0.25

[@ThreePixDroid_RU]

нет, всё правильно : от -.5 до .5

[@onikun2120]

@@ThreePixDroid_RU Верно, что-то я вчера уже уставший был. Извиняюсь

[@user-fj7hr6ri3g]

плохо в этом уроке только одно то что ты за кадром код меняешь. Потом новички думают почему не работает)

[@ThreePixDroid_RU]

В смысле за кадром? Ничего в коде не менял всё записано одним дублем и вырезаны простои.. к тому же исходники приклеены. Можешь скинуть время "инцидента"? ..возможно на этапе сведения допустил ошибку.

[@logius84]

Ну я низнаю, по мне как, сильно много лишнего в коде.... Нахрен этот конструктор? Не быть тебе Сеньёрам))

[@EpanchinE]

Почему такая подача материала, Вы же ничего не объясняете? Попробуйте сначала объяснить алгоритм, а уже после покажите как его можно имплементировать на JS. Иначе выглядит, что робот читает написанный код.

[@ThreePixDroid_RU]

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

[@stranger271271]

Уэльское произношение не может не радовать. А вот стили как то вяло написаны

[@PolAero]

Немогу внедрить на свою страницу,в ней есть выпадаюшее меню с веру и уже есть обоина бекраунд которая двигается линейно вправо в лево

[@stranger271271]

Зачем лишнее условие && this.VelocityX>0 не требуется

[@ThreePixDroid_RU]

Я тебе больше скажу) там вообще условия не обязательны, можно гораздо проще всё считать, но на тот момент я этого не знал) Возможно запишу видос на эту тему... Пока никак не могу вернуться к записи уроков..