Блог телеграм канала tg.guru/sitodelАндрейhttps://teletype.in/atom/sitodeal2026-04-04T00:20:24.931Zsitodeal:pGAD8PK3s2020-07-28T22:34:16.625Z2020-07-28T22:34:38.778Z

<img src="https://teletype.in/files/18/db/18db6305-c683-437c-95c2-ac24576533de.gif">Всем привет! Я очень люблю смотреть работы в разделе "madeontilda". Наткнулся я на сайт с простой, но очень интересной анимацией перемещения объектов. Анимация достаточно простая, но показать её я просто обязан. Изучаем!)

<figure class="m_original"> <img src="https://teletype.in/files/18/db/18db6305-c683-437c-95c2-ac24576533de.gif" width="800" /> </figure> <p>Всем привет! Я очень люблю смотреть работы в разделе &quot;madeontilda&quot;. Наткнулся я на сайт с простой, но очень интересной анимацией перемещения объектов.<br /><br />Анимация достаточно простая, но показать её я просто обязан. Изучаем!)</p> <h2>Из чего состоит анимация?</h2> <p>Перемещение паллета по конвейеру. При этом сам конвейер стоит на месте и ездит только один объект.</p> <p><strong>Все материалы и идею анимашки я взял на этом сайте</strong>: <a href="http://readyrobot.ru" target="_blank">http://readyrobot.ru</a></p> <p>Для выполнения подобной анимации нам нужны будут два объекта (фон и сам объект). <strong>Я загрузил их на облако</strong>: <a href="https://cloud.mail.ru/public/22Ux/3qMs8RmtQ" target="_blank">https://cloud.mail.ru/public/22Ux/3qMs8RmtQ</a></p> <h2>Переходим к Zero Block</h2> <p>Добавляем наши объекты. Нажимаем на крестик в левом верхнем углу и жмём &quot;Add image&quot;. Добавляем два объекта, в которые мы будем грузить наши изображения.</p> <p>Открываем настройки этого изображения и загружаем сначала фон, а потом и саму коробку.</p> <figure class="m_original"> <img src="https://teletype.in/files/0b/7e/0b7ea826-3049-4240-88fb-162a20edad7e.png" width="932" /> </figure> <p><strong>Обратите внимание, что изображения должны быть пропорциональны друг другу! </strong></p> <h2>Помещаем объекты</h2> <p>Фон нужно убрать так, чтобы лента уходила за window container.</p> <figure class="m_original"> <img src="https://teletype.in/files/88/dd/88dd490f-a973-44ae-bf3f-7b7d9f96a3b5.png" width="712" /> </figure> <p>А коробки мы помещаем на стартовую позицию, на сам конвейер. Выглядит это примерно так:</p> <figure class="m_original"> <img src="https://teletype.in/files/9a/80/9a805f6b-a4a5-4854-b4e7-fc1be12d38b5.png" width="595" /> </figure> <h2>Добавляем анимацию</h2> <p>Всё готово, осталось заанимировать движение коробок по ленте конвейера. Для этого открываем Steb by step animation.</p> <p><strong>Event</strong>: element on screen</p> <p><strong>Loop</strong>: loop (зациклившем анимацию) </p> <h3>Добавляем первый шаг.</h3> <p>Вся анимация будет проходить в два шага. Коробки будут приезжать в угол и уезжать за пределы окна монитора.</p> <p>В первом шаге нас интересует настройка MOVE X/Y (перемещение по осям).</p> <p>Просто берём коробку и тащим её к месту, где она должна оказаться в конце первого шага.</p> <figure class="m_original"> <img src="https://teletype.in/files/b7/cf/b7cfc60a-0ffb-45c6-b217-6447dd595d9a.png" width="381" /> </figure> <p>Готово. Координаты <strong>MOVE X/Y</strong> выставились сами собой.</p> <h3>Добавляем второй шаг.</h3> <p>Теперь нам нужно отправить коробки за пределы монитора. Добавляем второй шаг и перетаскиваем их в подобную точку:</p> <figure class="m_original"> <img src="https://teletype.in/files/14/52/1452d69e-d413-46d1-9bac-c13954bec0c6.png" width="685" /> </figure> <p>Тестируем анимацию и сохраняем сайт.<br /><br />Готово! Анимация получилась эффектной, но при этом достаточно простой. До связи!</p> <p><strong>Ваш, сайтодел :)</strong></p> sitodeal:CMYOf8-sx2020-07-19T09:03:48.526Z2020-07-19T09:03:48.526Z

<img src="https://teletype.in/files/5c/77/5c7714f9-d309-47ee-a915-b959cef52424.png">Привет всем! У меня появился выходной (ура!). Сегодня расскажу вам о том кейсе, над которым мы работали вместе. Третья часть - вёрстка сайта. Это заключительная часть серии. Заранее задам вам вопрос. Сколько стоил такой сайт? Опрос будет после статьи. Успехов!

