# Javascript анимация текста с SVG, CSS и позицией скролла ## Метаданные - **Канал:** Sereja Ris - **YouTube:** https://www.youtube.com/watch?v=ccmHWoToHNk - **Дата:** 16.06.2020 - **Длительность:** 6:51 - **Просмотры:** 1,002 ## Описание Что такое SVG? Как работать со скроллом в JS? Как зафиксировать элемент относительно окна браузера в CSS? Что такое viewport units? Узнайте как анимировать текст с помощью SVG и Javascript и привязать его к позиции скролла окна браузера. В этом видео показываю как просто работать со скроллом в JS. Урок подойдет новичкам Код из видео https://codepen.io/flakessp/pen/BajLzPZ Мой телеграмм-канал https://teleg.one/internet_tet_a_tet Мой инстаграм https://www.instagram.com/serejaris/ 00:00 Интро 00:20 Волная для текста в Фигме 00:40 Подготовка SVG 01:01 Связка текста и кривых 03:01 Привязка текста к сроллу с помощью Javascript 06:12 Финальные штрихи ## Содержание ### [0:00](https://www.youtube.com/watch?v=ccmHWoToHNk) Интро привет интернет в этом видео я расскажу как сделать интерактив на сайте с помощью html css java скрипта и svg я анимирую текст по кривой волне и привязываю анимацию к скролла с помощью джеймс первый шаг сделать волну векторе и я открываю фильму людьми я ### [0:20](https://www.youtube.com/watch?v=ccmHWoToHNk&t=20s) Волная для текста в Фигме создаю фрейм macbook и с помощью инструмента понту я делаю 5 произвольных линий по клевых это будут пути для моего текста они убивают в такую фрейм я экспортирую формате svg с кем opel vectra graphics и острова я его в с-код ### [0:40](https://www.youtube.com/watch?v=ccmHWoToHNk&t=40s) Подготовка SVG преимущество с воле иллюстрации в том что его можно ставить в html-код потому что и слуга имеет максималь подобные синтаксис то гиппас это и есть мои линии только они мне нужны поэтому все другой я убираю и в тайге саги я оставляю только атрибуты бокс сегодня я буду работать код по ней а ### [1:01](https://www.youtube.com/watch?v=ccmHWoToHNk&t=61s) Связка текста и кривых обычный 40 ватт я вставляю вкладку html кстати если два раза кликнуть на название вкладки остальные свернутся чтобы обратиться по умолчанию css я добавляю марчин 0 для электро покер так svg я добавляю так текст в так текст паз в нем будет располагаться текст который будет анимироваться по пути текста пас нужно связать с помощью атрибутов хайди их лев так с кривой я добавляю произвольное имя твоих текст 0 атрибутах rift обед текст спас я добавляю значение де вначале не забываю про решетку таким образом я связалась текст passo поскольку у нас текст находится на векторе the color не будет работать фил подобным образом я связываю еще 4 текстовых элементы нас оставшимися с тремя это кстати мои 5 любимых музыкальных композиций обратите внимание что вы можете редактировать svg прочную меняя значение точек а чтобы скрыть линии я убираю и станет пас атрибуту strong также двигать текст я буду двигать с помощью атрибута стартов сад теперь чего скрипт с помощью токами ### [3:01](https://www.youtube.com/watch?v=ccmHWoToHNk&t=181s) Привязка текста к сроллу с помощью Javascript корректор л я получаю список всех тегов expose полученный список я вожу в консоль чтобы убедиться что я не допустил ошибки это массив элементов обратиться каждым элементу я могу по его номеру в этом списке удаляю атрибут старта в сет первым текстом элементу то же самое что сейчас html-коде но теперь я делаю с помощью java скрипта обратить внимание если у вас ошибка в коде например опечатку название функции то углу появится тщательный однако меня и число я определяю на сколько пикселей сдвинется текст по пути теперь мне нужно это привязать к строго нас король сейчас особо нечего поэтому я устанавливаю высоту body 300 в порт хайд то есть триста процентов высота экрана с помощью этого and restore я добавляю слушатель события scroll и функция которая будет вызываться каждый раз когда произойдет события проверяю что все работает вывожу в консоль значение скролла глобальную переменную scroll y кстати в катыни тоже есть своя консоль и это то же самое что консоль браузере функции отрыве от теперь меняю число назначения с коровой и перри нашего код внутри функции что-то происходит но они понятно что мне нужно зафиксировать своей элемент относительно экрана для этого я использую постишь infix добавляю внутри функции оставшихся четыре и текстовые климент и меняя скорость анимации для каждого из элементов умножая на произвольное число от 0 до 1 таким образом я еще и замедляю анимацию чтобы она была больше похожим образом меняю размер текста для каждого из текстовых элементов для этого я использую сервис лектора и обещал похожего эффекта можно было достичь если использовать как рапа класс и бы пойди но для этого нужно помнить html-код а я ленивый человек ### [6:12](https://www.youtube.com/watch?v=ccmHWoToHNk&t=372s) Финальные штрихи последним действием решился испортить добавляю синий фон белую заливкой и декоративной смесью шрифтов надеюсь это видео было для вас полезным код к этому видео находится в описании к этому видео если у вас появились вопросы смело задавайте их комментариях и я обязательно отвечу и если вам понравился это видео вы знаете что делать пока оставайтесь указать --- *Источник: https://ekstraktznaniy.ru/video/9005*