Анимация бегущей строки из изображений (шейпов) в пару кликов на Тильде
HTML-код
- Опубликовано: 25 июл 2024
- Всем привет😘👋
Не забываем ставить 👍 и подписываемся на канал 🛎 - впереди много интересного🔥🥳 (следующее видео выходит на днях и посвящено интересному эффекту «жалюзи» 😍🔥)
С вами - Наталья Чистякова, UX/UI Веб-дизайнер, в этом видео расскажу о том, как всего в пару кликов заанимировать бегущую строку из изображений (это могут быть также и шейпы, и тексты, естессна) на Тильде🔥: несмотря на обилие мануала на эту тему, у какого-то числа дизайнеров остаются вопросы, в то время как актуальности своей SBS бегущая строка не утрачивает даже при наличии у нас стандартного блока DV13 и мода от Нолим, как минимум. Поэтому смотрим, и, надеюсь, будет полезно🙌
🦊Желающим задонатить - к боту-помощнику 👉 t.me/ChistyakovaDesignBot
⏱Тайминг - для вашего удобства❤️:
00:00 - о себе, контенте на канале
01:33 - вступление и обоснование выбора темы
02:28 - о готовых решениях для бегущей строки на Тильде (штатный блок и мод)
02:50 - о преимуществах именно SBS-бегущей строки в зеро
03:27 - критерии, которыми руководствуемся в настройках бегущей строки
05:32 - идём в настройки
12:26 - тестим с автоскейлом
✔️Полезные ссылки, как и обещала в видосе:
📌 Видео по вёрстке в Grid, Grid 1920+, по Window Container и с autoscale - 👉 • Вёрстка на Тильде - Gr...
📌 Видео по триггер оффсетам - что это и как настраивать 👉 • Trigger offset в сцена...
📹Хочешь предложить свою тему для видео или давай соберём эфир вместе - пиши в ТГ t.me/chistyakova_website (никнейм: @chistyakova_website) или в комментах к этому видео🔥
Ещё раз напоминаю о том, что это и другие полезные видео выкладываю, в том числе, в рамках нашего дизайнерского душевного чата, в котором являюсь Админом - чат Pro.дизайн 👉 t.me/pro_design23
Вливайтесь для человеческого и профессионального общения, а также на случай, если
давно хотели закинуть какую-нибудь интересную тему, но не решались😁 - мы периодически проводим эфиры, так что у вас есть реальный шанс стать приглашённым спикером-экспертом и поделиться своими знаниями, инсайтами и компетенциями с грамотной интеллигентной и просто клёвой аудиторией🔥✨☺️, а потом взять и выложить запись своего бенефиса в соцсетях😉 - отличный инфоповод💪
Если есть вопросы ко мне:
► дизайн;
► типографика и композиция на сайте;
► анимация любого сценария и уровня сложности;
► подбор креативных идей;
► оформление документов для сайта (Политика конфиденциальности, Публичная оферта, РКН, согласие субъекта ПД);
► оформление отношений с заказчиками, разрешение спорных ситуаций, составление актов и претензий);
► любой вопрос за рамками поименованных - мои компетенции гораздо шире заявленных😉,
- пишите в ЛС, разберёмся в любой ситуации🤝
Чат Pro.дизайн 👉t.me/pro_design23
Сообщество в ВК🥰👉 chistyakova.website
Мой ТГ - t.me/chistyakova_website
ВК - chistyakovan
Инст (продукт Meta, в РФ признана экстремистской организацией) - instagram.com / chistyakova.website
DProfile - mvp.dprofile.ru/chistyakovan
Приятного просмотра👀🔥
#анимация #sbs #tilda #бегущаястрока #шейпы 
Игры
Наталья, спасибо огромное за этот видеоурок! Целый вечер не могла разобраться как сделать бегущую строку из логотипов без кода и случайно наткнулась на ваше видео... вы меня спасли от мучений! Благодарна вам безмерно! Удачи и процветания!
Хорошее объяснение, хороший видеоурок! Удачи в дальнейшем
Спасибо и вам за отклик🤗, взаимно желаю удачи и всяческих успехов 🥰!)
Спасибо огромное!
И вам спасибо - за просмотр и отклик😘!)
Наталья, здравствуйте! Спасибо за урок в веб версии все супер, а вот в мобильной почему-то не прогружаются все картинки в анимации, расстояния я поправила в соответствии с размерами картинок в моб версии. В итоге на разных устройствах (проверяла на айфон и андроид) по разному работает анимация, на айфонах не отображается корректно, на андройде все четко. Может вы подскажете в чем может быть проблема, буду очень благодарна
Здравствуйте! То же самое :( вам удалось найти ответ?
@@aigerimtlg8722 нет пока что(
сегодня буквально сразу за день два обращения (прошу прощения, что спустя месяц зашла в комменты): думаю, в мобильном в айфоне так подгружаются фотки (их много), но можно решить вопрос не сугубо анимацией, а, например, бегущими строками от нолим и аннекс; у девочки одной засняли сегодня сайт на айфоне и андроиде, и в айфоне сразу провал из фоток, но потом ок, на андроиде сначала ок, потом провал, но там дело было обрыве самой строки - дистанс сдвига был длиннее, я думаю, чем суммарная длина всего звена из картинок. Возможно, решение в этом кроется, то есть они не то, чтобы не подгружаются, а анимацию надо докрутить, но это на уровне догадок
Тоже столкнулась, помогло выключить lazyload
@@user-jo2qj3ko6s офигеть!! Работает! Спасибо большое!