<figure class="m_original"> <img src="https://teletype.in/files/5c/77/5c7714f9-d309-47ee-a915-b959cef52424.png" width="959" /> </figure> <p>Привет всем! У меня появился выходной (ура!). Сегодня расскажу вам о том кейсе, над которым мы работали вместе. Третья часть - вёрстка сайта.<br /><br />Это заключительная часть серии. Заранее задам вам вопрос. Сколько стоил такой сайт? Опрос будет после статьи. Успехов!</p> <h2>Вёрстка сайта</h2> <p>После того, как дизайн был готов и согласован оставалось только перенести его на саму тильду. Проект я верстал на своём аккаунте, после чего успешно перенёс весь сайт на аккаунт заказчика (запоминаем на будущее).</p> <h2>Пройдёмся по блокам</h2> <p>Почти весь сайт сделан на Zero блоках.<br /><br /><strong>Меню:</strong></p> <figure class="m_original"> <img src="https://teletype.in/files/35/87/358711b6-46f3-406c-83e6-755b016cd480.png" width="1440" /> </figure> <p><strong>Здесь используется два меню:</strong></p> <ul> <li>Логотип (ME101)</li> <li>Гамбургер (МЕ403)</li> </ul> <p><strong>Форма:</strong></p> <figure class="m_original"> <img src="https://teletype.in/files/36/94/3694dec3-af90-4958-ae35-cf87a7003fcc.png" width="1440" /> </figure> <p>Это стандартный блок BF403. Форма сделана в виде конструктора. Заказчик предварительно знает, какие услуги интересуют клиента.</p> <h2>Оповещения в telegram </h2> <p>Так же форма с заявками была подключена к телеграму. Все заявки прилетают прямо в бота - удобно.</p> <figure class="m_original"> <img src="https://teletype.in/files/8e/93/8e93ab55-2b6d-483a-a743-9e1815e20dc1.png" width="423" /> </figure> <p><strong>О том, как подключить телегам я писал тут</strong>: <a href="https://teletype.in/@sitodeal/telegram" target="_blank">https://teletype.in/@sitodeal/telegram</a></p> <p>Сайт был адаптирован и после всех согласований передан заказчику.</p> <figure class="m_original"> <img src="https://teletype.in/files/dc/26/dc26d7a4-fb79-465f-b513-b7be6745c344.png" width="717" /> </figure> <p>Теперь ребят ждёт рекламная кампания, но это уже не мои дела :)</p> <p>Сайт можно посмотреть тут: <a href="https://crewmedia.ru" target="_blank">https://crewmedia.ru</a></p> <p>Всем успехов!</p> sitodeal:-b6MrahTC2020-07-15T12:30:15.040Z2020-07-15T12:30:15.040Z

<img src="https://teletype.in/files/52/59/52597567-785c-4559-a47b-13684d8fdad2.png">Привет-привет! Все скачали материал номер 8? Тогда сегодня приступим к реализации параллакса с горами на Tilda.

