Javascript анимация текста с SVG, CSS и позицией скролла

привет интернет в этом видео я расскажу как сделать интерактив на сайте с помощью html css java скрипта и svg я анимирую текст по кривой волне и привязываю анимацию к скролла с помощью джеймс первый шаг сделать волну векторе и я открываю фильму людьми я

создаю фрейм macbook и с помощью инструмента понту я делаю 5 произвольных линий по клевых это будут пути для моего текста они убивают в такую фрейм я экспортирую формате svg с кем opel vectra graphics и острова я его в с-код

преимущество с воле иллюстрации в том что его можно ставить в html-код потому что и слуга имеет максималь подобные синтаксис то гиппас это и есть мои линии только они мне нужны поэтому все другой я убираю и в тайге саги я оставляю только атрибуты бокс сегодня я буду работать код по ней а

обычный 40 ватт я вставляю вкладку html кстати если два раза кликнуть на название вкладки остальные свернутся чтобы обратиться по умолчанию css я добавляю марчин 0 для электро покер так svg я добавляю так текст в так текст паз в нем будет располагаться текст который будет анимироваться по пути текста пас нужно связать с помощью атрибутов хайди их лев так с кривой я добавляю произвольное имя твоих текст 0 атрибутах rift обед текст спас я добавляю значение де вначале не забываю про решетку таким образом я связалась текст passo поскольку у нас текст находится на векторе the color не будет работать фил подобным образом я связываю еще 4 текстовых элементы нас оставшимися с тремя это кстати мои 5 любимых музыкальных композиций обратите внимание что вы можете редактировать svg прочную меняя значение точек а чтобы скрыть линии я убираю и станет пас атрибуту strong также двигать текст я буду двигать с помощью атрибута стартов сад теперь чего скрипт с помощью токами

корректор л я получаю список всех тегов expose полученный список я вожу в консоль чтобы убедиться что я не допустил ошибки это массив элементов обратиться каждым элементу я могу по его номеру в этом списке удаляю атрибут старта в сет первым текстом элементу то же самое что сейчас html-коде но теперь я делаю с помощью java скрипта обратить внимание если у вас ошибка в коде например опечатку название функции то углу появится тщательный однако меня и число я определяю на сколько пикселей сдвинется текст по пути теперь мне нужно это привязать к строго нас король сейчас особо нечего поэтому я устанавливаю высоту body 300 в порт хайд то есть триста процентов высота экрана с помощью этого and restore я добавляю слушатель события scroll и функция которая будет вызываться каждый раз когда произойдет события проверяю что все работает вывожу в консоль значение скролла глобальную переменную scroll y кстати в катыни тоже есть своя консоль и это то же самое что консоль браузере функции отрыве от теперь меняю число назначения с коровой и перри нашего код внутри функции что-то происходит но они понятно что мне нужно зафиксировать своей элемент относительно экрана для этого я использую постишь infix добавляю внутри функции оставшихся четыре и текстовые климент и меняя скорость анимации для каждого из элементов умножая на произвольное число от 0 до 1 таким образом я еще и замедляю анимацию чтобы она была больше похожим образом меняю размер текста для каждого из текстовых элементов для этого я использую сервис лектора и обещал похожего эффекта можно было достичь если использовать как рапа класс и бы пойди но для этого нужно помнить html-код а я ленивый человек

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