#24 Javascript - Intersection Observer | Вёрстка сайта визитки для начинающих | HTML, CSS, JS

Опубликовано: 04 Июль 2026
на канале: Webpacman
456
13

В этом видео познакомимся с Intersection Observer API, а именно научимся отслеживать попадание в область видимости экрана наших секций и на основе этого будем менять активность пунктов меню!

Поддержать канал:
https://www.tinkoff.ru/rm/shevchuk.vi...
https://www.donationalerts.com/r/webp...

Подписывайтесь и ставьте лайк, приятного просмотра!
Также обязательно подпишись на мой телеграм канал, там будет много общения и ответов на вопросы!
https://t.me/webpacman

------------------------------------------------

Ссылки:
Документация шаблонные строки: https://developer.mozilla.org/en-US/d...
GitHub: https://github.com/webpacman/webpacma...
GitHub Pages: https://webpacman.github.io
Код урока: https://github.com/webpacman/webpacma...

Тайминг:
00:00 - Введение
00:18 - Знакомство с Intersection Observer API. Ключевое слово var
03:01 - Создание экземпляра объекта через new. Небольшое погружение в ООП
04:36 - Знакомство с typescript и понятием типизация
06:13 - Тестируем Intersection Observer
08:54 - Получаем пункт меню по id секции
09:46 - Конкатенация строк. Шаблонные строки
12:58 - Меняем активность пункта меню при пролистывании
14:52 - Создаём функции для удаления дубль кода. Синтаксический сахар
19:52 - Дорабатываем остальные пункты меню. Подбираем область видимости
22:26 - Заключение

Музыка:
Dead Pacman by N3rgul

Song: intouch - Baby Sweet [NCS Release]Music provided by NoCopyrightSoundsFree Download/Stream: http://ncs.io/babysweetWatch: http://ncs.lnk.to/babysweetAT/youtube

------------------------------------------------

Привет! Меня зовут Виталий Шевчук, я веб-разработчик. Свой путь в разработке сайтов я начал ещё в школе, создавая форумы для игр. К текущему времени я получил много опыта в разработке сайтов и очень хочу им поделиться с вами!

------------------------------------------------

Telegram: https://t.me/webpacman
Сайт: http://vshevchuk.ru/

Теги: #js #javascript #jquery #css #css3 #html #html5