<figure class="m_original"> <img src="https://teletype.in/files/52/59/52597567-785c-4559-a47b-13684d8fdad2.png" width="1200" /> </figure> <p>Привет-привет! Все скачали материал номер 8? Тогда сегодня приступим к реализации параллакса с горами на Tilda.</p> <p>Сегодня начнём погружаться в мир сложных эффектов. Первым эффектом станет скроллинг-параллакс. Поехали!</p> <h2>Что такое скроллинг-параллакс?</h2> <figure class="m_original"> <img src="https://teletype.in/files/92/aa/92aa99fe-cbad-47e1-b590-0056a15fba85.png" width="838" /> <figcaption>Скриншот целого фона</figcaption> </figure> <blockquote>Параллакс скроллинг — это эффектная техника в веб-дизайне. Ее суть заключается в том, что элементы на заднем плане двигаются медленнее, чем те, что впереди. Чаще всего достигнуть этого можно с помощью техники, когда изображение разбивается на несколько слоев, которые прокручиваются с разной скоростью.</blockquote> <blockquote><strong>Материалы для урока были взяты от сюда</strong>: <a href="http://www.firewatchgame.com" target="_blank">http://www.firewatchgame.com</a> </blockquote> <h2>Повторяем анимацию</h2> <p><strong>Цель</strong>: сделать движение задних элементов фона медленнее, чем передних.</p> <p>Распаковываем архив с материалом, там фон уже распилен на слои.</p> <figure class="m_original"> <img src="https://teletype.in/files/71/de/71de6fa3-dbac-4a3d-9200-48aeb886c278.png" width="778" /> <figcaption>Слои</figcaption> </figure> <h2>Переходим на Tilda и открываем Zero Block</h2> <p>Само собой анимацию мы будем делать именно в нулевом блоке.</p> <p>Для начала делаем высоту блока в 1000 пикселей и ставим <strong>цвет фона: #210002</strong></p> <p>Далее добавляем изображение (нажимаем на крестик в верхнем левом углу и нажимаем Add Image).</p> <p><strong>Предисловие</strong>: подобные элементы лучше всего делать в векторе (svg) </p> <h2>Загружаем первый слой</h2> <figure class="m_original"> <img src="https://teletype.in/files/22/f9/22f9cbf8-63c9-423b-b83d-bdde01564810.png" width="1193" /> <figcaption>Первый слой</figcaption> </figure> <p>Загружаем первый слой всего изображения (layer0.png)</p> <p>Нажимаем на кнопку Original size и выравниваем изображение по центру. Так же прикрепляем его к верху контейнера (см. скриншот).</p> <h2>Анимируем слой</h2> <p>Теперь займёмся непосредственно самим параллаксом. </p> <p>Открываем настройки блока с изображением и ищем раздел <strong>&quot;Basic Animation&quot;</strong>.</p> <p>Выбираем Scroll и устанавливаем скорость прокручивания 60%.</p> <figure class="m_original"> <img src="https://teletype.in/files/40/50/4050fea7-3fa4-4ee4-9d47-db359ccb6123.png" width="317" /> <figcaption>Настройки базовой анимации объекта</figcaption> </figure> <h2>Добавляем второй слой</h2> <p>Копируем первый блок с изображением и загружаем поверх него второй слой (<strong>layer1.png</strong>).</p> <figure class="m_original"> <img src="https://teletype.in/files/f0/9f/f09f2635-bf4f-440d-b509-775cc294d5f4.png" width="1378" /> <figcaption>Второй слой</figcaption> </figure> <p>Если вы копировали первый слой, а не добавляли новое изображение - настройки анимации сохранятся.<br /><br /><strong>Внимание!</strong> <strong>У второго слоя увеличиваем скорость прокручивания до 80%!</strong></p> <p>Выравниваем второй слой с первым.</p> <h2>Повторяем подобные действия со всеми слоями</h2> <p>Теперь нам нужно сделать то же самое, только с остальными слоями. Не забываем выравнивать слои, накладывая их друг на друга.</p> <p>В настройках анимации у каждого слоя нам нужно увеличивать скорость прокрутки ровно на 20%. То есть:</p> <ul> <li>3 слой: 100%</li> <li>4 слой: 120%</li> <li>5 слой: 140%</li> <li>6 слой: 160%</li> <li>7 слой: 180%</li> <li>8 слой: 200%</li> </ul> <p>И так далее.</p> <p>Таким образом мы получаем 8 слоёв, каждый из которых наложен друг на друга. Скорость прокрутки каждого последующего слоя увеличивается на 20%</p> <figure class="m_original"> <img src="https://teletype.in/files/95/61/95618431-1935-4279-88b4-6cc4fe5394cc.png" width="1049" /> </figure> <h2>Последний штрих</h2> <p>Теперь необходимо поместить ещё один блок под все изображения.</p> <p>Добавляем фигуру (Крестик в верхнем углу, нажимаем Add shape). В настройках фигуры ставим цвет: #210002 (точно такой же, как у всего фона).</p> <p>Накладываем блок поверх последнего слоя верхнего изображения.</p> <figure class="m_original"> <img src="https://teletype.in/files/1c/dd/1cddf0e1-dd64-4942-a03a-09f752aa4563.png" width="1386" /> </figure> <p>У фигуры ставим скорость скролла 200%. Сохраняем, закрываем и публикуем.</p> <p><strong>Всем успехов! Твой, сайтодел.</strong></p> sitodeal:oXseeLih12020-07-11T11:25:02.825Z2020-07-11T11:25:02.825Z

<img src="https://teletype.in/files/24/9d/249dc5e1-4452-4977-9182-af8e0f5bf8e9.png">Всем привет! Очень уж давно мы не виделись. Нет, я не пропал, да и канал не заброшен. Просто сейчас весь в работе и заказах, о чём скоро расскажу вам более подробно. А сейчас ловите урок по шапке и подвалу сайта. Учимся устанавливать их на все страницы сразу. Полетели!

