Как сделать бегущую строку с иконками на Tilda без боли и страданий
ฝัง
- เผยแพร่เมื่อ 19 ส.ค. 2024
- В этом видео я делюсь с вами простым скриптом, который поможет создать бегущую строку из логотипов/картинок на Tilda.
Скрипт реализован средствами JavaScript, HTML и CSS, используя простой синтаксис, который будет понятен всем браузерам.
В примере изображения хранятся на сервисе DropBox, но вы можете использовать любой хостинг.
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmy...
Ссылка на код: codepen.io/Max...
единственные видео по прямому запросу в ют, да еще и полезное! Макс продолжай
Благодарю вас за такой классный код! Благодарю, что делитесь🥰
Спасибо ваам🥹🥹 все получилось , работает🥳🥳
Спасибо огромное ! Все получилось 👍
Спасибо!
Отличная модификация!
Хотя, думаю здесь можно еще доработать
Спасибо за видео! На компьютере смотрится нормально, а на телефоне все наехало друг на друга( как расстояния между логотипами увеличить? у меня их 10 штук
Спасибо вам большое!
так же идет скачек резкий в конце карусели
Лучший!)
Как можно ограничить контейнер его размерами? Чтобы не на всю страницу была бегущая строка, а только в пределах контейнера
Отличная работа Макс, спасибо! С яндекса изображения не догружаются почему то, пришлось тоже на Dropbox загрузить.
Спасибо большое
Спасибо, в целом классное решение, но есть проблема: на мобиле карточки находят, наслаиваются левыми и правыми гранями друг на друга. Как это исправить?
🚀🚀🚀🚀
Добрый день! Спасибо за ролик! вы- молоды! НО у меня вопрос. в мобильной версии, вместо картинок у меня крутятся квадратики с крестиками.. Картинки не грузятся, как я понимаю. КАК это исправить?
Спасибо огромное🙏 Как раз искала такой способ с логотипами! Скажите плиз, а что делать в случае если в одном блоке нужны 2 строки?
Как сделать 2 таких строки? друг под другом? Копирование блока не помогает, там начинается конфликт классов, но что поменять не понятно
Эх, столько ожиданий и такое разочарование: показывает 5 логотипов и потом перелетает в начало ( Но спасибо за код, кому-нибудь с меньшим количеством логотипов он точно поможет )
После 9-го лого не показывает
все супер, только картинки подгружаются с 3го раза ( каждая по 7 кб весит)
Подскажите, пожалуйста, а как увеличить эти лого в мобильной версии? Просто у меня в мобильной версии они прям очень маленькие, плюс какой то отступ внизу получается(
Спасибо за видео, очень полезно! Подскажите, а как сделать изображения кликабельными и привязать к ним ссылки в данном случае? Чтобы, например, кликая на лого банка, я переходил на его сайт.
Попробовал код, но картинки хотел вставить через гугл диск не получилось. Максимум до чего дошол, так это просто alt тэг отображается, а сами картинки он не показывает((
Возможно я где то пропустил или не нашел, но как поменять направления движения этой карусели?
@keyframes marquee-text {
0% {
transform: translateX(-100vw);
}
100% {
transform: translateX(0%);
}
}
у меня не вышло((@@StudioBrendMaster
А зачем это нужно, если можно просто анимацию настроить в зероблоке?
Всем привет! С яндекс диском у меня не работает (( не могу понять почему.
У меня тоже не работает
Добрый день! Не подскажите как сделать размер этого блока не на 100% ширины экрана, а определенного размера в пикселях?
Спасибо, очень полезно! Хочу узнать: а если лого/картинок больше, чем 5-6, например 15, если их все добавить в код, они наезжают друг на друга, даже если задать margin - некоторые все равно соприкасаются. Как посоветуете исправить это?
Я проведу тесты у себя и вернусь к вам с ответом. Можете написать мне в телеграм @ohmysite или инст @maxmitrofanov_ и мы решим проблему
РАзобрались ?
Была такая же проблема. Решил двумя правками:
1) в блок .marquee img добавил margin: 30px - это расстояние между картинками. Код такой:
.marquee img {
margin: 30px;
opacity: 0.7;
height: 10vw;
max-height: 160px;
2) В блок .marquee-span добавил строку display: contents - картинки перестали наслаиваться друг на друга. Код:
.marquee-span {
width: 100vw;
display: contents;
justify-content: space-around;
Благодарность автору за красивое решение карусели.
@postovoizha Человек, спас! Большое спасибо, что не поленился поделиться🤗
@@postovoizha Спасибо большое! Помогло!
Подскажите, пожалуйста, у меня строка доезжает до конца, и потом резко с самого начала т.е. нет зацикленности.
В чем может быть проблема?
Подскажите пожалуйста решили этот вопрос?
@@user-hj9nb6yv9sнет)
Убогий код, который крайне плохо работает.
При добавлении кода в тильду, пишет что в блоке скрипт ошибка в коде, тильда отмечает его красным и крестиками, вот этот кусок:
for (let i = 0; i < imgLinkArr.length; i++) {
imgLinkArr[i] &&
marqueSpan.forEach((el) => {
el.insertAdjacentHTML(
"beforeend",
``
);
В итоге не работает ничего, как-то можно починить?