Ivan Bogachev

В postcss-trolling есть готовая CSS анимация под вашу задачу. Нужно лишь задать разный animation-delay элементам (возможно с помощью :nth-of-type или :nth-child).

Попробуйте использовать пресет не "env" из "babel-preset-env", а "@babel/preset-env" из одноименного пакета.

По сути нужно применить фильтр к канвасу, который там спрятан среди элементов карты. Так что если взять разметку вроде:

<div class='my-super-map'>
    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A07be0313631167b7c9034cf92574b147daa12b122f3d938bc90aa67df29c81ac&amp;width=600&amp;height=449&amp;lang=ru_RU&amp;scroll=true"></script>
</div>

то останется только добавить:

.my-super-map canvas {
    filter: invert(100%);
}

Не то, чтобы это было красивым решением, но оно работает.

Вы можете в графическом редакторе переместить и масштабировать всю свою карту в SVG так, чтобы она была грубо говоря не от 0 до 100 (или какая она у вас там) по горизонтали, а от 19 до 169 (вроде бы, не силен в географии). И по вертикали так же подвинуть. И исходить из соображений, что координаты X/Y в SVG буквально равны нашим обычным координатам по широте и долготе. На восток и север - в плюс, на запад и юг - в минус. А перемещение на экране и масштабирование можно сделать с помощью атрибута viewbox, меняя его по ходу дела. Если вы руками рисуете, то таким образом можно получить точность в 1/4 градуса без умственных усилий, просто представив циферблат (0'/15'/30'/45' -> 0/.25/.50/.75), так что думаю, что для ваших задач, где точность не столь важна, это вполне подойдет.

Потому, что for...in перебирает не совсем то, что вы ожидаете. В вашем случае будет удобнее использовать какой-нибудь другой вариант цикла - тот же for...of к примеру.

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

Вы много раз используете такие штуки, как use и clip-path, указывая там id елементов. Но сами id на странице не уникальны. Вот и ломается все. Используйте уникальные id для элементов.

Есть такая штука, как gulp-tap, с ее помощью можно решить вашу задачу.

А в целом - содержимое файлов можно получать вне зависимости от сборщиков и таск-раннеров с помощью fs.readFile или fs.readFileSync (пример).

с помощью css

Прохожу learn.javascript.ru и в конце даётся всего 2-3 примера, которые нужно решить. Их успешно решаю, но хочется прям попотеть. Кто, что посоветует?

Пройдите все темы на этом ресурсе. Если они вам легко даются, то это не займет много времени. А потом, если вы действительно успешно решаете примеры по отдельным темам, то видимо пора уже перейти к их комбинациям. В реальной жизни, в отличии от школы, почти все задачи составные, задач "чисто про циклы" или "чисто про промисы" почти не бывает. Попробуйте порешать вопросы от новичков здесь, на тостере, по тегу javascript - там много простых, с которых вы вполне можете начать. И, несмотря на простоту, это будут реальные проблемы в реальных проектах, а не искусственно придуманные задачки. А в качестве бонуса - есть ответы от более опытных разработчиков, на которые можно смотреть, если сами в чем-то не разобрались.

Библиотека panolens.js хочет иметь конкретную версию three.js, которая прописана у нее в зависимостях (на данный момент 0.105.2), а у вас используется другая версия. Замените three.js в вашем проекте на версию 0.105.2 - npm хранит старые пакеты, так что с этим проблем быть не должно.

Юрий Артюх уже рассказывал как подобные штуки делать, так что пересказывать не буду - просто посмотрите. Подход там универсальный - можно и на канвасе и на SVG все делать (хотя канвас по идее более производительным будет).

Эта штука нынче затмила по популярности particles.js. Постоянно все о ней спрашивают, в том числе и на тостере:
Можно ли использовать чужой js код?
Как правильно вытащить код? с этой страницы...

Задача разделяется на две:
1. Анимировать саму линию
2. Перемещать огонь по ней

Под первую задачу так и напрашивается SVG (статья про пунктирные вау-эффекты). Ну а решение второй вытекает из первой, достаточно загуглить "перемещение объекта по path" или еще что-то в этом духе. Получаем что-то такое (код немного странен, я другой пример перевернул вверх дном, но идея должна быть понятна):


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

Если есть похожие примеры или идеи... Посмотреть как работает...

На ваш вопрос уже ответили, но добавлю от себя еще один пример для изучения. Принцип тот же, но используется SVG. Часто это может быть удобнее, чем анимирование html-элементов, особенно если нужны какие-то еще эффекты, так что полезно знать, что и так тоже можно:

Ну а если таких элементов будет слишком много, то имеет смысл все рисовать на canvas. Не стоит забывать о производительности!

Да, симпатичная штука. Как говорится, ябзаверстал. Да и показаться на первой странице CodePen с такой демкой тоже будет не лишним. Так что вот вам концепт для изучения по мотивам вашего видео:

В разных браузерах не тестировал, это скорее пример, чтобы показать подход к решению задачи. Рекомендую смотреть на большом экране - версия только для десктопа.