<figure class="m_original"> <img src="https://teletype.in/files/24/9d/249dc5e1-4452-4977-9182-af8e0f5bf8e9.png" width="1200" /> <figcaption>Сайтодел - Tilda уроки </figcaption> </figure> <p>Всем привет! Очень уж давно мы не виделись. Нет, я не пропал, да и канал не заброшен. Просто сейчас весь в работе и заказах, о чём скоро расскажу вам более подробно.<br /><br />А сейчас ловите урок по шапке и подвалу сайта. Учимся устанавливать их на все страницы сразу. Полетели!</p> <h2>Что такое header и footer?</h2> <p>Для начала расскажу что это вообще такое. Хэдер/футер/шапка/подвал.</p> <p><strong>Header (шапка)</strong> – это блок в верхней части страницы сайта, который виден на всех страницах сайта. Например меню, просто логотип или даже корзина.</p> <p><strong>Footer (подвал)</strong> — блок в нижней части страницы. Содержит полезную, но не первостепенную информацию. Виден на всех страницах сайта. Может содержать контактную информацию, информацию о копирайтинге и другое.</p> <figure class="m_original"> <img src="https://teletype.in/files/59/3e/593ee465-cad2-4a9d-8a67-2e254b02447d.png" width="421" /> </figure> <h2>Как назначить блок хедером или футером? </h2> <p>Скажу сразу, что у вас должно быть несколько страниц и должна быть выбрана главная страница.</p> <p><strong>В моём случае:</strong></p> <figure class="m_original"> <img src="https://teletype.in/files/1e/2e/1e2ea682-6837-4d10-9987-5cf463fa1722.png" width="1229" /> </figure> <h2>Создаём новую страничку</h2> <p>Создаём новую страницу и добавляем туда элемент, который мы хотим поместить в footer или header.</p> <p>Я покажу на примере подвала.</p> <figure class="m_original"> <img src="https://teletype.in/files/18/16/18169559-c7bc-41bb-b196-6a6b58a88d20.png" width="1437" /> </figure> <p>Я добавил блок <strong>FT301.</strong> Заморачиваться не стал. Именно этот блок я и буду устанавливать в качестве постоянного футера сайта.</p> <p>Закрываем страницу, не забываем сохранять и переходим к настройкам сайта.</p> <figure class="m_original"> <img src="https://teletype.in/files/e1/19/e1190fc6-6d89-4834-beb2-8070cae5b128.png" width="1169" /> </figure> <p>Здесь ищем раздел &quot;<strong>Шапка и подвал</strong>&quot;. Я рассказываю о подвале, поэтому открываю список пункта &quot;<strong>Назначить подвал</strong>&quot;.</p> <figure class="m_original"> <img src="https://teletype.in/files/24/f0/24f093df-a62b-4f73-b122-cf16d2aa1f39.png" width="680" /> </figure> <p>Выбираем страницу, которую мы создали и сохраняем.</p> <blockquote><strong>Внимание! Чтобы подвал отобразился на всех страницах нужно переопубликовать все страницы сайта!</strong></blockquote> <figure class="m_original"> <img src="https://teletype.in/files/d6/8a/d68a756a-d739-41ae-a7b5-578d8f0a388f.png" width="1238" /> </figure> <p>Теперь в списке страниц у нас появился футер, который мы назначили.</p> <h2>Как отключить шапку или подвал на конкретной странице?</h2> <p>Допустим, нам не хочется, чтобы шапка на странице была шаблонной и мы хотим её поменять. Как это сделать?<br /></p> <p><strong>1) </strong>Переходим в настройки страницы</p> <p><strong>2)</strong> Нажимаем на вкладку &quot; Дополнительно&quot;</p> <p><strong>3) </strong>Ставим галочку на пункт &quot;Не использовать подвал на этой странице&quot; </p> <figure class="m_original"> <img src="https://teletype.in/files/64/91/64919262-d4c0-4188-a38c-74b80190a8f8.png" width="597" /> </figure> <p>На этом всё. С шапкой(хедером) делаем всё аналогично.</p> <hr /> <p><strong>Очень был рад вернуться к урокам, впереди много всего нового. Всем больших успехов и до скорых встреч!</strong></p> sitodeal:JaFEwGyRA2020-06-28T11:29:27.870Z2020-06-28T11:29:27.870Z

<img src="https://teletype.in/files/2e/8e/2e8eead4-e00f-4883-92a4-61c931799fe1.png">Всем привет! Выходные подходят к концу, а я всё продолжаю работать. Продолжаю рассказывать про процесс работы над реальным проектом.

<figure class="m_original"> <img src="https://teletype.in/files/2e/8e/2e8eead4-e00f-4883-92a4-61c931799fe1.png" width="957" /> </figure> <p>Всем привет! Выходные подходят к концу, а я всё продолжаю работать. Продолжаю рассказывать про процесс работы над реальным проектом.</p> <p>Вторая часть, поговорим про дизайн. Поехали!</p> <h2>Дизайн - свой среди чужих, чужой среди своих</h2> <p>Когда прототип был согласован, пришло время решать что-то с дизайном. Варианта было два:</p> <p>1) Сделать самому </p> <p>2) Заказать</p> <p>В силу своей занятости я выбрал второй вариант. Связался с дизайнером, с которым мы ранее частенько работали (у вас тоже должен быть такой человек).</p> <p>Обсудили дизайн и вместе продумали варианты анимация. Дизайн, само собой, строился исходя из готового прототипа.</p> <h3>Какие были требования?</h3> <ul> <li>Работать с модульной сеткой тильды (<a href="https://t.me/c/1236863784/64" target="_blank">https://t.me/c/1236863784/64</a>) - прикрепляю ссылку. Я уже писал про сеточки.</li> <li>Дизайн &quot;на широкую руку&quot;. Придерживаемся 12 колонок и не выходим за рамки.</li> <li>Основные цвета: #0128f1 / #f3f3f3 / #ffffff</li> <li>Предусмотреть анимацию (как мы сделали это в блоке с летающими самолётиками)</li> <li>Не делать меню (мы ограничены тильдой, поэтому меню делается сразу в ней)</li> </ul> <p>Всё остальное обсуждалось в процессе работы. За дизайн из 6 блоков дизайнер взял всего 12000 рублей, не так много, согласитесь.</p> <figure class="m_original"> <img src="https://teletype.in/files/bd/6c/bd6c72e3-f54f-4ab6-9407-e352f8bac73b.png" width="1194" /> <figcaption>Убрал колонки для наглядности.</figcaption> </figure> <p>Ещё поправка. Для меня было важно, чтобы макет был в фотошопе. В фигме и других подобных инструментах я не работаю, увы.</p> <p>Дизайн был сделан за 6 рабочих дней. Каждый блок согласовывался напрямую с заказчиком. Мобильную версию мы рисовать не стали, решил, что оптимизирую всё сразу в тильде.</p> <p>Как-то так. На следующем этапе была вёрстка сайта и копирайтинг. До скорых встреч!</p> sitodeal:MmVQqZUIg2020-06-24T11:36:26.211Z2020-06-24T11:36:26.211Z

<img src="https://teletype.in/files/28/2a/282a3837-fb28-4e17-a695-0aed83209259.png">Привет всем! 22 июня тильда сделала небольшое обновление, добавив несколько интересных блоков. Сегодня хочу показать их вам, пробежаться по настройкам. Такой вот небольшой новостной дайджест)

