Всем привет! Я очень люблю смотреть работы в разделе "madeontilda". Наткнулся я на сайт с простой, но очень интересной анимацией перемещения объектов.

Анимация достаточно простая, но показать её я просто обязан. Изучаем!)

Из чего состоит анимация?

Перемещение паллета по конвейеру. При этом сам конвейер стоит на месте и ездит только один объект.

Все материалы и идею анимашки я взял на этом сайте: http://readyrobot.ru

Для выполнения подобной анимации нам нужны будут два объекта (фон и сам объект). Я загрузил их на облако: https://cloud.mail.ru/public/22Ux/3qMs8RmtQ

Переходим к Zero Block

Добавляем наши объекты. Нажимаем на крестик в левом верхнем углу и жмём "Add image". Добавляем два объекта, в которые мы будем грузить наши изображения.

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

Обратите внимание, что изображения должны быть пропорциональны друг другу!

Помещаем объекты

Фон нужно убрать так, чтобы лента уходила за window container.

А коробки мы помещаем на стартовую позицию, на сам конвейер. Выглядит это примерно так:

Добавляем анимацию

Всё готово, осталось заанимировать движение коробок по ленте конвейера. Для этого открываем Steb by step animation.

Event: element on screen

Loop: loop (зациклившем анимацию)

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

Вся анимация будет проходить в два шага. Коробки будут приезжать в угол и уезжать за пределы окна монитора.

В первом шаге нас интересует настройка MOVE X/Y (перемещение по осям).

Просто берём коробку и тащим её к месту, где она должна оказаться в конце первого шага.

Готово. Координаты MOVE X/Y выставились сами собой.

Добавляем второй шаг.

Теперь нам нужно отправить коробки за пределы монитора. Добавляем второй шаг и перетаскиваем их в подобную точку:

Тестируем анимацию и сохраняем сайт.

Готово! Анимация получилась эффектной, но при этом достаточно простой. До связи!

Ваш, сайтодел :)

Привет всем! У меня появился выходной (ура!). Сегодня расскажу вам о том кейсе, над которым мы работали вместе. Третья часть - вёрстка сайта.

Это заключительная часть серии. Заранее задам вам вопрос. Сколько стоил такой сайт? Опрос будет после статьи. Успехов!

Вёрстка сайта

После того, как дизайн был готов и согласован оставалось только перенести его на саму тильду. Проект я верстал на своём аккаунте, после чего успешно перенёс весь сайт на аккаунт заказчика (запоминаем на будущее).

Пройдёмся по блокам

Почти весь сайт сделан на Zero блоках.

Меню:

Здесь используется два меню:

• Логотип (ME101)
• Гамбургер (МЕ403)

Форма:

Это стандартный блок BF403. Форма сделана в виде конструктора. Заказчик предварительно знает, какие услуги интересуют клиента.

Оповещения в telegram

Так же форма с заявками была подключена к телеграму. Все заявки прилетают прямо в бота - удобно.

О том, как подключить телегам я писал тут: https://teletype.in/@sitodeal/telegram

Сайт был адаптирован и после всех согласований передан заказчику.

Теперь ребят ждёт рекламная кампания, но это уже не мои дела :)

Сайт можно посмотреть тут: https://crewmedia.ru

Всем успехов!

Привет-привет! Все скачали материал номер 8? Тогда сегодня приступим к реализации параллакса с горами на Tilda.

Сегодня начнём погружаться в мир сложных эффектов. Первым эффектом станет скроллинг-параллакс. Поехали!

Что такое скроллинг-параллакс?

Параллакс скроллинг — это эффектная техника в веб-дизайне. Ее суть заключается в том, что элементы на заднем плане двигаются медленнее, чем те, что впереди. Чаще всего достигнуть этого можно с помощью техники, когда изображение разбивается на несколько слоев, которые прокручиваются с разной скоростью.

Материалы для урока были взяты от сюда: http://www.firewatchgame.com

Повторяем анимацию

Цель: сделать движение задних элементов фона медленнее, чем передних.

Распаковываем архив с материалом, там фон уже распилен на слои.

Переходим на Tilda и открываем Zero Block

Само собой анимацию мы будем делать именно в нулевом блоке.

Для начала делаем высоту блока в 1000 пикселей и ставим цвет фона: #210002

Далее добавляем изображение (нажимаем на крестик в верхнем левом углу и нажимаем Add Image).

Предисловие: подобные элементы лучше всего делать в векторе (svg)

Загружаем первый слой

Загружаем первый слой всего изображения (layer0.png)

Нажимаем на кнопку Original size и выравниваем изображение по центру. Так же прикрепляем его к верху контейнера (см. скриншот).

Анимируем слой

Теперь займёмся непосредственно самим параллаксом.

Открываем настройки блока с изображением и ищем раздел "Basic Animation".

