Как сделать горизонтальный скролл карточек на Тильде

Подписаться 130 тыс.

Просмотров 91 тыс.

50% 1

Один или несколько блоков с горизонтальным скроллом смотрятся нестандартно и привлекают внимание посетителей к контенту сайта. В видео рассказываем, как сделать такой эффект на Тильде за пару минут.
Подробнее о настройке пошаговой анимации 👉 help-ru.tilda.cc/zero-advance...
__________
👉 Создать сайт на Tilda: tilda.cc/ru
Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: tilda.education
Подписывайтесь на нас в соцсетях:
◾ Instagram: / tildapublishing
◾ Telegram: t.me/tildanews
◾ VK: tildapublishing
◾ Facebook: / tildapublishing
#tildapublishing #Тильда #конструкторсайтов

Опубликовано:

9 сен 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 88

@Abvspace 11 месяцев назад

В общем, для тех кто так же не понял откуда у него 2860/-2860 взялось и кому так же поддержка тильды нихрена толкового сказать не смогла, посвящается: Коррелируйте эту цифру в зависимости от ширины снимка и их количества, во всех версиях экрана. Про высоту зероблока плюс-минус верно он сказал. P.S. для ТП Тильды - ска, так сложно было тоже самое написать мне а не заставлять считать и разбираться? И не нести чушь типа "это произвольное число"

@yuriyumanets2990 4 месяца назад

Подскажите пожалуйста, у меня только два из четырех элементов листаются, анимация скопирована, не могу понять в чем дело...

@kirillr1579 2 года назад

Очень круто, спасибо !

@user-cb4kf4cs9v 2 года назад

Спасибо! Очень поднзный ролик)

@krasikovsergey1536 Год назад

По человечьи донес, молодцом. Полаю.

@lyubovkotlyarova2714 Год назад

Очень понятно объяснили! Просто супер! Спасибо большое!

@TildaPublishing Год назад

Спасибо!

@Abvspace 11 месяцев назад

ничего себе ты вы понятливая! )

@coffeeint 3 месяца назад

все понятно. кайф. спасибо!

@sergeyprostobean4521 2 года назад

Классно Спасибо за урок

@user-bl8db2tu3j 2 года назад

Было бы отлично если вы выложили шаблон этого блока в открытые доступ, чтобы не мучаться с настройкой

@rimmchik__ 2 года назад

Спасибо большое!

@PINpiter 2 года назад

Класс! только еще б про адаптив бы)

@user-es1uo8pm1l 2 года назад

Спасибо!

@MarinaYushkova 7 месяцев назад

какой умный 🥺🙏 я уже при сложении цифр "потерялась" )) огромное спасибо за урок

@Cutest365 Год назад

Спасибо брат , все вышло 🔥

@user-mk2lt8up9c Год назад

Спасибо!!!

@Waiopsy 2 года назад

БЛАГОДАРЮ!!!! Два дня сидел пытался реализовать анимацию на основе знаний,которые изложены в этом видео! Никак не получалось, пока не нашел это чудо!

@Abvspace 11 месяцев назад

Какое? ) двойное отрицание

@owibka0019 8 месяцев назад

Здравствуйте! Какой шрифт используете для заголовка?

@user-ku3oi2ko9s Месяц назад

Можно подробнее обьяснить, прям с линейкой показать, от какого элемента 350 px, как именно высчитали 2860 , видео для новичков же, которым надо все разжевать

@user-es9iq2rp2y Год назад

Можно сделать анимацию с сбором маленьких деталий в одну картинку !

@MrSuperRenat 2 года назад

А если мне надо просто сделать скролл по горизонтали, чтобы он мог крутить туда сюда когда захочет без скролла к мышке?

@maturym_ Год назад

Было бы здорово, если бы объяснили, как рассчитать значения для анимации

@TildaPublishing Год назад

Здравствуйте! К сожалению, мы не можем вам подсказать точные настройки анимации. Вы можете создать свою анимацию, используя учебник - tilda.education/web-animation-course

@Abvspace 11 месяцев назад

@@TildaPublishing вы про свои значения в видео объясните, откуда они взялись, все этого просят. 2860 и тд

@move2like 7 дней назад

На мобильных версиях эта анимация работает так же?