<figure class="m_original"> <img src="https://teletype.in/files/28/2a/282a3837-fb28-4e17-a695-0aed83209259.png" width="1200" /> </figure> <p>Привет всем! 22 июня тильда сделала небольшое обновление, добавив несколько интересных блоков.<br />Сегодня хочу показать их вам, пробежаться по настройкам. Такой вот небольшой новостной дайджест)</p> <h2><strong>CR43 - Обложка со скошенной картинкой</strong></h2> <figure class="m_original"> <img src="https://teletype.in/files/8c/ba/8cbabb3e-ff5b-4b36-9eee-0e46bcd199ee.png" width="1432" /> </figure> <p>Простой блок с новой обложкой. Выглядит неплохо. Хотя я и не любитель делать первый экран сайта стандартными средствами, но для тех, кому нужно собрать сайт на скорую руку вариант этот понравится.<br /><br /><strong>Настройки</strong>: всё то же самое, как и с другими обложками.</p> <h2><strong>FR601</strong> <strong>-</strong> <strong>Преимущества в виде галереи</strong></h2> <figure class="m_original"> <img src="https://teletype.in/files/d7/e1/d7e10ada-5a16-4a29-9055-035f1762e7c0.png" width="1430" /> </figure> <p>Крутая стандартная галерея. Изображения плавно увеличиваются, при наведении на плиточку. На каждую плитку можно привязать ссылку.</p> <p><strong>Настройки</strong>: в целом так же стандартные. Настраивается каждая плитка отдельно:</p> <figure class="m_original"> <img src="https://teletype.in/files/39/2d/392dcad5-9f76-45df-a942-9a22a416114e.png" width="679" /> </figure> <p>Можно настроить ховер анимацию плиток.</p> <h2><strong>FR602</strong> <strong>- Плитки с изображениями</strong></h2> <figure class="m_original"> <img src="https://teletype.in/files/3c/2c/3c2c8eb4-6c88-4cec-a9b0-972f9db0aae0.png" width="1440" /> </figure> <p>Плюс-минус такой же блок, как и <strong>FR601</strong>. Расположение плиток немного другое.<br /><br /><strong>Настройки</strong>: аналогичны <strong>FR601.</strong></p> <h2><strong>VD14 - Видео плейлист</strong></h2> <figure class="m_original"> <img src="https://teletype.in/files/75/0f/750ff7a5-4f8b-43fd-9e92-199a6b938533.png" width="1440" /> </figure> <p>По моему мнению самый важный блок во всём обновлении. Никаких костылей, теперь можно залить несколько видео сразу + к ним будет выводиться описание.<br /><br /><strong>Настройки</strong>: на этот блок я сделаю отдельный урок.</p> <p></p> <p>На этом всё. Обновление получилось небольшим, но радует то, что разработчики не забывают про апгрейды.<br />Всем мир!)</p> sitodeal:PBEtMmuAD2020-06-22T15:57:59.816Z2020-06-22T15:57:59.816Z

<img src="https://teletype.in/files/89/80/8980ae08-6fe5-481a-9ca4-9c2a26ab5b67.png">Привет, сайтоделы! Ждал, когда опрос наберёт больше 1000 голосов, чтобы запилить этот урок. Да, я очень люблю цифры.

