Guest
Всем привет😘👋 Не забываем ставить 👍 и подписываемся на канал 🛎(и смотрим тайминг ниже, если утомляют вступления😁) — впереди много интересного🔥🥳 С вами — Наталья Чистякова, UX/UI Веб-дизайнер, в этом видео разбираемся, как сместить традиционный, по умолчанию, центр анимации элемента из собственного центра в любую другую точку и улучшить, разнообразить тем самым анимацию в своих проектах — используем блок команды Аннекс (Annexx) —ANX828 с transform-origin (координаты Аннекса см.ниже)🔥 Вообще, transform-origin есть не что иное, как одно из CSS-свойств элемента, и мы вполне можем управлять им, не прибегая к Аннекс, но ребята из Аннекс сделали этот момент для нас наиболее комфортным: поставил блок, выбрал элемент, выставил координаты смещения и погнали🚀 Не забудь посмотреть ниже полезные ссылки — среди них и ссылка на transform-origin в официальной документации по CSS, вдруг тебя что заинтересует🔥 🦊Желающим задонатить после просмотра видео — к боту-помощнику 👉 ⏱Тайминг — для вашего удобства❤️ (ниже даю краткий пересказ словами): 00:00 — вступление и обоснование выбора темы 02:34 — озвучиваю тему подробно и описываю план работы 03:04 — перехожу к презентации и анализу настроек анимации по умолчанию 03:35 — блок Аннекс Anx828 и transform-origin —это и позволить нам сместить центр анимации в любую другую точку 04:16 — перехожу в зеро в стандартные настройки (вначале смотрим анимацию вращения) 05:28 — добавляю блок Аннекса ANX828 и подробно разбираю настройки — параметры сдвига, точку отсчёта сдвига 07:56 — ВАЖНО: все настройки осуществляются в процентах (%), независимо от фактических значений ширины и высоты элементов в пикселях 10:20 — смотрим результат первых манипуляций со смещением центра анимации🔥 10:45 — анимирую текстовый фрагмент — контейнер с текстом — на вращение 12:58 — смещаем центр анимации вращения квадрата из центра в ЛЕВЫЙ НИЖНИЙ УГОЛ 15:20 — переходим к анимации НА УВЕЛИЧЕНИЕ ПО СКЕЙЛУ, чтобы и центр сместить, и картинки чтобы не наезжали (ВАРИАНТ 1) 19:19 — фотки увеличиваются корректно, но между собой продолжают накладываться, поэтому у нас — План Б (ВАРИАНТ 2, то есть))) 20:57 — как при увеличении по скейлу фоток заставить и текстовые приписки к ним технично отъезжать (ссылка на обуч.видео по триггер-оффсетам будет ниже, в Полезных ссылках) 25:51 — резюме ВАРИАНТ СО СМЕЩЕНИЕМ В % В ЭЛЕМЕНТЕ — НЕ НА КРАЙ, А ВНУТРИ ЭЛЕМЕНТА 29:03 — смотрим, как наш круг начал вращаться вокруг точки внутри себя, которая не центр😁 30:00 — всё, благодарю за внимание, приглашаю в чат, подписывайтесь на канал, люблю😘 Всем спасибо за❤️🙏 ✔️Полезные ссылки: 📌 Сайт Annexx — команды, которая сделала и постоянно улучшает и пополняет комплекс модификаций, облегчающих и совершенствующих работу с Тильдой 👉 📌 Annexx в Telegram 👉 📌 Документация по transform-origin 👉 📌 Видео по триггер-оффсетам (как понять и настроить) 👉 📹Хочешь предложить свою тему для видео или давай соберём эфир вместе — пиши в ТГ (никнейм: @chistyakova_website) или в комментах к этому видео🔥 Ещё раз напоминаю о том, что это и другие полезные видео выкладываю, в том числе, в рамках нашего дизайнерского душевного чата, в котором являюсь Админом — чат Pro.дизайн 👉 Вливайтесь для человеческого и профессионального общения, а также на случай, если давно хотели закинуть какую-нибудь интересную тему, но не решались😁 — мы периодически проводим эфиры, так что у вас есть реальный шанс стать приглашённым спикером-экспертом и поделиться своими знаниями, инсайтами и компетенциями с грамотной интеллигентной и просто клёвой аудиторией🔥✨☺️, а потом взять и выложить запись своего бенефиса в соцсетях😉 — отличный инфоповод💪 Если есть вопросы ко мне: ► дизайн; ► типографика и композиция на сайте; ► анимация любого сценария и уровня сложности; ► подбор креативных идей; ► оформление документов для сайта (Политика конфиденциальности, Публичная оферта, РКН, согласие субъекта ПД); ► оформление отношений с заказчиками, разрешение спорных ситуаций, составление актов и претензий); ► любой вопрос за рамками поименованных — мои компетенции гораздо шире заявленных😉, — пишите в ЛС, разберёмся в любой ситуации🤝