Выбираем Scroll и устанавливаем скорость прокручивания 60%.

Добавляем второй слой

Копируем первый блок с изображением и загружаем поверх него второй слой (layer1.png).

Если вы копировали первый слой, а не добавляли новое изображение - настройки анимации сохранятся.

Внимание! У второго слоя увеличиваем скорость прокручивания до 80%!

Выравниваем второй слой с первым.

Повторяем подобные действия со всеми слоями

Теперь нам нужно сделать то же самое, только с остальными слоями. Не забываем выравнивать слои, накладывая их друг на друга.

В настройках анимации у каждого слоя нам нужно увеличивать скорость прокрутки ровно на 20%. То есть:

• 3 слой: 100%
• 4 слой: 120%
• 5 слой: 140%
• 6 слой: 160%
• 7 слой: 180%
• 8 слой: 200%

И так далее.

Таким образом мы получаем 8 слоёв, каждый из которых наложен друг на друга. Скорость прокрутки каждого последующего слоя увеличивается на 20%

Последний штрих

Теперь необходимо поместить ещё один блок под все изображения.

Добавляем фигуру (Крестик в верхнем углу, нажимаем Add shape). В настройках фигуры ставим цвет: #210002 (точно такой же, как у всего фона).

Накладываем блок поверх последнего слоя верхнего изображения.

У фигуры ставим скорость скролла 200%. Сохраняем, закрываем и публикуем.

Всем успехов! Твой, сайтодел.

Всем привет! Очень уж давно мы не виделись. Нет, я не пропал, да и канал не заброшен. Просто сейчас весь в работе и заказах, о чём скоро расскажу вам более подробно.

А сейчас ловите урок по шапке и подвалу сайта. Учимся устанавливать их на все страницы сразу. Полетели!

Что такое header и footer?

Для начала расскажу что это вообще такое. Хэдер/футер/шапка/подвал.

Header (шапка) – это блок в верхней части страницы сайта, который виден на всех страницах сайта. Например меню, просто логотип или даже корзина.

Footer (подвал) — блок в нижней части страницы. Содержит полезную, но не первостепенную информацию. Виден на всех страницах сайта. Может содержать контактную информацию, информацию о копирайтинге и другое.

Как назначить блок хедером или футером?

Скажу сразу, что у вас должно быть несколько страниц и должна быть выбрана главная страница.

В моём случае:

Создаём новую страничку

Создаём новую страницу и добавляем туда элемент, который мы хотим поместить в footer или header.

Я покажу на примере подвала.

Я добавил блок FT301. Заморачиваться не стал. Именно этот блок я и буду устанавливать в качестве постоянного футера сайта.

Закрываем страницу, не забываем сохранять и переходим к настройкам сайта.

Здесь ищем раздел "Шапка и подвал". Я рассказываю о подвале, поэтому открываю список пункта "Назначить подвал".

Выбираем страницу, которую мы создали и сохраняем.

Внимание! Чтобы подвал отобразился на всех страницах нужно переопубликовать все страницы сайта!

Теперь в списке страниц у нас появился футер, который мы назначили.

Как отключить шапку или подвал на конкретной странице?

Допустим, нам не хочется, чтобы шапка на странице была шаблонной и мы хотим её поменять. Как это сделать?

1) Переходим в настройки страницы

2) Нажимаем на вкладку " Дополнительно"

3) Ставим галочку на пункт "Не использовать подвал на этой странице"

На этом всё. С шапкой(хедером) делаем всё аналогично.

Очень был рад вернуться к урокам, впереди много всего нового. Всем больших успехов и до скорых встреч!

Всем привет! Выходные подходят к концу, а я всё продолжаю работать. Продолжаю рассказывать про процесс работы над реальным проектом.

Вторая часть, поговорим про дизайн. Поехали!

Дизайн - свой среди чужих, чужой среди своих

Когда прототип был согласован, пришло время решать что-то с дизайном. Варианта было два:

1) Сделать самому

2) Заказать

В силу своей занятости я выбрал второй вариант. Связался с дизайнером, с которым мы ранее частенько работали (у вас тоже должен быть такой человек).

Обсудили дизайн и вместе продумали варианты анимация. Дизайн, само собой, строился исходя из готового прототипа.

Какие были требования?