<figure class="m_original"> <img src="https://teletype.in/files/89/80/8980ae08-6fe5-481a-9ca4-9c2a26ab5b67.png" width="1200" /> </figure> <p>Привет, сайтоделы! Ждал, когда опрос наберёт больше 1000 голосов, чтобы запилить этот урок. Да, я очень люблю цифры.</p> <p>Почему-то большинство решило, что самолёты на фоне - это .gif изображение, вставленное на фон. Это не совсем так. Изучайте урок, расписал всё подробно!)</p> <h2>Блок выполнен в Zero Block. </h2> <p>Покажу, как он выглядит в редакторе. Возможно кто-то уже сейчас поймёт как это сделано.</p> <figure class="m_original"> <img src="https://teletype.in/files/d7/86/d786cb6f-a3d7-4339-a3c8-c388b96b8ba2.png" width="949" /> </figure> <p>Каждый самолётик - заанимированый объект. Анимация сделана в Step by step animation.</p> <h2>Как сделать?</h2> <p>Добавляем несколько подобных объектов. Вот например мой самолёт (можете скачать его от сюда):</p> <p></p> <p></p> <figure class="m_retina"> <img src="https://teletype.in/files/7f/db/7fdb7025-0de4-4763-95fa-12b2ab187331.png" width="256" /> </figure> <p>Траектория полёта самолётиков - хаотична. </p> <h2>Открываем пошаговую анимацию для любого самолёта.</h2> <p><strong>EVENT:</strong> element on screen - действие выполняется когда объект появляется на экране.</p> <p><strong>Loop</strong>: loop - зацикливаем анимацию. Это нужно, чтобы самолёты летали постоянно, а не просто пролетели из точки А в точку Б и остановились.</p> <p>Эти настройки мы выставляем для ВСЕХ самолётов.</p> <h3>Добавляем первый шаг.</h3> <p>Тут нужно задать траекторию перемещения объекта.</p> <p><strong>Move X/Y</strong>: задаем координаты, куда должен прилететь самолёт. </p> <p>Обратите внимание, что каждый самолёт должен начинать своё передвижение и заканчивать его ЗА пределами экрана. Смотрите скрин:</p> <figure class="m_original"> <img src="https://teletype.in/files/01/78/0178ef8c-bb4c-4a8f-9aaa-c8af1d9e35de.png" width="525" /> </figure> <p>Можно просто добавить первый шаг и перетянуть самолёт в точку Б. В этом случае координаты добавятся сами.</p> <h3>Какие эффекты есть ещё?</h3> <p>Помимо простого перемещения я играл со скоростью полёта самолётов, их размерами и прозрачностью.</p> <p><strong>Duration:</strong> чем показатель меньше, тем скорость выше. И наоборот.</p> <p><strong>Opacity:</strong> показатель указывается в процентах. Процент прозрачности.</p> <p><strong>Scale:</strong> размер, так же устанавливается в процентах.<br /><br />Как-то так. Придётся прорабатывать каждый элемент и задавать каждому самолёту свою анимацию. Но результат однозначно стоит работы)</p> <p>Всем успехов!</p> sitodeal:gNYj3cOT12020-06-15T10:26:52.788Z2020-06-15T10:26:52.788Z

<img src="https://teletype.in/files/4d/2d/4d2d9a4c-e020-40b1-ae93-20ab293c7153.png">Всем привет! Я не был в сети очень долгое время и на это были свои причины. У меня на очереди два хороших жирных заказа на сайты и их попросту нужно выполнять. В этой серии статей я хочу рассказать о своём кейсе работы над реальным проектом. Вы же будете видеть всю кухню изнутри: от ТЗ до сдачи проекта. Первая часть, погнали!

