Matilda Design

Всем привет!

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

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

Урок по Тильде (Tilda) | Простые анимации

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

Ссылка на видео:
https://youtu.be/HZtumJ6XbFM

Всем привет! Рад поделиться новостью о запуске своего курса:
«Всё с нуля: база для уверенного старта» и «Кастомизируй и управляй: от идей до результата».

Курс состоит из двух частей для максимального удобства:

Первая часть:
Познакомишься с основами вёрстки: HTML, CSS и JS, а также их применением на практике. Освоишь работу с кодом, кастомизацию стандартных блоков, адаптивный дизайн, анимацию элементов и многое другое.

Вторая часть:
Мы углубимся в создание анимаций с использованием GSAP и ScrollTrigger. Разберём полный цикл разработки сайта с нуля. Я покажу, как нахожу решения, работаю с задачами и прохожу путь от концепции до готового проекта. В процессе будем использовать HTML, CSS, JS, GSAP и ScrollTrigger, шаг за шагом создавая анимации. На каждом этапе я буду делиться опытом, помогать и давать рекомендации.

Полная программа курсов, стоимость и запись доступны по ссылке:
https://mt-webdesign-course.ru
(Количество мест ограничено!)

Остались вопросы? Пиши сюда:
https://t.me/lSonofSaml

Слайдер (autoscale)

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

Ссылка на страницу (платный доступ):
https://mt-webdesign.ru/mt-carousel-zero

Современные кнопки

Модификация включает в себя 3 разные анимации для кнопок.

https://mt-webdesign.ru/modern-btn

Ребята, поздравляю с Новым годом!
Пусть этот год будет еще круче предыдущего — с меньшим количеством багов, большим запасом кофе и, конечно, с повышением чеков. Спасибо за этот год — мы вместе прошли через многое, и я искренне ценю каждого из вас. Желаю еще больше побед и достижений в новом году!

Урок по Тильде (Tilda) | Переход с первого экрана

В этом видео я покажу, как реализовать интересный переход со шторками на первом экране.

Ссылка на видео и исходники:
https://youtu.be/fcnsWsF8AW4
https://mt-webdesign.ru/akony

Думаете, я забыл про курс? 😏
Конечно, нет! Работа кипит, и всё идёт по плану.

А пока не пропустите — завтра новое видео на канале! 🚀
Будет интересно 😉

Меню второго уровня

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

Ссылка на страницу (платный доступ):
https://mt-webdesign.ru/submenu

Bento-шейпы

В этом видео я расскажу, как с помощью Bento-шейпов можно создать более уникальные и универсальные блоки.

Ссылка на страницу (платный доступ):
https://mt-webdesign.ru/bento

Урок по Тильде (Tilda) | Houdini border

В этом видео я расскажу, как можно создать более интересный радиус скругления углов, используя CSS Houdini.

Ссылка на видео и исходники:
https://youtu.be/GtY0eMn6GB8
https://mt-webdesign.ru/houdini-border

Анимация для заголовков - SBS (обновление)

Исправлено:
- Полностью переписан код под пошаговую анимацию;
- Для запуска анимации служит SBS;
- Два подхода в реализации: запуск анимации, при появлении текста. Запуск анимации по мере скролла;
- Автоматически делит текст на новые строки;

Ссылка на страницу (платный доступ):
https://mt-webdesign.ru/anim-tittle

Из новостей: На сайте появилась возможность выбора плеера для просмотра видеоинструкций по подключению. Теперь вы сами решаете, каким плеером пользоваться. Приятного просмотра! 😌

Темная тема для сайта (обновление)

Новая версия модификации позволит сохранить выбранную версию на сайте при переходе на другие страницы и при перезагрузке. Это особенно полезно для многостраничного сайта.

Ссылка (доступна с платным доступом)
https://mt-webdesign.ru/dark-mode

________________________________

Эффект капли (обновление)

Исправлено:
- проблема с анимацией в браузере Safari

Ссылка
https://mt-webdesign.ru/blob-effect

________________________________

Прелоадер v1.1 (обновление)

Исправлено:
- проблема с анимацией в браузере Safari

Ссылка
https://mt-webdesign.ru/preloader-11

Трансформация svg фигур.

Модификация позволяет настроить трансформацию svg фигуры по мере скролла страницы.

Ссылка на страницу (платный доступ):
https://mt-webdesign.ru/transform-svg

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

Аккордеон на Zero (обновление)

Исправлено:
- упрощена система подключения
- проблема во время скролла в браузере Сафари
- проблема с отображением изображений в режиме lazyload
- проблема с отображением слайдера в аккордеоне

Ссылка
https://mt-webdesign.ru/accordion

Модальное окно (обновление)

Исправлено:
- проблема с отображением изображений в режиме lazyload
- проблема с отображением изображений в галереи

Ссылка (доступна с платным доступом)
https://mt-webdesign.ru/modal-window

Анимация текста с помощью SBS

Модификация включает 6 различных анимаций текста, которые будут запускаться с помощью пошаговой анимации Тильды. Это позволяет контролировать запуск анимации напрямую в настройках блока, без дополнительных триггеров и прочего. Работает в автоскейле

Ссылка на страницу (платный доступ):
https://mt-webdesign.ru/sbs-text

Всем привет, важное объявление!

С недавних пор Тильда начала отказываться от использования дополнительной библиотеки jQuery. Если вы заметили нестабильность в работе некоторых модификаций, рекомендую подключить эту библиотеку самостоятельно.

Подробная инструкция:
https://mt-webdesign.ru/jquery

Свежая версия jQuery:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Урок по Тильде (Tilda) | Прилипающий футер (Sticky Footer)

В этом видео я расскажу, как можно создать прилипающий футер (sticky footer), который будет независим от контента на странице.

Ссылка на видео и исходники:
https://youtu.be/uTJU4c3Jg1w
https://mt-webdesign.ru/sticky-footer

Карусель для проектов

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

Ссылка на страницу (платный доступ):
https://mt-webdesign.ru/carousel-prj

Отдельное спасибо всем ребятам, которые предлагают интересные идеи и помогают развивать проект

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

Напоминаю, что я всегда стремлюсь предоставлять качественные решения и материалы для всех посетителей. Каждый код и каждое руководство создаются с тщательным вниманием и трудом. Я вкладываю много времени и усилий в создание уникального контента, и я настоятельно прошу вас относится с уважением к проделанному труду.

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

Кастомизация и анимация | программа курса

Разделы курса:
Вступление / Что мы будем изучать;
HTML / Погружение в структуру страницы;
CSS / Базовые знания;
CSS / Расположение;
CSS / Псевдоэлементы;
CSS / Работа с адаптивом и кроссбраузерностью;
CSS / CSS анимация;
Javascript, jQuery / Работа с Javascript:
CSS, Javascript, jQuery / Кастомизация стандартных блоков;
Javascript, jQuery, Пошаговая анимация / Кастомизируй и управляй;
GSAP / Продвинутая анимация;
Подведение итогов / Что изучать дальше.