Available now! Telegram Research 2025 — the year's key insights 
Логово верстальщика
Open in Telegram
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
Show more8 226
Subscribers
-524 hours
-237 days
-1430 days
Posts Archive
8 226
8 226
Новые возможности CSS - animation-timeline
Алоха товарищи!
Наверное многим тут приходилось хоть раз за свою карьеру разрабатывать анимацию которая зависит от состояния скролла. И думаю что большинство из нас делало это за счет js евента -
scroll. Метод хоть и рабочий но не сказать что самый лучший, его огромный минус в том что при скроллинге данный евент срабатывает очень часто, что как вы понимаете не очень хорошо влияет на производительность.
Так вот, есть другой способ. Эту штуку можно релизнуть за счет CSS свойства animation-timeline. Само свойство уже не новое, но вот привязать таймлайн к скроллу появилась возможность недавно.
И так немного кода:
.element {
animation-timeline: scroll(nearest x)
}
Как видим наша функция принимает 2 параметра
Параметр 1 - относительно чего считаем наш скролл:
nearest - ближайший контейнер (дефолтное значение)
root - считает скролл относительно элемента document
self - назначает сам элемент скролл контейнером
Параметр 2 - ось (x или y)
Соответственно если мы выбираем x то считаем таймлайн относительно горизонтального скролла, если y то вертикального
В целом теперь вы ознакомлены с возможностью этой новой фичи. Если захотите почитать подробнее про свойство animation-timeline то вот вам ссылка на документацию, но она на английском.
Удачи в экспериментах8 226
erid: LjN8K2eA2
Секретный интенсив для погружения в сферу фронтенд с 0!
Присоединяйся к нашему интенсиву, где собрана максимальная польза и минимум воды. Поверь, что освоить навыки фронтенд-разработчика проще, чем ты думаешь.
Всего за 4 дня ты с нуля сможешь создать свой сервис поздравительных открыток. Интенсив даст тебе чёткое осознание дальнейшего развития в веб-разработке.
Регистрация тут 👉 https://tglink.io/ef3c04777ffa
Решайся! Переходи по ссылке и присоединяйся к нашей команде!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
8 226
8 226
8 226
Хочешь поднять свой скилл? Перейти на новый грейд или подготовиться к собеседованию? Тогда присоединяйся к каналу True Frontender!
Тут ты найдешь:
- Советы, основанные на реальном опыте работы
- Рекомендации по улучшения качества твоего кода
- Фишки в
JavaScript и React, которые помогут сделать твой код чище и компактнее
- Примеры реальных задач с собеседований
- Авторские статьи про React, TypeScript, JavaScript, CSS, HTML и все что с ними связанно
Только true контент, который поможет тебе развиться как разработчику в хард и софт скиллах.
Подписывайся, пока не потерял - True Frontender 🚀8 226
8 226
Шпаргалка по работе с медиа в браузере
В данной шпаргалке представлены все основные интерфейсы и методы по работе с медиа в браузере, описываемые в следующих спецификациях:
👉 Media Capture and Streams
👉 Screen Capture
👉 Media Capture from DOM Elements
👉 MediaStream Image Capture
👉 MediaStream Recording
👉 Web Speech API
Читать...
8 226
🌐 Создайте свой первый сайт всего за час и добавьте его в портфолио
👉 На бесплатном открытом уроке «Создаем HTML-сайт за час в аналоге блокнота» от OTUS.
На вебинаре:
- сверстаем одностраничный сайт о компании или персоне;
- разберём современные подходы к созданию HTML-страниц, их оформлению и расположению элементов на экране.
Эфир будет полезен начинающим и продолжающим верстальщикам, разработчикам и тем, кто хочет попасть в IT, но еще не определился с направлением.
📅 Занятие пройдёт 6 декабря в 20:00 мск в рамках курса «Fullstack developer». После урока вы сможете продолжить обучение по специальной цене.
Для бесплатного участия регистрируйтесь прямо сейчас: https://clck.ru/36rmG2
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8KUvpM
8 226
8 226
7 дней бесплатного обучения frontend-разработке!
Организовали для тебя бесплатный интенсив по frontend-разработке с практикой и куратором.
Что будет:
1️⃣ Создание веб-сайта на HTML и CSS
Мы научим тебя создавать стильные и функциональные веб-страницы с использованием современных технологий.
2️⃣ Оживление страницы с помощью JavaScript
Узнаешь, как добавить интерактивность и динамичность в свои проекты.
3️⃣ Использование фреймворка Angular
Узнаешь, как использовать этот инструмент для создания масштабируемых и эффективных веб-приложений.
4️⃣ Подключение Backend
Мы научим тебя основам работы с Backend'ом и покажем, как развернуть проект на хостинге.
5️⃣ Советы по доработке проекта
Получишь советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества.
🔥 А главное, ты проведёшь 7 дней в компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Участвуй бесплатно
8 226
8 226
8 226
8 226
8 226
8 226
8 226
8 226
‼️Всем кодерам посвящается‼️
Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.
🌐 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
8 226