• Работать с модульной сеткой тильды (https://t.me/c/1236863784/64) - прикрепляю ссылку. Я уже писал про сеточки.
• Дизайн "на широкую руку". Придерживаемся 12 колонок и не выходим за рамки.
• Основные цвета: #0128f1 / #f3f3f3 / #ffffff
• Предусмотреть анимацию (как мы сделали это в блоке с летающими самолётиками)
• Не делать меню (мы ограничены тильдой, поэтому меню делается сразу в ней)

Всё остальное обсуждалось в процессе работы. За дизайн из 6 блоков дизайнер взял всего 12000 рублей, не так много, согласитесь.

Ещё поправка. Для меня было важно, чтобы макет был в фотошопе. В фигме и других подобных инструментах я не работаю, увы.

Дизайн был сделан за 6 рабочих дней. Каждый блок согласовывался напрямую с заказчиком. Мобильную версию мы рисовать не стали, решил, что оптимизирую всё сразу в тильде.

Как-то так. На следующем этапе была вёрстка сайта и копирайтинг. До скорых встреч!

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

CR43 - Обложка со скошенной картинкой

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

Настройки: всё то же самое, как и с другими обложками.

FR601 - Преимущества в виде галереи

Крутая стандартная галерея. Изображения плавно увеличиваются, при наведении на плиточку. На каждую плитку можно привязать ссылку.

Настройки: в целом так же стандартные. Настраивается каждая плитка отдельно:

Можно настроить ховер анимацию плиток.

FR602 - Плитки с изображениями

Плюс-минус такой же блок, как и FR601. Расположение плиток немного другое.

Настройки: аналогичны FR601.

VD14 - Видео плейлист

По моему мнению самый важный блок во всём обновлении. Никаких костылей, теперь можно залить несколько видео сразу + к ним будет выводиться описание.

Настройки: на этот блок я сделаю отдельный урок.

На этом всё. Обновление получилось небольшим, но радует то, что разработчики не забывают про апгрейды.
Всем мир!)

Привет, сайтоделы! Ждал, когда опрос наберёт больше 1000 голосов, чтобы запилить этот урок. Да, я очень люблю цифры.

Почему-то большинство решило, что самолёты на фоне - это .gif изображение, вставленное на фон. Это не совсем так. Изучайте урок, расписал всё подробно!)

Блок выполнен в Zero Block.

Покажу, как он выглядит в редакторе. Возможно кто-то уже сейчас поймёт как это сделано.

Каждый самолётик - заанимированый объект. Анимация сделана в Step by step animation.

Как сделать?

Добавляем несколько подобных объектов. Вот например мой самолёт (можете скачать его от сюда):

Траектория полёта самолётиков - хаотична.

Открываем пошаговую анимацию для любого самолёта.

EVENT: element on screen - действие выполняется когда объект появляется на экране.

Loop: loop - зацикливаем анимацию. Это нужно, чтобы самолёты летали постоянно, а не просто пролетели из точки А в точку Б и остановились.

Эти настройки мы выставляем для ВСЕХ самолётов.

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

Тут нужно задать траекторию перемещения объекта.

Move X/Y: задаем координаты, куда должен прилететь самолёт.

Обратите внимание, что каждый самолёт должен начинать своё передвижение и заканчивать его ЗА пределами экрана. Смотрите скрин:

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

Какие эффекты есть ещё?

Помимо простого перемещения я играл со скоростью полёта самолётов, их размерами и прозрачностью.

Duration: чем показатель меньше, тем скорость выше. И наоборот.

Opacity: показатель указывается в процентах. Процент прозрачности.

Scale: размер, так же устанавливается в процентах.

Как-то так. Придётся прорабатывать каждый элемент и задавать каждому самолёту свою анимацию. Но результат однозначно стоит работы)

Всем успехов!

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

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

Обсуждение и техническое задание

Я пока что не буду говорить от куда пришёл этот заказ. Начать стоило с погружения в нишу ребят - продвижение телеграм каналов и маркетинг на рынке телеграм.

Конкурентов у них толком нет, поэтому пришлось смотреть на аналоги - обычные маркетинговые агенства.

Было два варианта обсуждения ТЗ:

1) Закинуть ребятам готовый шаблон тех. задания. После его заполнения начать работу с сайтом.

2) Свободное ТЗ. Этот вариант выбрал я.

Я попросил ребят подробно описать то, что они хотят. Максимально, насколько возможно расписать информацию о них самих, об их услугах, клиентах и так далее.

Тех.задание я получил вот в таком формате:

Это был обычный текстовый файл, где они описали основные принципы своей работы.

Выбор концепции.

Моя задача - сделать красивый, продающий сайт, которым будут пользоваться люди. Не мало важным фактором является то, что сайт само собой должен нравится не только мне, но и самим заказчикам.

Я нашёл около 20 сайтов, сделаны на тильде и не только на тему маркетинга. Прислал их заказчикам и попросил выбрать те, которые понравятся им.

Далее было обсуждения основных цветов, блоков которые им нравятся на тех или иных сайтов.

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

Прототипирование.

Когда все нужные мне частички были собраны, оставалось только собрать их воедино и выкатить прототип сайта.

Для начала я разделил сайт на последовательные смысловые блоки:

1) Главный блок

2) Описание агенства

