#23 Javascript - Lazy scroll | Вёрстка сайта визитки для начинающих | HTML, CSS, JS
Продолжаем погружение в прекрасный мир javascript! В этом видео научимся устанавливать сторонние библиотеки на примере jQuery, узнаем, что такое слушатели событий, познакомимся с циклами и условиями! Ну а к концу видео реализуем плавный скролл к секции по клику из пункта меню!
Поддержать канал:
https://www.tinkoff.ru/rm/shevchuk.vi...
https://www.donationalerts.com/r/webp...
Подписывайтесь и ставьте лайк, приятного просмотра!
Также обязательно подпишись на мой телеграм канал, там будет много общения и ответов на вопросы!
https://t.me/webpacman
------------------------------------------------
Ссылки:
Документация по scrollTo: https://developer.mozilla.org/en-US/d...
Документация по NodeList: https://developer.mozilla.org/en-US/d...
Документация по event: https://developer.mozilla.org/en-US/d...
Документация по методу preventDefault: 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:27 - Подключаем jQuery. Рассматриваем разные способы подключения
05:18 - Разбираем основы jQuery
06:55 - Тестируем методы пролистывания (скролла) к секции
10:14 - Слушатели событий в javascript
11:20 - Комментарии в javascript
11:54 - Дебаг событий клика. Ключевое слово this
14:29 - Получение атрибутов элемента
15:20 - Изучаем функции animate и scrollTop
18:09 - Динамическое получение размеров меню и отступов
19:14 - Функция parseInt
21:35 - Меняем активность пункта меню по клику
24:10 - Оптимизация выполнения функции. Условия в javascript
26:34 - Выход из функции с помощью return
27:19 - Начало реализации на нативном javascript. Получение списка элементов querySelectorAll
29:31 - Перебор элементов через forEach. Callback функции
31:30 - Добавление слушателя событий addEventListener
32:44 - Переписываем jQuery код на нативный js. Свойство classList
34:43 - Получение атрибутов элемента через getAttributes
38:00 - Получение css свойств в javascript
40:56 - Переписываем анимацию на чистый js
42:01 - Меняем активность пункта меню
42:33 - Ищем и правим ошибку плавного скролла
43:46 - css scroll-behavior smooth
44:19 - Продолжаем поиск ошибки плавного скролла
45:58 - Остановка событий по умолчанию event.preventDefault
47:33 - Заключение
Музыка:
Dead Pacman by N3rgul
Track: Home — Another Kid [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Home — Another Kid | Free Background ...
Free Download / Stream: https://alplus.io/home-another-kid
Track: Midnight — Declan DP [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Midnight — Declan DP | Free Backgroun...
Free Download / Stream: https://alplus.io/midnight-declan-dp
Track: Old Times — Next Route [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Old Times — Next Route | Free Backgro...
Free Download / Stream: https://alplus.io/old-times-next-route
------------------------------------------------
Привет! Меня зовут Виталий Шевчук, я веб-разработчик. Свой путь в разработке сайтов я начал ещё в школе, создавая форумы для игр. К текущему времени я получил много опыта в разработке сайтов и очень хочу им поделиться с вами!
------------------------------------------------
Telegram: https://t.me/webpacman
Сайт: http://vshevchuk.ru/
Теги: #js #javascript #jquery #css #css3 #html #html5