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

  Рет қаралды 93,227

Tilda Publishing

Tilda Publishing

2 жыл бұрын

Один или несколько блоков с горизонтальным скроллом смотрятся нестандартно и привлекают внимание посетителей к контенту сайта. В видео рассказываем, как сделать такой эффект на Тильде за пару минут.
Подробнее о настройке пошаговой анимации 👉 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 #Тильда #конструкторсайтов

Пікірлер: 89
@kirillr1579
@kirillr1579 2 жыл бұрын
Очень круто, спасибо !
@user-cb4kf4cs9v
@user-cb4kf4cs9v 2 жыл бұрын
Спасибо! Очень поднзный ролик)
@sergeyprostobean4521
@sergeyprostobean4521 2 жыл бұрын
Классно Спасибо за урок
@coffeeint
@coffeeint 4 ай бұрын
все понятно. кайф. спасибо!
@krasikovsergey1536
@krasikovsergey1536 Жыл бұрын
По человечьи донес, молодцом. Полаю.
@lyubovkotlyarova2714
@lyubovkotlyarova2714 Жыл бұрын
Очень понятно объяснили! Просто супер! Спасибо большое!
@TildaPublishing
@TildaPublishing Жыл бұрын
Спасибо!
@Abvspace
@Abvspace Жыл бұрын
ничего себе ты вы понятливая! )
@user-yy2ew5or1k
@user-yy2ew5or1k 15 күн бұрын
спасибо, очень доходчиво) буду делать!
@Abvspace
@Abvspace Жыл бұрын
В общем, для тех кто так же не понял откуда у него 2860/-2860 взялось и кому так же поддержка тильды нихрена толкового сказать не смогла, посвящается: Коррелируйте эту цифру в зависимости от ширины снимка и их количества, во всех версиях экрана. Про высоту зероблока плюс-минус верно он сказал. P.S. для ТП Тильды - ска, так сложно было тоже самое написать мне а не заставлять считать и разбираться? И не нести чушь типа "это произвольное число"
@yuriyumanets2990
@yuriyumanets2990 4 ай бұрын
Подскажите пожалуйста, у меня только два из четырех элементов листаются, анимация скопирована, не могу понять в чем дело...
@Nikoinpsy
@Nikoinpsy 2 жыл бұрын
БЛАГОДАРЮ!!!! Два дня сидел пытался реализовать анимацию на основе знаний,которые изложены в этом видео! Никак не получалось, пока не нашел это чудо!
@Abvspace
@Abvspace Жыл бұрын
Какое? ) двойное отрицание
@rimmchik__
@rimmchik__ 2 жыл бұрын
Спасибо большое!
@Cutest365
@Cutest365 Жыл бұрын
Спасибо брат , все вышло 🔥
@user-es1uo8pm1l
@user-es1uo8pm1l 2 жыл бұрын
Спасибо!
@user-bl8db2tu3j
@user-bl8db2tu3j 2 жыл бұрын
Было бы отлично если вы выложили шаблон этого блока в открытые доступ, чтобы не мучаться с настройкой
@PINpiter
@PINpiter 2 жыл бұрын
Класс! только еще б про адаптив бы)
@MarinaYushkova
@MarinaYushkova 7 ай бұрын
какой умный 🥺🙏 я уже при сложении цифр "потерялась" )) огромное спасибо за урок
@user-mk2lt8up9c
@user-mk2lt8up9c Жыл бұрын
Спасибо!!!
@sardor9907
@sardor9907 Жыл бұрын
🔥🔥🔥
@owibka0019
@owibka0019 8 ай бұрын
Здравствуйте! Какой шрифт используете для заголовка?
@maturym_
@maturym_ Жыл бұрын
Было бы здорово, если бы объяснили, как рассчитать значения для анимации
@TildaPublishing
@TildaPublishing Жыл бұрын
Здравствуйте! К сожалению, мы не можем вам подсказать точные настройки анимации. Вы можете создать свою анимацию, используя учебник - tilda.education/web-animation-course
@Abvspace
@Abvspace Жыл бұрын
@@TildaPublishing вы про свои значения в видео объясните, откуда они взялись, все этого просят. 2860 и тд
@Admin_OSh
@Admin_OSh 6 ай бұрын
Ура! Получилось! :) А есть функции для эффектов текста? Чтобы мерцало или переливалось? Или это только на кодах?
@TildaPublishing
@TildaPublishing 6 ай бұрын
Здравствуйте! Возможно вы найдете подходящий эффект в нашем учебнике по веб-анимации - tilda.education/web-animation-course
@Admin_OSh
@Admin_OSh 6 ай бұрын
@@TildaPublishing спасибо!
@user-es9iq2rp2y
@user-es9iq2rp2y Жыл бұрын
Можно сделать анимацию с сбором маленьких деталий в одну картинку !
@evgeniyatolochko414
@evgeniyatolochko414 Жыл бұрын
Все супер получилось. Спасибо. А как адаптировать этот экран под мобильное устройство?
@TildaPublishing
@TildaPublishing Жыл бұрын
Здравствуйте. В Zero блоке адаптивность нужно настраивать вручную для каждого типа экрана. Вы можете настроить адаптивность ,выбрав устройстве в верхнем меню.
@user-jc5fn5fd8j
@user-jc5fn5fd8j 2 жыл бұрын
Покажите как сделать зацикленную анимацию движения объектов горизонтально.Чтобы они сами двигались слева направо. у меня получилось только по скролу сделать чтобы они двигались влево вправо. часто вижу этот эффект на лендингах в made on tilda.
@user-ef1nu6ch6q
@user-ef1nu6ch6q 2 жыл бұрын
таких видео 200 миллионов штук на ютубе , и в тильде есть подробная инструкция по зацикленной анимации, не ленитесь погуглите
@MrSuperRenat
@MrSuperRenat 2 жыл бұрын
А если мне надо просто сделать скролл по горизонтали, чтобы он мог крутить туда сюда когда захочет без скролла к мышке?
@user-ku3oi2ko9s
@user-ku3oi2ko9s 2 ай бұрын
Можно подробнее обьяснить, прям с линейкой показать, от какого элемента 350 px, как именно высчитали 2860 , видео для новичков же, которым надо все разжевать
@solofut3807
@solofut3807 2 жыл бұрын
La tuya crack
@juliagrace3059
@juliagrace3059 2 жыл бұрын
Спасибо! Не очень понятно, могли бы рассказывать подробнее про параметры, которые настраиваете, почему что выбираем и как это влияет
@TildaPublishing
@TildaPublishing 2 жыл бұрын
Здравствуйте! Подробнее о параметрах пошаговой анимации можно прочитать в статье: help-ru.tilda.cc/zero-advanced-animation
@juliagrace3059
@juliagrace3059 2 жыл бұрын
@@TildaPublishing благодарю
@Abvspace
@Abvspace Жыл бұрын
ВЫше написал про это, в ТП воду льют
@Dmitrii_M
@Dmitrii_M 2 жыл бұрын
Добрый день! Можете разобрать прилипание к нижней границе экрана? Пробовал для моб версии, но не получилось сделать (при скролле до середины ZERO блока появляется малый элемент в виде шейпа с текстом, который прилипает к нижней границе экрана и держится там в течении 700px) - на мобильной версии Opera норм, а на Chrome получается отступ у нижней границы.
@TildaPublishing
@TildaPublishing 2 жыл бұрын
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
@Dmitrii_M
@Dmitrii_M 2 жыл бұрын
@@TildaPublishing дак нет проблем. Спикер просил написать...я написал, что интересует
@Anna-tc1bs
@Anna-tc1bs Жыл бұрын
А как же Мобилка? Как там реализовать?)
@user-eb7xs4wj2r
@user-eb7xs4wj2r Жыл бұрын
А вроде же появился у Тильды какой-то новый экспериментальный горизонтальный скролл?
@TildaPublishing
@TildaPublishing Жыл бұрын
Здравствуйте!Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
@user-vf4ve6vx3k
@user-vf4ve6vx3k Жыл бұрын
Как анимировать группу слоёв? P.s.: группы слоёв - пропадает раздел настроек STEP BY STEP ANIMATION.
@dianisseya
@dianisseya Жыл бұрын
Если хочется пальчикам скролл не вниз а справа влево сделать?
@user-mo5ib4cg2o
@user-mo5ib4cg2o Жыл бұрын
Подскажите пожалуйста,как сделать так,чтобы при клике на фотку открывалась галерея со сладейром
@TildaPublishing
@TildaPublishing Жыл бұрын
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
@user-pg5bo6no5b
@user-pg5bo6no5b Жыл бұрын
Как сделать следующий эффект: есть несколько карточек размещенных горизонтально. Большая часть из них уходит за границы блока. И хочется, когда доскролив до них, эти карточки начали прокручиваться справа на лево. Все. И происходит это, когда колесиком мыши крутишь вниз - т е как бы продолжаешь скролить вниз, но происходит скролл справа на лево.. Воспользовался методом в этом видео, но доскрроив до нужных карточек скролл продолжается + скролятся эти самые карточки справа на лево. Т е экран не фиксируется зоне отображения карточек, как хотелось бы.
@TildaPublishing
@TildaPublishing Жыл бұрын
Добрый день! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@nadiaardis6239
@nadiaardis6239 Жыл бұрын
Делала всё шаг за шагом, но по итогу так не получается. Трижды делала идентичные шаги - и какая-то дребедень. Завела сайт для экспериментов и в нем добавила зеро-блок и работала, но не знаю... такая красота не выходит. могут ли форматы/размеры моего сайта и вами рекомендованных пикселей не совпадать в доп. анимации?
@TildaPublishing
@TildaPublishing Жыл бұрын
Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите задачу, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
@johnydes
@johnydes 2 жыл бұрын
а откуда 2860?
@evgeniyatolochko414
@evgeniyatolochko414 Жыл бұрын
У меня вообще 6000 получилось там. Это по количеству и ширине карточек
@oksano4ka15
@oksano4ka15 2 жыл бұрын
Подскажите, в моб версии будет работать?
@content6231
@content6231 2 жыл бұрын
Нужно в настройках мобильных версий блока нажать кнопку switch on
@annabell55555
@annabell55555 2 жыл бұрын
@@content6231 А где это находится?
@annabell55555
@annabell55555 2 жыл бұрын
@@content6231 Или это после дублирования?
@move2like
@move2like 27 күн бұрын
На мобильных версиях эта анимация работает так же?
@user-bl8db2tu3j
@user-bl8db2tu3j 2 жыл бұрын
Покажите лучше как делать такую же анимацию в мобильной версии блока
@curiousdesigner-2436
@curiousdesigner-2436 2 жыл бұрын
Нужно просто перейти в мобильную версию и нажать switch on в настройках элемента 😉
@user-bl8db2tu3j
@user-bl8db2tu3j 2 жыл бұрын
@@curiousdesigner-2436 отлично, попробуем, спасибо за ответ)
@muamarnews1402
@muamarnews1402 2 жыл бұрын
Не пойму почему эта сбс-анимация не работает с шейпами? Они сдвигаются при скролле, но уменьшаются в размерах вплоть до исчезновения
@TildaPublishing
@TildaPublishing 2 жыл бұрын
К сожалению, в рамках комментариев затрудняемся помочь. Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
@user-qd5hl4zi2n
@user-qd5hl4zi2n Жыл бұрын
И у меня такая же проблема. Повторила все как в видео и тоже уменьшаются. Подскажите решился ли ваш вопрос? Или может вы "починили"
@andriyanova_design
@andriyanova_design 2 жыл бұрын
почему-то у меня получается диагональная анимация, а не горизонтальная((
@TildaPublishing
@TildaPublishing 2 жыл бұрын
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
@vadikdanilov9805
@vadikdanilov9805 Жыл бұрын
Марина, привет! Решила проблему? У меня такой же вопрос
@user-qd5hl4zi2n
@user-qd5hl4zi2n Жыл бұрын
И у меня по диагонали движутся
@andriyanova_design
@andriyanova_design Жыл бұрын
@@user-qd5hl4zi2n я уже не помню если честно в чем была проблема, по-моему им нужно просто больше пустого места снизу оставлять
@andriyanova_design
@andriyanova_design Жыл бұрын
@@vadikdanilov9805 ответила ниже, если ещё актуально. Но не факт что проблема была в этом, уже не помню просто
@Bugrovstudio
@Bugrovstudio Жыл бұрын
Как все это адаптировать под мобилку?
@TildaPublishing
@TildaPublishing Жыл бұрын
Добрый день! Вы можете ознакомиться с инструкцией из нашего справочного центра - help-ru.tilda.cc/zero
@tentasaur2173
@tentasaur2173 Жыл бұрын
как теперь такое в фигме показать? xd
@Adelina_88
@Adelina_88 Жыл бұрын
вСЕ ОТЛИЧНОО, но к сожалению не работает, если на фон добавить картинку или шейп в виде картинки.. карточки уезжают вниз
@TildaPublishing
@TildaPublishing Жыл бұрын
Добрый день! Если у вас возникла проблема с воспроизведением анимации, напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@kirillmaltsev5546
@kirillmaltsev5546 2 жыл бұрын
Всем привет! Уже не знаю, что делать, может кто нибудь знает, как пофиксить эту хрень? На втором блоке сайта располагается стандартный каталог товаров, с кнопкой "загрузить еще", а на четвёртом блоке присувствует анимация на скролл. И загвоздка в том, что когда нажимаешь на кнопку "загрузить еще" блок каталога расширяется вниз и тем самым ломает анимацию четвёртого блока ( анимированный элемент становится на свой последний шаг)
@TildaPublishing
@TildaPublishing 2 жыл бұрын
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc В обращении опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@DameliDautkanovalancaster
@DameliDautkanovalancaster 3 ай бұрын
как сделать так, чтобы просто был сайт со скроллом? чтобы человек крутил мышку вниз, а лендинг шел вправо, а не вниз. там будут только картинки, это портфолио. мне не нужно чтобы одна картинка из портфолио скакала по всей странице вниз, мне нужно чтобы вся страница листалась, но только скроллом вбок. наглядно показать портфолио.
@ANYA43077
@ANYA43077 Жыл бұрын
У меня просто текст уезжал, я подключила не только карточки, но и текст под ними. Текст уезжает просто наверх, я хз как это исправить
@TildaPublishing
@TildaPublishing Жыл бұрын
Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@yavnd
@yavnd Жыл бұрын
Привет, у меня такая же ситуация, у тебя получилось её решить?
@estervi
@estervi Жыл бұрын
Простите, но даже сделав 1в1 как у вас, это не работает. Я потратила впустую час своего времени
@TildaPublishing
@TildaPublishing Жыл бұрын
Здравствуйте! Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc. В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
@NuBreakz1990
@NuBreakz1990 8 ай бұрын
Одно из самых бесполезных видео, при чем это официальный типа туториал....в комментариях вам пишут что почти ни у кого не получилось, и автор даже не поясняет логику.
Резиновая верстка сайта на Тильде
11:59
Tilda Publishing
Рет қаралды 48 М.
Боковой слайдер для телефона в Тильде
11:51
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 47 МЛН
I Built a Shelter House For myself and Сat🐱📦🏠
00:35
TooTool
Рет қаралды 35 МЛН
UFC Vegas 93 : Алмабаев VS Джонсон
02:01
Setanta Sports UFC
Рет қаралды 190 М.
Как сделать любой скролл БЕЗ КОДА в ZERO BLOCK на конструкторе TILDA
7:59
Давид Аветисян | Сайты на Тильде
Рет қаралды 37 М.
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 47 МЛН