Как сделать бегущую строку с иконками на Tilda без боли и страданий

Привет друзья С вами снова Макс в этом небольшом коротком видео Я бы хотел вам показать как без боли и страданий можно сделать вот такую бегущую строку из любых иконок изображений Чего угодно Ну давайте посмотрим как это можно очень быстро реализовать действительно очень простой скрипт не нужно в Zero блоки там что-то мучиться с анимацией куда-то передвигать совмещать изображение и так далее зацикливать ее все уже сделано в коде Вам нужно будет просто вход вставить ссылки на изображение с любого сервиса хранилища данных в данном случае я использую Dropbox до 2гб не предоставляют бесплатно для таких сжатых png изображений этого хватит мне кажется на всю жизнь Давайте приступим так Для начала просто как всегда создаем пустой Зиро блок все из него удаляем для наглядности поставлю цвет какой-нибудь черный темно-серый я сделаем высоту блока сто процентов и добавим сюда обычной HTML компонент Если вы хотите чтобы у вас бегущая строка была от одного края экрана до другого то ставим контейнер тип на Windows Давайте в данном случае для примера его центрируем здесь если нажать на пикселе пиксели меняем на проценты сто процентов высоту оставим 170 пикселей пусть так будет сохраним опубликуем Да вот у нас просто здесь надпись вот эта Hello world которая была сейчас мы заменим вот этот Диф на скрипт который я для вас подготовил и собственно у нас все работает удаляем все что здесь есть вставляем скрипт который Я подготовил по ссылке в описании этого видео Вы можете использовать совершенно бесплатно вставляем Диф дальше нужно задать этому стиля пишем Text Style чтобы движок браузера понимал что мы от него хотим и вставляем стили из файла со стилями Control все собственно ставили и нам осталось добавить только скрипт пишем Тег скрипт добавляем наш скрипт сохраняем бликуем проверяем ничего не происходит потому что мы пока что не вставили наши ссылки в консоли нет ошибок Это уже хорошо Это радует Давайте теперь добавим ссылки на наши изображения так переходим на наш Dropbox куда мы скидывали в данном случае у меня здесь подготовлено 5 иконок Я их даже не уменьшал честно говоря но рекомендую перед тем как загружать уменьшить их по высоте примерно до 100 пикселей я думаю будет достаточно там уже смотрите сами и просто по порядку копируем ссылки копировать ссылку вот здесь у нас в скрипте есть массив я все подписал то есть написано в этот массив вставляем ссылки на изображение два раза на написал на изображение каждая ссылка в кавычках Если вы смотрели предыдущее видео по созданию слайдера там был принцип такой же И вообще желательно для изображения указывать alt-tech который помогает если изображение не загрузилось посмотреть его описании или людей которые используются скринридеры которых какие-то проблемы со зрением хорошим тоном вид разработки считается указывать вот эти альтегии для изображений поэтому давайте тоже это сделаем то есть вот у нас первый логотип одного банка Да ну указываем своими словами и так делаем со всеми ссылками изображениями каждая ссылка еще раз повторяюсь в своих кавычках если кавычки кончились пишем их сами в этом ничего не страшно если даже оставить и пустые кавычки то программа проверит на наличие пустых кавычек и не будет их отрисовывать в окне браузера с

альтернативными сальтегом такой проверки нет потому что пустая строка она ничего не влияет стандартно там так пустая строка Всё мы вставили Наши все ссылки Наши все изображения если загрузка происходит в Dropbox и ничего со ссылками менять не надо Программа сама сделает все что нужно заменит там ссылки и так далее вот если с других каких-то вставляете ресурсов тоже никаких проблем возникнуть не должно Смотрите по поводу кода немножко Вот здесь в комментариях Я указал где можно изменить скорость движения строчки сейчас стоит полный цикл за 25 секунд То есть для меня нормальная скорость Пока так оставим я сейчас поменяю Если нужно будет Также можно заменить изменить прозрачность самих изображений У меня сейчас стоит 70 процентов то есть соответственно если сделать здесь поставить единицу это будет один единица будет сто процентов то есть изображение будет полностью непрозрачными соответственно если 0 то их вообще не будет видно вот также я оставил здесь вот этот блок где написано Hover он что будет делать сейчас покажу то есть сохраняем публикуем так вот у нас пошли надписи пошли иконки Все работает ничего не дергается никаких нет лишних движений проверим консоль консоли тоже никаких ошибок нет то есть на сайт негативно это влияет никак не будет И как вы видите если я навожу мышку на эту ленту то она останавливается вот если вас вам это нужно можете оставить тот блок если вас это раздражает У меня честно говоря это не очень нравится мало ли кому понравилось Я поэтому оставил если вас раздражает просто можете либо этот блок удалить либо его закомментировать чтобы закомментировать нажать команд слэш или contral Slash на Windows удалить понятно просто Давайте попробуем ускорить посмотрим как поставим 5 секунд посмотрим как влияет публиковать видите как быстро полетело мне это не нужно оставляем значение 25 секунд собственно все менять здесь ничего не нужно так как мы уже поставили привязку к Windows контейнеру в самом начале то оно будет хорошо отображаться и на мобильных устройствах и также высота вот этих блоков она привязана не к жестку пикселям а к высоте вьюпорта почему это говорю то есть мы будем сужать нашу порт то видите иконки тоже сужаются И то есть блок получается полностью адаптивным что на мобильных устройствах что на десктопах что на больших экранах то есть ничего никуда не сползает все медленно хорошо двигается И по моему выглядит замечательно поэтому Если вам понравилось это видео пожалуйста Поставьте лайк канал только начинает развиваться мне это очень поможет Это мне смотивирует для создания новых подобных скриптов и записи подобных уроков а так всем спасибо за внимание Всем пока Надеюсь скоро увидимся