@dianisseya Год назад

Если хочется пальчикам скролл не вниз а справа влево сделать?

@user-jc5fn5fd8j 2 года назад

Покажите как сделать зацикленную анимацию движения объектов горизонтально.Чтобы они сами двигались слева направо. у меня получилось только по скролу сделать чтобы они двигались влево вправо. часто вижу этот эффект на лендингах в made on tilda.

@user-ef1nu6ch6q 2 года назад

таких видео 200 миллионов штук на ютубе , и в тильде есть подробная инструкция по зацикленной анимации, не ленитесь погуглите

@sardor9907 Год назад

🔥🔥🔥

@Dmitrii_M 2 года назад

Добрый день! Можете разобрать прилипание к нижней границе экрана? Пробовал для моб версии, но не получилось сделать (при скролле до середины ZERO блока появляется малый элемент в виде шейпа с текстом, который прилипает к нижней границе экрана и держится там в течении 700px) - на мобильной версии Opera норм, а на Chrome получается отступ у нижней границы.

@TildaPublishing 2 года назад

Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.

@Dmitrii_M 2 года назад

@@TildaPublishing дак нет проблем. Спикер просил написать...я написал, что интересует

@Admin_OSh 5 месяцев назад

Ура! Получилось! :) А есть функции для эффектов текста? Чтобы мерцало или переливалось? Или это только на кодах?

@TildaPublishing 5 месяцев назад

Здравствуйте! Возможно вы найдете подходящий эффект в нашем учебнике по веб-анимации - tilda.education/web-animation-course

@Admin_OSh 5 месяцев назад

@@TildaPublishing спасибо!

@Anna-tc1bs Год назад

А как же Мобилка? Как там реализовать?)

@user-mo5ib4cg2o Год назад

Подскажите пожалуйста,как сделать так,чтобы при клике на фотку открывалась галерея со сладейром

@TildaPublishing Год назад

Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.

@evgeniyatolochko414 Год назад

Все супер получилось. Спасибо. А как адаптировать этот экран под мобильное устройство?

@TildaPublishing Год назад

Здравствуйте. В Zero блоке адаптивность нужно настраивать вручную для каждого типа экрана. Вы можете настроить адаптивность ,выбрав устройстве в верхнем меню.

@nadiaardis6239 Год назад

Делала всё шаг за шагом, но по итогу так не получается. Трижды делала идентичные шаги - и какая-то дребедень. Завела сайт для экспериментов и в нем добавила зеро-блок и работала, но не знаю... такая красота не выходит. могут ли форматы/размеры моего сайта и вами рекомендованных пикселей не совпадать в доп. анимации?

@TildaPublishing Год назад

Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.

@juliagrace3059 2 года назад

Спасибо! Не очень понятно, могли бы рассказывать подробнее про параметры, которые настраиваете, почему что выбираем и как это влияет

@TildaPublishing 2 года назад

Здравствуйте! Подробнее о параметрах пошаговой анимации можно прочитать в статье: help-ru.tilda.cc/zero-advanced-animation

@juliagrace3059 2 года назад

@@TildaPublishing благодарю

@Abvspace 11 месяцев назад

ВЫше написал про это, в ТП воду льют

@oksano4ka15 2 года назад

Подскажите, в моб версии будет работать?

@content6231 2 года назад

Нужно в настройках мобильных версий блока нажать кнопку switch on

@annabell55555 2 года назад

@@content6231 А где это находится?

@annabell55555 2 года назад

@@content6231 Или это после дублирования?

@user-pg5bo6no5b Год назад

Как сделать следующий эффект: есть несколько карточек размещенных горизонтально. Большая часть из них уходит за границы блока. И хочется, когда доскролив до них, эти карточки начали прокручиваться справа на лево. Все. И происходит это, когда колесиком мыши крутишь вниз - т е как бы продолжаешь скролить вниз, но происходит скролл справа на лево.. Воспользовался методом в этом видео, но доскрроив до нужных карточек скролл продолжается + скролятся эти самые карточки справа на лево. Т е экран не фиксируется зоне отображения карточек, как хотелось бы.

@TildaPublishing Год назад

Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.

@DameliDautkanovalancaster 2 месяца назад