<figure class="m_original"> <img src="https://teletype.in/files/4d/2d/4d2d9a4c-e020-40b1-ae93-20ab293c7153.png" width="909" /> </figure> <p>Всем привет! Я не был в сети очень долгое время и на это были свои причины. У меня на очереди два хороших жирных заказа на сайты и их попросту нужно выполнять.<br /><br />В этой серии статей я хочу рассказать о своём кейсе работы над реальным проектом. Вы же будете видеть всю кухню изнутри: от ТЗ до сдачи проекта. Первая часть, погнали!</p> <h2>Обсуждение и техническое задание </h2> <p>Я пока что не буду говорить от куда пришёл этот заказ. Начать стоило с погружения в нишу ребят - продвижение телеграм каналов и маркетинг на рынке телеграм.<br /><br />Конкурентов у них толком нет, поэтому пришлось смотреть на аналоги - обычные маркетинговые агенства.</p> <h3>Было два варианта обсуждения ТЗ: </h3> <p><strong>1)</strong> Закинуть ребятам готовый шаблон тех. задания. После его заполнения начать работу с сайтом.</p> <p><strong>2)</strong> Свободное ТЗ. Этот вариант выбрал я.<br /><br />Я попросил ребят подробно описать то, что они хотят. Максимально, насколько возможно расписать информацию о них самих, об их услугах, клиентах и так далее.</p> <p><strong>Тех.задание я получил вот в таком формате:</strong></p> <figure class="m_original"> <img src="https://teletype.in/files/86/e6/86e6d519-ba03-45ae-9938-05e72f9e0b9f.png" width="734" /> </figure> <p>Это был обычный текстовый файл, где они описали основные принципы своей работы. </p> <h2>Выбор концепции.</h2> <p>Моя задача - сделать красивый, продающий сайт, которым будут пользоваться люди. Не мало важным фактором является то, что сайт само собой должен нравится не только мне, но и самим заказчикам.</p> <figure class="m_original"> <img src="https://teletype.in/files/27/da/27da60f1-fc9b-4a93-b084-6e325df87d6d.png" width="660" /> </figure> <p>Я нашёл около 20 сайтов, сделаны на тильде и не только на тему маркетинга. Прислал их заказчикам и попросил выбрать те, которые понравятся им. </p> <p>Далее было обсуждения основных цветов, блоков которые им нравятся на тех или иных сайтов.<br /></p> <p>В итоге я узнал больше о их вкусах. Тут было не важно, какой из сайтов они выберут. Главное то, что я понял, что нравится в дизайне им. Мне же все эти сайты нужны были лишь для оценки их вкусов)</p> <h2>Прототипирование.</h2> <p>Когда все нужные мне частички были собраны, оставалось только собрать их воедино и выкатить прототип сайта.</p> <p><strong>Для начала я разделил сайт на последовательные смысловые блоки:</strong></p> <p>1) Главный блок </p> <p>2) Описание агенства</p> <p>3) Почему именно телеграм?</p> <p>4) Услуги, которые предоставляет агенство</p> <p>5) Кейсы агенства</p> <p>6) Оформление заявки</p> <p>+ могут быть промежуточные призывы к действию (например связаться с личным менеджером </p> <p><strong>Первый прототип я нарисовал на бумаге, после чего перенёс в Axure.</strong></p> <figure class="m_original"> <img src="https://teletype.in/files/c6/bd/c6bd5d37-b7b2-462a-b972-d080957f727b.png" width="1434" /> </figure> <p>Весь прототип я показывать не буду, по вашему желанию могу закинуть его в конце серии постов.<br /><br />Прототип был согласован и я приступил к вёрстке дизайна.<br /><br /></p> sitodeal:CyuCcX9mA2020-06-10T09:24:55.106Z2020-06-10T09:24:55.106Z

<img src="https://teletype.in/files/e1/a1/e1a19fcf-19b4-46ce-bdc6-4753328361d1.png">Привет всем. Не так давно мы уже говорили про установку калькулятора на сайт. Но добавляли мы тогда только ползунок с диапазоном - это совсем легко. Сегодня хочу немного усложнить механику работы, добавив несколько параметров для подсчёта сразу. Поехали!

<figure class="m_original"> <img src="https://teletype.in/files/e1/a1/e1a19fcf-19b4-46ce-bdc6-4753328361d1.png" width="1200" /> </figure> <p>Привет всем. Не так давно мы уже говорили про установку калькулятора на сайт. Но добавляли мы тогда только ползунок с диапазоном - это совсем легко.<br /><br />Сегодня хочу немного усложнить механику работы, добавив несколько параметров для подсчёта сразу. Поехали!</p> <h2>Добавляем калькулятор.</h2> <p>Напоминаю, что калькулятор собирается в блоке формы. Можно использовать блоки: <strong>BF204N, BF310N, BF311N, BF402N, BF403N и BF502N</strong>.</p> <p>Я беру блок <strong>BF204N</strong> и удаляю из него все ненужные мне поля.</p> <figure class="m_original"> <img src="https://teletype.in/files/16/dd/16dde178-fe3a-4855-97f7-30c934dd4095.png" width="1438" /> </figure> <p>После того, как поля удалены можно приступить к добавлению нужных параметров. Я хочу сделать калькулятор для расчёта стоимости сайта.</p> <blockquote><strong>Напоминаю</strong>: открываем настройки контента формы и нажимаем добавление полей для ввода! </blockquote> <p><strong>Параметры будут такими:</strong></p> <ul> <li>Тип сайта</li> <li>Количество экранов</li> <li>Сроки выполнения</li> </ul> <p>Работать мы будем с чекбоксами, ползунком и выпадающим списком.</p> <h2>1) Тип сайта</h2> <p>Добавляем новое поле для ввода и выбираем <strong>&quot;Вопрос с вариантами ответа&quot;</strong>.</p> <figure class="m_original"> <img src="https://teletype.in/files/fb/d0/fbd09edd-954d-458c-8498-95007eaa585b.png" width="684" /> </figure> <p>Указываем заголовок. Я напишу &quot;<strong>Выберите тип вашего будущего сайта</strong>:&quot;.</p> <p>И теперь самое главное. Варианты значения. Это выбор, который мы даём пользователю. <br /><br /><strong>У меня будет 3 варианта:</strong></p> <ul> <li>Лендинг</li> <li>Интернет-магазин</li> <li>Блог</li> </ul> <p>Вписываем их в нужное поле и указываем их стоимость (после знака равно). Формула +- такая:</p> <p>Лендинг=10000 (где 10000 это цена)</p> <figure class="m_original"> <img src="https://teletype.in/files/0b/e8/0be807b5-3528-4844-86ad-66b3ee5c0a55.png" width="624" /> </figure> <p><strong>Вид ответа</strong> - параметр позволяющий выбрать только один или несколько вариантов. Я сделаю только один.</p> <p><strong>Имя переменной</strong>: checkbox - запоминаем.</p> <p>В целом тут всё. Не забываем сохранять.</p> <h2>2) Ползунок - количество экранов</h2> <p>Добавляем следующее поле для ввода:</p> <figure class="m_original"> <img src="https://teletype.in/files/c6/7f/c67f17c0-a044-4996-bdcd-097f2a17ed74.png" width="703" /> </figure> <p><strong>Выбираем тип</strong>: количество (ползунок)</p> <p><strong>Заголовок</strong>: Укажите количество смысловых экранов:</p> <p><strong>Имя переменной</strong>: many</p> <figure class="m_original"> <img src="https://teletype.in/files/8b/bf/8bbf35ba-393c-4c65-b735-9a655ba468f3.png" width="650" /> </figure> <p>Указываем минимальные и максимальные значения выбора. <br /><strong>В целом, можете вернуться к этому уроку</strong>: <a href="https://teletype.in/@sitodeal/ZFk3jCXlx" target="_blank">https://teletype.in/@sitodeal/ZFk3jCXlx</a></p> <p>Там всё расписано более подробно.</p> <p> Тут всё, закрываем и сохраняем. Остаётся только выпадающий список.</p> <h2>3) Сроки выполнения - выпадающий список </h2> <p><strong>В очередной раз добавляем новое поле и выбираем новый тип</strong>: выпадающий список.</p> <p><strong>Заголовок</strong>: Как быстро нам нужно работать:</p> <p><strong>Имя переменной</strong>: list</p> <p>И теперь значения.<br />Указываем так же как в случае с галочками:</p> <p>В обычном темпе = 1</p> <p>Быстро = 2</p> <p>Очень быстро = 3 </p> <p>Это расценки на темпы работы. </p> <p>Сохраняем.</p> <h2>4) Добавляем сам калькулятор</h2> <p>О нём мы так же говорили в предыдущем уроке, но добавить его тут всё таки придётся.<br /><br /><strong>Добавляем новое поле для ввода и выбираем тип</strong>: Калькулятор. </p> <p><strong>Заголовок</strong>: Приблизительная стоимость сайта:</p> <p><strong>Имя переменной</strong>: calc </p> <p><strong>Тест перед результатом вычисления</strong>: Итог:</p> <p><strong>Текст после</strong>: руб. </p> <h3>А теперь самое главное - формула.</h3> <p>Напомню про переменные:</p> <ul> <li>list - cроки работы</li> <li>checkbox - тип сайта </li> <li>many - количество экранов</li> </ul> <p><strong>Формула расчёта: </strong></p> <p>checkbox+(many*1200)<strong>*</strong>list</p> <p>1200 это просто цена экрана взятая из головы. Вводим, сохраняем, закрываем и проверяем.</p> <figure class="m_original"> <img src="https://teletype.in/files/f5/d5/f5d50d48-28b3-4ee2-8149-f24200b06687.gif" width="800" /> </figure> sitodeal:6x-QqOAT12020-06-08T21:25:56.990Z2020-06-08T21:25:56.990Z