3) Почему именно телеграм?

4) Услуги, которые предоставляет агенство

5) Кейсы агенства

6) Оформление заявки

+ могут быть промежуточные призывы к действию (например связаться с личным менеджером

Первый прототип я нарисовал на бумаге, после чего перенёс в Axure.

Весь прототип я показывать не буду, по вашему желанию могу закинуть его в конце серии постов.

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

Привет всем. Не так давно мы уже говорили про установку калькулятора на сайт. Но добавляли мы тогда только ползунок с диапазоном - это совсем легко.

Сегодня хочу немного усложнить механику работы, добавив несколько параметров для подсчёта сразу. Поехали!

Добавляем калькулятор.

Напоминаю, что калькулятор собирается в блоке формы. Можно использовать блоки: BF204N, BF310N, BF311N, BF402N, BF403N и BF502N.

Я беру блок BF204N и удаляю из него все ненужные мне поля.

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

Напоминаю: открываем настройки контента формы и нажимаем добавление полей для ввода!

Параметры будут такими:

• Тип сайта
• Количество экранов
• Сроки выполнения

Работать мы будем с чекбоксами, ползунком и выпадающим списком.

1) Тип сайта

Добавляем новое поле для ввода и выбираем "Вопрос с вариантами ответа".

Указываем заголовок. Я напишу "Выберите тип вашего будущего сайта:".

И теперь самое главное. Варианты значения. Это выбор, который мы даём пользователю.

У меня будет 3 варианта:

• Лендинг
• Интернет-магазин
• Блог

Вписываем их в нужное поле и указываем их стоимость (после знака равно). Формула +- такая:

Лендинг=10000 (где 10000 это цена)

Вид ответа - параметр позволяющий выбрать только один или несколько вариантов. Я сделаю только один.

Имя переменной: checkbox - запоминаем.

В целом тут всё. Не забываем сохранять.

2) Ползунок - количество экранов

Добавляем следующее поле для ввода:

Выбираем тип: количество (ползунок)

Заголовок: Укажите количество смысловых экранов:

Имя переменной: many

Указываем минимальные и максимальные значения выбора.
В целом, можете вернуться к этому уроку: https://teletype.in/@sitodeal/ZFk3jCXlx

Там всё расписано более подробно.

Тут всё, закрываем и сохраняем. Остаётся только выпадающий список.

3) Сроки выполнения - выпадающий список

В очередной раз добавляем новое поле и выбираем новый тип: выпадающий список.

Заголовок: Как быстро нам нужно работать:

Имя переменной: list

И теперь значения.
Указываем так же как в случае с галочками:

В обычном темпе = 1

Быстро = 2

Очень быстро = 3

Это расценки на темпы работы.

Сохраняем.

4) Добавляем сам калькулятор

О нём мы так же говорили в предыдущем уроке, но добавить его тут всё таки придётся.

Добавляем новое поле для ввода и выбираем тип: Калькулятор.

Заголовок: Приблизительная стоимость сайта:

Имя переменной: calc

Тест перед результатом вычисления: Итог:

Текст после: руб.

А теперь самое главное - формула.

Напомню про переменные:

• list - cроки работы
• checkbox - тип сайта
• many - количество экранов

Формула расчёта:

checkbox+(many*1200)*list

1200 это просто цена экрана взятая из головы. Вводим, сохраняем, закрываем и проверяем.

Привет, сайтоделы! Соскучились? Знаю, что соскучились. Я весь в проектах, скоро получите годный рассказ про весь цикл создания сайта (про это позже).

А пока, ловите годный урок анимации кнопки, при помощи пошаговой анимации.
Делается достаточно просто - применима почти везде. Изучайте на здоровье!

Добавляем два главных объекта

Во главе всего - правильные блоки.
Нам нужно добавить кнопку и подложку.

Чтобы добавить кнопку нажимаем крестик в верхнем левом углу и выбираем "add button". Подложку я сделал обычной фигурой и стилизовал её под кнопку (над дизайном подумайте сами, я не стал запариваться).

И так. Два объекта есть. Теперь нужно их расположить в первоначальное положение.

Заметьте, что кнопка находится НАД подложкой. Ну это и логично.

Добавляем анимацию.

Теперь осталось заанимировать кнопку.
Мы будем работать только с объектом-кнопкой.

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

EVENT: on hover (анимация выполняется при наведении на объект)

Нажимаем "Add step"

Добавляем первый шаг. В нём просто смещаем кнопку, чтобы сравнять её с подложкой.

MOVE X/Y: перемещение кнопки по оси Х и Y

Ну и не забывайте про остальные параметры, которые вы можете выставить по желанию.

Duration - скорость анимации (в секундах)

Easing - ход анимации.

Ну, как то так. На связи был сайтодел, обучайтесь) Успехов!)