Jump to content
Search In
  • More options...
Find results that contain...
Find results in...



#0
Guest

Твое меню


Вход

Sign In



Регистрация

Меню форума


Sirius Black

[Фича 18] Интересный переход для страниц.

Recommended Posts

1.gif.63e099659746c884247d35df4bbc0a99.gif

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

 

Открываем любимый Zero Block.

Переходим в Zero Block и создаём пустой блок. Для удобства работы я растяну рабочую область контейнера до 3000 пикселей.

Добавляем фигуру - круг.

2.thumb.png.ef1ed2a40f5721e76e0cfeb41c2e591b.png

Цвета можете выбрать сами. Я взял тёмно-серый и жёлтый. Круг растягиваем примерно до таких размеров.

Открываем пошаговую анимацию круга.

Выбираем действие: on scroll(эффект выполняется в момент прокрутки страницы)

Далее добавляем первый шаг.

Здесь нам нужно установить настройки:

DISTANCE: промежуток на котором будет выполняться анимация (я делаю 2400 пикселей)

Scale: 1000% - увеличение круга на 1000 процентов

3.png.7635ad0b146501ee7214495e67ae3ecb.png

Сохраняем и смотрим! Прикольный переход готов!

 

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Sirius Black
      Привет всем! Мы уже изучали подключение комментариев с Disqus (см. урок 17). Но тогда я не упомянул, что дискас - не единственный способ подключить комменты на сайт.
      Сегодня мы научимся подключать комментарии от социальных сетей: ВК и фейсбук. Изучайте, хороших выходных всем!
       
      Добавляем нужный блок.
      Идём в раздел "Все блоки", ищем раздел "Социальные сети" и добавляем блок SN601 - Комментарии из Facebook и вконтакте. Добавляем блок на рабочую область.

      Для начала подключим комментарии ВК.
      Оставляем блок на некоторое время и переходим на страницу VK Developers.
      Ссылочка:
      Нажимаем на кнопку "Мои приложения"

      Далее нажимаем "Создать приложение"

      Выбираем платформу "Сайт" и заполняем данные по аналогии. Нажимаем "Подключить сайт".

      Далее нам нужно взять ID приложения. Для этого переходим в настройки.

      Здесь копируем айди приложения и уходим.

      Возвращаемся на Tilda.
      После того, как у нас появилось id приложения вк, открываем настройки блока комментариев. А точнее настройки контента.

      В поле VK APP ID вводим айди, который мы взяли у приложения.

      Готово! Сохраняем, закрываем, публикуем и смотрим.

      Комментарии успешно подключились.
      Подключаем комментарии Facebook.
      Механика подключения комментов от фб точно такая же. Нужно приложение и его айди.
      Ссылочка:
      При регистрации в Facebook dev создаем приложение (фб сам принудит его создать). Вводим почту и название проекта.
      После создания мы попадем в панель, где у нас уже есть id приложения. Но это не всё.

      Переходим в настройки.
      Здесь же открываем Настройки - Основное (меню слева).
      На вашем сайте обязательно должны быть страницы с политикой конфиденциальности и пользовательским соглашением. Их адреса необходимо указать в соответствующих полях.
      Конструктор политики:
      В самом низу панели нажимаем "Добавить платформу".

      Выбираем "Веб сайт".

      Вводим адрес нашего сайта. Сохраняем изменения и копируем ID нашего приложения.
      Возвращаемся на Tilda.
      Вставляем ID приложения в поле "FACEBOOK APP ID".

      Сохраняем, закрываем и публикуем.
      Итог:

       
      Пользуйтесь и изучайте тильду. Хороших выходных и больших успехов всем!)
       
    • By Sirius Black
      Привет всем! Как часто вы видите 3D элементы на сайтах? Это выглядит очень круто, эффектно, да и посмотреть товар можно более подробно.
      На тильду такие объекты можно вставлять только через костыли. Раз вы голосовали за то, что можно больше играться с кодом - сегодня научимся это делать!
      Вставляем 3D объекты - поехали!
       
      Заходим на сайт Sketchfab
      Это сайт, где можно хранить или взять готовый 3д элемент для вашего сайта.
      Если же вы смоделировали объект сами - можно залить его сюда. Проходим быструю регистрацию.

      Ищем модель, которая вам нужна. Мне приглянулась вот такая лошадка:

      Ссылочка:
      Забираем нужный код

      Нажимаем на кнопку "Embed". Откроется ещё одно окно, в котором отобразится кусок кода, который нам нужен. Копируем его:

      Переходим на Tilda
      Открываем Tilda, создаем Zero Block, нажимаем на крестик в верхнем левом углу и выбираем "ADD HTML"
      Вставляем туда тот код, который мы взяли на Sketchfab.

      Сохраняем, закрываем и публикуем. Элемент будет работать только после того, как вы опубликуете сайт (в предпросмотре не работает).
      Как растянуть модель на 100% по ширине?
      1) Растягиваем блок HTML на 100% ширины window контейнера.

      В самом коде прописываем width="100%" - вторая строчка сверху.

      Чтобы убрать элементы интерфейса скетчфаб придётся поиграть с блоком и выводить эти элементы за края экрана.

      На этом всё, пользуйтесь! Успехов)
       
    • By Sirius Black
      Привет! Знаю, что многие ждут уроков по интернет-магазину. Скажу честно, я не успеваю писать большие уроки, в связи своей большой загруженности. Надеюсь вы не обижаетесь) Скоро увидите очень большой интересный проект от меня.
      Сегодня мы наконец-то продолжим делать интернет-магазин, а конкретно займёмся подключением модуля корзины.
      Поехали!
       
      Переходим на тильду и открываем "Все блоки"
      Во всех блоках ищем раздел "Магазин" и добавляем на экран блок ST100 - Корзина с формой заказа.

      После добавления блока на страницу появится такой блок в разделе редактирования и просто значок корзины при предпросмотре.

      Открываем основные настройки.
      Сразу нас встречает пункт "Открывать корзину после выбора товара". Если вы хотите, чтобы корзина открывалась после добавления каждого товара - оставляете галочку. Если нет - убираем.
      Стиль корзины.
      Настройки самой иконки. Их не так много.
      Размер значка корзины (я обычно ставлю стандартный.)
      Цвет иконки, цвет обводки, цвет кружка (с кол-вом товаров) и цвет самого числа кол-ва товаров. А так же тени.
      Много здесь объяснять не стоит. Для себя я поменяю цвет иконки на #047800
      Стиль полей для ввода.
      Стиль полей ввода данных при оформлении заказов.
      Тут так же немного значений: цвет текста, фона, обводка и активные параметры цветов.
      Кнопки.
      Всё те же настройки стиля кнопок, только уже внутри самой корзины.
      Расположение корзины.
      По умолчанию корзина находится в правом верхнем углу. В настройках мы можем редактировать размер отступов.
      Здесь нужно обратить внимание!

      Мы можем использовать только один вариант отступа - либо снизу, либо сверху. Иначе настройка не применится. Тут я оставлю всё таким, как есть по умолчанию.
      Дополнительные настройки.
      Этот раздел более детально регулирует настройки наполнения корзины.
      Минимальная сумма заказа (не даст оформить заказ при маленьких покупках)
      Минимальное количество продуктов для заказа;
      Количество дней хранения в корзине (после товары удалятся из корзины)
      Так же цвета текста, который выводится при ошибках и других системных уведомлениях (например: "Нахватает суммы, чтобы оформить заказ".
      Сохраняем, закрываем.
      Переходим к настройкам контента.
      По сути - корзина это обычная форма, которая дополнительно собирает данные заказа.
      Тут нас встречает приём данных из корзины.
      В прошлых уроках мы подключали и mailchimp и telegram и почтовый ящик. Так же тут будут отображаться CRM системы, если вы их подключите.

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

      Выбираем нужные поля данных, которые мы хотим получить от человека при заказе.
      Дополнительные настройки.
      Тут есть ещё несколько настроек, на которые стоит обратить внимание.
      ЗАГОЛОВОК ОКНА КОРЗИНЫ - текст отображается в самой корзине
      ТЕКСТ НАД ФОРМОЙ - текст, над формой (маленький). Может предупреждать о чём-либо.
      ТЕКСТ КНОПКИ ОФОРМЛЕНИЯ ЗАКАЗА - например "Оформить заказ."
      ТЕКСТ ПОД ФОРМОЙ
      СООБЩЕНИЕ ОБ УСПЕШНОЙ ОТПРАВКЕ ДАННЫХ - например "Заказ оформлен, наш менеджер свяжется с вами в течение 10 минут"
      АДРЕС СТРАНИЦЫ В СЛУЧАЕ УСПЕХА - переход на страницу в случае корректной отправки данных (страницу можно выбрать самому).
      На этом всё. Корзина будет работать только в том случае, если у нас есть товары странице. Ими мы займёмся в следующем уроке.
       
      Успехов!)
       
  • Recently Browsing   0 members

    No registered users viewing this page.

Важно:

Администрация форума не несет никакой ответственности за опубликованную информацию и действия пользователей.

Social Links

Facebook Group Click Here
Steam Group Click Here
Teamspeak Server Click Here
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.