<img src="https://teletype.in/files/32/18/32188156-4219-47fc-9724-3aea2bec11c1.gif">Привет, сайтоделы! Соскучились? Знаю, что соскучились. Я весь в проектах, скоро получите годный рассказ про весь цикл создания сайта (про это позже).

<figure class="m_original"> <img src="https://teletype.in/files/32/18/32188156-4219-47fc-9724-3aea2bec11c1.gif" width="800" /> </figure> <p>Привет, сайтоделы! Соскучились? Знаю, что соскучились. Я весь в проектах, скоро получите годный рассказ про весь цикл создания сайта (про это позже).</p> <p>А пока, ловите годный урок анимации кнопки, при помощи пошаговой анимации.<br />Делается достаточно просто - применима почти везде. Изучайте на здоровье! </p> <h2>Добавляем два главных объекта</h2> <p>Во главе всего - правильные блоки.<br />Нам нужно добавить кнопку и подложку.</p> <figure class="m_original"> <img src="https://teletype.in/files/52/f1/52f1b439-acbf-4bc2-b817-e922b621ba05.png" width="1322" /> </figure> <p>Чтобы добавить кнопку нажимаем крестик в верхнем левом углу и выбираем &quot;<strong>add</strong> <strong>button</strong>&quot;. Подложку я сделал обычной фигурой и стилизовал её под кнопку (над дизайном подумайте сами, я не стал запариваться).</p> <p>И так. Два объекта есть. Теперь нужно их расположить в первоначальное положение.</p> <figure class="m_original"> <img src="https://teletype.in/files/b8/11/b8118a6d-c668-4615-87af-7c01fc4ff731.png" width="724" /> </figure> <p>Заметьте, что кнопка находится НАД подложкой. Ну это и логично.</p> <h2>Добавляем анимацию.</h2> <p>Теперь осталось заанимировать кнопку.<br />Мы будем работать только с объектом-кнопкой.</p> <h3><strong>Открываем пошаговую анимацию.</strong></h3> <p><strong>EVENT</strong>: on hover (анимация выполняется при наведении на объект)</p> <figure class="m_original"> <img src="https://teletype.in/files/57/04/57047481-c2f9-402a-a735-2a34ae158270.png" width="315" /> </figure> <p>Нажимаем &quot;<strong>Add step</strong>&quot;</p> <p>Добавляем первый шаг. В нём просто смещаем кнопку, чтобы сравнять её с подложкой.</p> <p><strong>MOVE X/Y</strong>: перемещение кнопки по оси Х и Y</p> <p>Ну и не забывайте про остальные параметры, которые вы можете выставить по желанию.<br /><br /><strong>Duration</strong> - скорость анимации (в секундах)</p> <p><strong>Easing</strong> - ход анимации.<br /><strong><br />Ну,</strong> как то так. На связи был сайтодел, обучайтесь) Успехов!)</p>