Лучший горизонтальный скролл в тильде кнопкой мыши | Drag and scroll в Tilda Zero Block
ฝัง
- เผยแพร่เมื่อ 11 ก.ย. 2024
- Лучший горизонтальный скролл в тильде кнопкой мыши | Drag and scroll в Tilda Zero Block
Сегодня мы сделаем скролл в тильде удержанием кнопки мыши в zero block. Это - самый простой способ сделать такой скролл в tilda, ведь используется всего одна строчка кода
🦜Поддержать автора копейкой: www.donational...
Ссылка на код для tilda zero block: pastebin.com/B...
___________________________________________
✅Поделись видео с друзьями: • Лучший горизонтальный ...
✅Подпишись на канал и поставь🔔: / @design_scripts
Лучший горизонтальный скролл в тильде кнопкой мыши | Drag and scroll в Tilda Zero Block
___________________________________________
ВК: id11717...
Instagram: / bistricky_stanislav
Email: rootdesign.help@gmail.com
Music by Retnik Beats:
(www.youtube/c/...)
___________________________________________
теги:
#tilda, #тильда, #дизайн, #вебдизайн, #design, #тильдошная, #motilda, #zeroblock, #зероблок, #скрипт, #скриптынатильда, #tildaws, #тильдасайт, #tildazeroblock, #тильдаzeroblock
Забыли упомянуть, что нужно обязательно выставить auto в настройках overflow, чтобы работало на мобилках. Спасибо за гайд!
P.S. После настройки "auto" в пк версии появляется противный ползунок. Если он режет глаз - скопируйте блок и настройте, чтобы без auto отображалось на десктопах, а с ауто - на остальных устройствах
спасибо вам!)
@@Alina-er7me рад помочь
А не подскажете, как можно этот ползунок убрать на мобильных? Или хотя бы сделать его в цвет фона, чтобы был незаметный
@@user-ix9tl5wd1f к сожалению не подскажу, это нужно к автору кода обращаться видимо
Сделал всё как вы сказали - работало дней 5, потом перестал работать слайдер на десткопах
Я так давно это искала. Казалось все так просто, но не могла реализовать. Спасибо!!!! Удачи вам.
Отличные видео. Здорово было бы, если бы сделал скрол-карусель с товарами в тильде.
Оооо, круто, спасибо! Давно хотел узнать как это сделать. Столько мыслей о кастомизации такого скролла сразу пролетело в голове)
Как всегда лайк! Было бы круто показать ещё и как делается это по скроллу.
Спасибо за контент, подписка и колокольчик оформлены!
Чуть позже будет по скроллу со skew искажением🔥
По скроллу можно просто анимацией сделать
@@webmarina да и так можно сделать стандартно в тильде выставляя в опциях визбл хиден ), но это реально за 1 минуту , а не геморроиться с фиксацией по горизонтальному скроллу если речь идет о нём, когда куча элементов и они находятся на разных высотах, там начинается треш в подгоне по пикселям
Большое спасибо! Мне это очень помогло! Дай Бог тебе удачи и творческих успехов!!!
Супер, отличное видео!
Но вопрос: почему может возникать проблемы в мобильной версии? На одном сайте все норм, скролит. На другом в компьютерной версии норм, в мобильной - не работает.
С такой же проблемой столкнулся
тоже такой же вопрос
такая же проблема
@@deadward1337 наши как решить?
@@filkataev наши как решить?
Можно ли сделать тоже самое, только вместо курсора поставить две стрелки по краям центрального изображения и сделать типа слайдера, чтобы при нажатии на стрелку происходило смещение на одно изображение?
Получилось, спасибо. Но для пользователя это не удобно ! Как сделать так же что бы еще и колесом мыши можно было прокрутить???
Супер! Спасибо за необычный контент для tilda zero block
Рад, что понравилось)
Потрясающе! Лучший по тильде на ютубе
Правда? Приятно слышать🔥
А для мобильного в зеро блоке - просто включить оверфлоу авто, правильно?
Видос огонь
Всё верно ;)
Чувак, в очередной раз спасибо 🙏
Помогаешь делать наши сайты на тильде круче
И тебе спасибо, что смотришь)
гениально, спасибо! это то, что я искал!
Огонь! Крутой контент. Спасибо)
Приятно слышать, спасибо :D
Просто шикарен! Спасибо тебе большое!
И тебе спасибо за комментарий👋😉
как раз хотел пихнуть в один проект, лайк и колокольчик!
Рад, что вовремя появился в твоём поле зрения)
Действительно, это самый простой и короткий способ сделать горизонтальный скролл в тильде на десктопе (помимо включения overflow auto и дёргания ползунка😄)
Спасибо)
Спасибо большое! очень понятно и работающе
Привет, а ты сталкивался с тем, что в яндекс браузере очень долго подгрудается скрипт? В гугле и сафари все ок, в яндексе состариться можно, пока он оживет
о как я искала эту инфу! Спасибо большое!
Красавчик, я давно искал горизонтальный скролл для тильды. На mo-tilda не видел
Ну вот, нашёл)
Рад, что контент был для тебя полезен
Как всегда все на вышке!
Рад слышать, спасибо за коммент
╰( ͡° ͜ʖ ͡° )つ──☆*:・ﾟ
Спасибо за видео....за все видео ждем нового....!
Почему у меня появляется вертикальная полоска прокрутки при скролле на экаранх меньше 1200px? И мало того, я захватив мышкой экран, еще и могу вверх в низ скроллить пикселей на 20. У тебя в примере не увидел вертикальной полоски =/
Подскажите, разобрались? У меня та же проблема((
Привет) покажи, пожалуйста, как сделать этот код для адаптива? чтобы пальцем можно было на экране телефона так делать)
нашли? подскажите плз
аналогично, на мобиле это не работает
@@skyfit25 в десктопе просто поставьте фрейму тип auto, а в мобиле за екран елементы и они будут свайпатся. комп версию скрыть в настройках блока
@@yason8834 SPASIBO
@@yason8834 Привет, расскажи пожалуйста по подробнее, не понял тебя)
Спасибо за видео! Не подскажешь, как сделать, чтоб полоска фото автоматически бесконечно прокручивалась до взаимодействия с ней, чтоб фото тихо плыли сами?
в стиле кода добавь строку autoplay: true
можно еще стрелки сюда добавить??? и как их примастерить?
автор как такую штуку на бесплатном тарифе провернуть?
Спасибо! Всё сразу заработало!
Спасибо за урок! А можно ли такую штуку провернуть, если такой слайдер находится не в отдельном зеро блоке, а весь лендинг сделан одним целым зеро блоком (к сожалению так нужно), и посреди этой страницы предусмотрен такой слайдер. Можно ли к нему тогда обратится как-то или нет?
Спасибо за контент. Как раз искал такой эффект для своего проекта
Рад, что помог тебе)
Добрый день! Подскажите пожалуйста, а на мобильной версии будет работать? Или как реализовать можно
Класс! Спасибо!
Сделай пожалуйста, такой же на мобильную версию буду очень благодарен!
Для корректного отображения на моб. версии необходимо задать параметр в Zero Block overflow: auto
@@user-hm6yw6es3k Не подскажете, как это сделать?
@@Mylato4kaaa редактировать блок> settings> там будет параметр
@@user-hm6yw6es3k вы потрясающий
@@user-hm6yw6es3k тогда появляется ползунок горизонтальный, как его убрать или скрыть?
Начал тебя смотреть вчера и уже вставил первые строчки кода себе на сайт, спасибо за доступность и лёгкость. Если будут вопросы по некоторому функционалу Тильды, можно задавать и куда?
В описании есть мои контакты. Лучше писать в вк)
Спасибо за контент)
Есть ли сейчас делать смягчение скролла так, чтобы работало и с тачпада? Один скрипт есть в тильдошной , но работает он в лучше м случае с рывками. Заранее спасибо;)
Действительно в плане реализации гораздо быстрее «тильдошного» слайдера. Интересно фон остается прозрачный и можно подложить цветной шейп на фон?)
Насчёт прозрачного фона - надо проверить
Шейп поставить можно, почему нет?)
Стас, как всегда супербл! Лайк ещё до просмотра по классике✌🏻✌🏻
Ахах, спасибо, бро. И от меня тебе лайк ещё до прочтения коммента🤙
Привет! А можно ли как-то сделать так, чтобы карточки были кликабельные? Если им ссылку присваивать, то при попытке прокрутки происходит сразу переход по ссылке на карточке.
Спасибо за видос!
А как отключить горизонтальный drag? И можно ли как-то отключить полосы прокрутки в хроме?
Кто-то ещё сталкивался с кривым отображением в хроме?
Это явно из-за overflow auto, но я не понимаю как это победить(
Бро, уверен скоро выстрелишь. Делаешь суперские видео по тильде и зеро блок, ты здраво конкурируешь с mo-ti.ru, romanyu и остальными. Но даже у них нет той же lottie или three.js в тильде. До сих пор отхожу от 3d моделей в zero block) Успехов тебе))
Кстати, возможно, скоро буду запускать свой небольшой сайт со скриптами для тильды, чтобы всё было в одном месте. Спасибо)
@@design_scripts Было бы круто!
Класс! спасибо
это просто бомба!!!
Автор, кланяюсь в ножки. Господи сколько я мучалась и пересмотрела ненужного бреда, когда это было так просто!
спасибо за видеоурок, код встал, все отлично)
Но возникла небольшая проблема, данный скрол использовал под карточкой товаров, типа внизу карточки товара имеется скрол с товарами которые будут интересны, и прои скроле при нажатии мышкой чтобы заскролить открывается тот товар на который было наведена мышка, как избавиться от ътой проблемы???надеюсь понятно написал))))))
Классно! А можно ли сделать так чтобы по скролу сдвигалось сразу несколько Zero блоков?
Боже! Я тебя люблю!!!! Я не пи***р но тебя люблю XD как раз проект у меня со слайдом похожим! Сейчас использую от тильдошной, но там не то что нужно было!))
И я тебя люблю, бро, спасибо за комментарий🔥
Как зафиксирвать другие элементы например заголовок или фото на bg чтоб они не скролились?
Хочу чтоб можно было скролить только фотками которые стоят више по слоям
Сделай их отдельным блоком
@@condemime1 А если это блок на определенном сложном фоне?
В том смысле, что нужно, чтобы фотографии скролились поверх другого изображения, которое стоит в качестве фона? И заголовок нужен в этом же блоке
Спасибо очень помог))
Скажите, пожалуйста, а как можно сделать, чтобыкак обычная галерея была (по бокам кнопки с переключением фото), а под этими фото был один текст? Я так понимаю стандартный блок галереи не подойдёт, а снизу просто блок с текстом добавить, так как нужно, чтобы фото были чуть поменьше - не так как в стандартных блоках.
Спасибо тебе дружище! все просто и супер работает, но как сделать чтобы оно автоматически листало по кругу, можно ли как-то это сделать? я совсем нуб в коде...
А как сделать на телефоне?
добрый день. спасибо за видео) но у меня появилась полоса скролла внизу под блоками. подскажите, как убрать ее?
Здорово!)
Так уж получилось ;) ты лучший 👍🏻
Спасибо, стараюсь для вас)
Здравствуйте, подскажите пожалуйста, а как можно поставить свой курсор вместо руки
Как сделать так, чтобы фон зеро блок оставался фиксированным?
Подскажите, а как сделать для мобильной версии горизонтальный скролл, например: продукции!?
Привет, много сайтов услуг используют yclients , на тильде его многие реализуют со стандартной кнопкой записи в правом нижнем углу, буду признателен и наверное не только я, если научишь в одном из видео заменять ее на свою кнопку.
Думаю многим будет полезно, не нашёл подобного, много что перерыл, но реализацию подобную видел, к примеру у барбершопов бородач и топ ган.
Добрый вечер! Подскажите пожалуйста, как зафиксировать задний фон(фото) при горизонтальном скролле? И возможно ли это
А как же без вступительной фразы?) Спасибо за видос 💪💪 по шрифтам будешь что нибудь делать?)
Так уж получилось))
Да, вроде, есть, не забыл👉👈
Я вышел на 2 видео в неделю: вт и пт. По вторникам классические скриптовые видео, как и было, а по пятницами - ux, типографика, дизайн и прочее.
Всё-таки канал называется ДИЗАЙНЕР со скриптами, а не СКРИПТЕР с дизайном :D
Или ты про эффекты со шрифтами?)
В следующий вторник будет skew искажение шрифтов и картинок по скроллу. Классная вещь, видел на многих сайтов с конкурсов
а как убрать полоску для пролистывания которая в браузере появляется?
Узнали как?
привет. код отлично работает на десктопе. а что насчет мобильной версии?
Станислав, доброе утро! Механика супер, а можно как-то на мобилку такое внедрить? Что куда прописать? А то на десктопе отлично работает, нужна такая же механика для телефона (горизонтальный скролл превью видео)
Для корректного отображения на моб. версии необходимо задать параметр в Zero Block overflow: auto (цитирую человека выше)
@@majoorin можно убрать код и поставить оверфлоу авто и так без кода будет работать
А как сделать тоже самое, но со стрелками прокрутки, а не рукой?
Взял идею на блокнот. Пока что подсказать не могу, сам такое писал давно, но готовое решение не сохранилось
А как сделать чтобы на мобилке тоже был такой скролл?
Вопрос. Можно ли в тильде сделать форму со звёздами для отзывов?
Спасибо!!!)))
Пожалуйста :D
Почему у меня элементы скролятся не только вправо, но и вверх и вниз? Подскажите, пожалуйста!
а если у меня в блоке есть фон и при скролле он становится белым где кончается область, как исправить? я не нашла подобной информации
вставил видео, но нельзя скролить поверх видео... жаль. мне эти блоки зачем нужны? картинки туда вставить? ну такое. мне видео надо сделать при скролле
ничего, конечно, не заработало... но появилась ладошка))
Спасибо, 2 дня мучилась
а как можно фиксировать фон по оси X? я совсем нуб в кодах. а найти не могу(( мои карточки ездят вверх вниз(
У меня у одного вверх вниз еще картинки двигаются, на 5-10 пикселей? Как от этого избавиться?
Нашёл один косяк и не понимаю как его исправить, на десктопе данный скролл работает только если страница полностью прогрузилась. Если страница имеет много данных в начале, а скролл где нибудь в середине, он не будет работать пока не догрузится всё полностью. Кто-нибудь решил это?
А как сделать горизонтальный скролл/прокрутку? Может есть ссылка на тутор?
спасибо
Добрый день! А как сделать, чтобы он еще и в мобильной версии работал?
У меня почему-то не работает(( курсор отображается, а действие не происходит.
Всё прекрасно работает: neuro-designer.tilda.ws/page18170513.html
Если что, код должен располагаться ниже, чем зеро блок со скроллом
Проверь, везде ли вставил ID блока в коде)
Можно ли использовать этот эффект на нескольких блоках в пределах одной страницы? Сделала два штмл блока и к каждому поставила свой айди блока, который хочу заанимировать. Первый работает отлично, а второй не двигается, хотя и появляется курсор. Можно ли это как-то реализивать?
Нашла решение?)
Здравствуйте, спасибо за классное видео. У меня к сожалению не открывается ссылка на скрипт. Почему?
этому видео два года, но я в отчаянии. почему оно может не работать? вот просто не работает и все.
Спасибо!! Бомба!! а на мобильной версии чего он не работает?
Overflow включи Auto
спасибо!
И тебе спасибо за просмотр и комментарий)
Спасибо за полезный контент!)
Подскажи пожалуйста, как сделать самообновляемый счетчик обратного отсчета?
Здравствуйте! У меня дальше 2200 px не скроллиться. Что делать?
А можно ли сделать так, чтобы в мобильной версии тоже был скрол с помощью свайпа?
уже нашел ответ. Спасибо за видео!
А можете скинуть ссылку ?
Тоже xотел добавить на мобильную версию
@@bekajoker4124 узнали?
Друзья, помогите разобраться) Когда оверфлоу - хиден, десктоп - работает, мобила - нет. Ставишь оверфлоу-авто, мобила работает, а на десктопе появляются бегунки горизонтальные и вертикальные. Можно от них как-то избавиться, чтоб не дублировать зероблоки под разную ширину экрана?)
Можно установить css’ом для устройств с размером менее 1200 оверфлоу авто.
Вроде, это должно сработать:
@media and screen (max-width:1200) {
#rec99999999 .t396__artboard {
overflow:auto !important;
}
}
Какой сделать такое для мобильной версии? данный код не работает у меня для мобильной версии(((
Как сделать такой слайдер при скролле вниз, а не зажимать мышкой?
Прикольно! Но человеку не будет ясно, чт скролл боковой. Какие-то стрелки бы ....
Добрый день! Что-то случилось с кодом, до этого прекрасно работало (спасибо вам!), но сейчас появляются серые полосы (если ставить overflow auto) и только тогда можно прокрутить на дектопе, а вот на hidden курсор меняется, но данные не прокручиваются.
Спасибо за комментарий. Код я проверю)
спасибо за видео. А как бы так сделать, чтоб без drag, а только scroll?
Степ бай степ анимацией фиксировать элементы и анимировать позицию по скроллу
Станислав здравствуйте, хотелось бы узнать о возможности реализации меню в мобильной версии, в верхней части экрана, с горизонтальным скроллом и изображениями, примерно как на сайте Apple, спасибо!
Можно ссылку на страницу эппла с таким меню?
Горизонтальный скролл на мобильной версии делается с помощью параметра overflow:auto в настройках зеро блока
Попробуй зеро блок с параметром overflow auto для мобильных устройств)
спасибо, только в мобилке не работает(
Круто
Спасибо)
Странно, но на адаптациях не работает :(
Огосики 👍
🔥🔥🔥