как сделать так, чтобы просто был сайт со скроллом? чтобы человек крутил мышку вниз, а лендинг шел вправо, а не вниз. там будут только картинки, это портфолио. мне не нужно чтобы одна картинка из портфолио скакала по всей странице вниз, мне нужно чтобы вся страница листалась, но только скроллом вбок. наглядно показать портфолио.

@user-vf4ve6vx3k Год назад

Как анимировать группу слоёв? P.s.: группы слоёв - пропадает раздел настроек STEP BY STEP ANIMATION.

@solofut3807 2 года назад

La tuya crack

@muamarnews1402 2 года назад

Не пойму почему эта сбс-анимация не работает с шейпами? Они сдвигаются при скролле, но уменьшаются в размерах вплоть до исчезновения

@TildaPublishing 2 года назад

К сожалению, в рамках комментариев затрудняемся помочь. Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.

@user-qd5hl4zi2n Год назад

И у меня такая же проблема. Повторила все как в видео и тоже уменьшаются. Подскажите решился ли ваш вопрос? Или может вы "починили"

@Bugrovstudio Год назад

Как все это адаптировать под мобилку?

@TildaPublishing Год назад

Добрый день! Вы можете ознакомиться с инструкцией из нашего справочного центра - help-ru.tilda.cc/zero

@user-eb7xs4wj2r Год назад

А вроде же появился у Тильды какой-то новый экспериментальный горизонтальный скролл?

@TildaPublishing Год назад

Здравствуйте!Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.

@johnydes 2 года назад

а откуда 2860?

@evgeniyatolochko414 Год назад

У меня вообще 6000 получилось там. Это по количеству и ширине карточек

@user-bl8db2tu3j 2 года назад

Покажите лучше как делать такую же анимацию в мобильной версии блока

@curiousdesigner-2436 2 года назад

Нужно просто перейти в мобильную версию и нажать switch on в настройках элемента 😉

@user-bl8db2tu3j 2 года назад

@@curiousdesigner-2436 отлично, попробуем, спасибо за ответ)

@andriyanova_design 2 года назад

почему-то у меня получается диагональная анимация, а не горизонтальная((

@TildaPublishing 2 года назад

@vadikdanilov9805 Год назад

Марина, привет! Решила проблему? У меня такой же вопрос

@user-qd5hl4zi2n Год назад

И у меня по диагонали движутся

@andriyanova_design Год назад

@@user-qd5hl4zi2n я уже не помню если честно в чем была проблема, по-моему им нужно просто больше пустого места снизу оставлять

@andriyanova_design Год назад

@@vadikdanilov9805 ответила ниже, если ещё актуально. Но не факт что проблема была в этом, уже не помню просто

@kirillmaltsev5546 2 года назад

Всем привет! Уже не знаю, что делать, может кто нибудь знает, как пофиксить эту хрень? На втором блоке сайта располагается стандартный каталог товаров, с кнопкой "загрузить еще", а на четвёртом блоке присувствует анимация на скролл. И загвоздка в том, что когда нажимаешь на кнопку "загрузить еще" блок каталога расширяется вниз и тем самым ломает анимацию четвёртого блока ( анимированный элемент становится на свой последний шаг)

@TildaPublishing 2 года назад

Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.

@Adelina_88 Год назад

вСЕ ОТЛИЧНОО, но к сожалению не работает, если на фон добавить картинку или шейп в виде картинки.. карточки уезжают вниз

@TildaPublishing Год назад

Добрый день! Если у вас возникла проблема с воспроизведением анимации, напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.

@tentasaur2173 Год назад

как теперь такое в фигме показать? xd

@ANYA43077 Год назад

У меня просто текст уезжал, я подключила не только карточки, но и текст под ними. Текст уезжает просто наверх, я хз как это исправить

@TildaPublishing Год назад

Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.

@yavnd Год назад

Привет, у меня такая же ситуация, у тебя получилось её решить?

@NuBreakz1990 8 месяцев назад

Одно из самых бесполезных видео, при чем это официальный типа туториал....в комментариях вам пишут что почти ни у кого не получилось, и автор даже не поясняет логику.

@estervi Год назад

Простите, но даже сделав 1в1 как у вас, это не работает. Я потратила впустую час своего времени

@TildaPublishing Год назад

Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.