Intersection Observer
Что это такое?
Intersection Observer позволяет отслеживать пересечение элемента с областью видимости (viewport) или другим родительским элементом. Это особенно полезно для:
Ленивой загрузки изображений (lazy loading),
Реализации бесконечной прокрутки,
Анимации элементов при появлении в зоне видимости,
Фиксации элементов при прокрутке (например, кнопок или меню).
Как это работает?
Выбираем элемент для отслеживания:
Пример использования:
Допустим, нужно, чтобы кнопка "Добавить в корзину" прилипала к низу экрана, когда исчезает из зоны видимости:
Почему это лучше, чем scroll?
Эффективность: Intersection Observer работает асинхронно и не грузит основной поток.
Гибкость: Можно отслеживать любые элементы и точно настроить, как и когда срабатывают события.
Производительность: Браузер оптимизирует работу Observer, что особенно важно для мобильных устройств.
#js
Что это такое?
Intersection Observer позволяет отслеживать пересечение элемента с областью видимости (viewport) или другим родительским элементом. Это особенно полезно для:
Ленивой загрузки изображений (lazy loading),
Реализации бесконечной прокрутки,
Анимации элементов при появлении в зоне видимости,
Фиксации элементов при прокрутке (например, кнопок или меню).
Как это работает?
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Элемент виден на экране!');
} else {
console.log('Элемент исчез с экрана!');
}
});
});
Выбираем элемент для отслеживания:
const target = document.querySelector('.my-element');
observer.observe(target);
Настройка через параметры (threshold и rootMargin):
```const observer = new IntersectionObserver(callback, {
threshold: 0.5, // Элемент должен быть виден на 50%
rootMargin: '0px 0px -50px 0px' // Отступы вокруг зоны видимости
});
Пример использования:
Допустим, нужно, чтобы кнопка "Добавить в корзину" прилипала к низу экрана, когда исчезает из зоны видимости:
const button = document.querySelector('.add-to-cart');
const observer = new IntersectionObserver(([entry]) => {
if (!entry.isIntersecting) {
button.classList.add('sticky');
} else {
button.classList.remove('sticky');
}
}, { threshold: 1 });
observer.observe(button);
Почему это лучше, чем scroll?
Эффективность: Intersection Observer работает асинхронно и не грузит основной поток.
Гибкость: Можно отслеживать любые элементы и точно настроить, как и когда срабатывают события.
Производительность: Браузер оптимизирует работу Observer, что особенно важно для мобильных устройств.
#js
👍5
👍3
Какой метод позволяет клонировать узел в DOM?
Anonymous Quiz
9%
copyNode()
48%
cloneNode()
11%
duplicateNode()
32%
cloneElement()
👍2
СSS Задача: CSS Grid
Создайте сетку, в которой три блока будут равномерно распределены по ширине. При уменьшении ширины экрана до 600px блоки должны располагаться друг под другом.
Подсказка: Используйте grid-template-columns и медиа-запросы.
#домашка
Создайте сетку, в которой три блока будут равномерно распределены по ширине. При уменьшении ширины экрана до 600px блоки должны располагаться друг под другом.
Подсказка: Используйте grid-template-columns и медиа-запросы.
#домашка
👍5
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Полезные плагины для PostCSS
2. Intersection Observer
3. Псевдокласс :where() в CSS
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Полезные плагины для PostCSS
2. Intersection Observer
3. Псевдокласс :where() в CSS
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
👍2
Что делает свойство backdrop-filter в CSS?
Anonymous Quiz
9%
Делает фон элемента прозрачным
37%
Применяет фильтры к фону элемента
44%
Применяет фильтры к области позади элемента
10%
Добавляет тень за элементом
👍1
Задача: Сделать кнопку "Добавить в корзину" с эффектом sticky
На странице карточки товара нужно реализовать кнопку "Добавить в корзину", которая всегда будет видна пользователю при прокрутке страницы. Кнопка должна прилипать к нижней части экрана, когда пользователь прокручивает страницу вниз, но оставаться на своём месте, когда прокрутка находится в верхней части.
Требования:
- Кнопка должна быть изначально расположена под описанием товара.
- При прокрутке вниз кнопка должна "прилипать" к нижней части окна браузера.
- Кнопка должна занимать всю ширину экрана на мобильных устройствах и быть фиксированной внизу.
Ожидаемый результат:
При скролле вниз кнопка остаётся в нижней части окна браузера.
При возвращении наверх кнопка возвращается на своё место под описанием товара.
#домашка
На странице карточки товара нужно реализовать кнопку "Добавить в корзину", которая всегда будет видна пользователю при прокрутке страницы. Кнопка должна прилипать к нижней части экрана, когда пользователь прокручивает страницу вниз, но оставаться на своём месте, когда прокрутка находится в верхней части.
Требования:
- Кнопка должна быть изначально расположена под описанием товара.
- При прокрутке вниз кнопка должна "прилипать" к нижней части окна браузера.
- Кнопка должна занимать всю ширину экрана на мобильных устройствах и быть фиксированной внизу.
Ожидаемый результат:
При скролле вниз кнопка остаётся в нижней части окна браузера.
При возвращении наверх кнопка возвращается на своё место под описанием товара.
#домашка
👍2
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Анимация печатания на css
2. Верстка HTML-писем. Часть 1
3. Верстка HTML-писем. Часть 2
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI исследователь
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Анимация печатания на css
2. Верстка HTML-писем. Часть 1
3. Верстка HTML-писем. Часть 2
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI исследователь
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
🔥1👏1
CSS Вопрос:
Как правильно выбрать изображения в формате png?
Как правильно выбрать изображения в формате png?
Anonymous Quiz
14%
img[src&=".png"]
22%
img[src.=".png"]
20%
img[src^=".png"]
26%
img[src$=".png"]
18%
Посмотреть ответы
Медиа-запрос prefers-reduced-motion
Когда мы создаем анимации и переходы, мы редко задумываемся о людях, которым такие эффекты могут причинять дискомфорт. Однако в операционных системах (Windows, macOS, Linux, iOS, Android) есть настройка "уменьшить движение", которая позволяет пользователям отключить излишние анимации.
В CSS мы можем учитывать это предпочтение с помощью медиа-запроса prefers-reduced-motion.
Как работает prefers-reduced-motion?
Этот медиа-запрос проверяет, включил ли пользователь настройку "уменьшить движение" в своей ОС. Если она включена, браузер применит стили, указанные внутри @media (prefers-reduced-motion: reduce).
Простой пример:
Что делает этот код?
Убирает все анимации (animation: none).
Отключает плавные переходы (transition: none).
!important гарантирует, что правило переопределит любые другие стили.
Когда это особенно полезно?
Некоторым пользователям анимации могут вызывать дискомфорт или даже головокружение, например:
Людям с вестибулярными расстройствами (motion sickness).
Пользователям, у которых в системе включена опция «уменьшить движение».
Тем, кто просто не любит резкие анимации.
Важно: Этот медиа-запрос не отключает анимации для всех, а лишь адаптирует сайт для пользователей с особыми настройками.
#полезности
Когда мы создаем анимации и переходы, мы редко задумываемся о людях, которым такие эффекты могут причинять дискомфорт. Однако в операционных системах (Windows, macOS, Linux, iOS, Android) есть настройка "уменьшить движение", которая позволяет пользователям отключить излишние анимации.
В CSS мы можем учитывать это предпочтение с помощью медиа-запроса prefers-reduced-motion.
Как работает prefers-reduced-motion?
Этот медиа-запрос проверяет, включил ли пользователь настройку "уменьшить движение" в своей ОС. Если она включена, браузер применит стили, указанные внутри @media (prefers-reduced-motion: reduce).
Простой пример:
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
Что делает этот код?
Убирает все анимации (animation: none).
Отключает плавные переходы (transition: none).
!important гарантирует, что правило переопределит любые другие стили.
Когда это особенно полезно?
Некоторым пользователям анимации могут вызывать дискомфорт или даже головокружение, например:
Людям с вестибулярными расстройствами (motion sickness).
Пользователям, у которых в системе включена опция «уменьшить движение».
Тем, кто просто не любит резкие анимации.
Важно: Этот медиа-запрос не отключает анимации для всех, а лишь адаптирует сайт для пользователей с особыми настройками.
#полезности
👍4❤1👎1
Что делает HTTP/2 по сравнению с HTTP/1.1?
Anonymous Quiz
8%
Убирает необходимость в кэше браузера
31%
Ускоряет DNS-запросы
50%
Позволяет загружать несколько ресурсов одновременно по одному соединению
12%
Уменьшает размер HTML-файлов
Как выбрать значение в раскрывающемся списке select с помощью JavaScript?
#практика
var objSelect = document.getElementById("Mobility");
//Set selected
setSelectedValue(objSelect, "10");
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].text== valueToSet) {
selectObj.options[i].selected = true;
return;
}
}
}
// самый простой способ
document.getElementById("mySelect").value = "banana";
#практика
👍5