Вёрстка сайтов | HTML, CSS, JS
4.79K subscribers
650 photos
3 videos
4 files
1.1K links
👋 Привет, друг!

В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду.
Присоединяйся и начинай учиться!

Связь: @Tigran1963
Download Telegram
Intersection Observer

Что это такое?
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
Псевдокласс :is() в CSS

Читать 🧑‍💻

#css | #теория
👍6
Псевдокласс :where() в CSS

Читать 🧑‍💻

#css | #теория
👍41
Что вернёт typeof null в JavaScript?
Anonymous Quiz
43%
object
5%
boolean
37%
null
15%
undefined
👍3
Макет для тренировки (вкусно маркет)

Перейти к макету 🧑‍💻

#практика | #макет
Какой метод позволяет клонировать узел в DOM?
Anonymous Quiz
9%
copyNode()
48%
cloneNode()
11%
duplicateNode()
32%
cloneElement()
👍2
СSS Задача: CSS Grid

Создайте сетку, в которой три блока будут равномерно распределены по ширине. При уменьшении ширины экрана до 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 Дизайнер

#лучшеезанеделю
👍2
Макет для тренировки (miami)

Перейти к макету 🧑‍💻

#практика | #макет
Задача: Сделать кнопку "Добавить в корзину" с эффектом sticky

На странице карточки товара нужно реализовать кнопку "Добавить в корзину", которая всегда будет видна пользователю при прокрутке страницы. Кнопка должна прилипать к нижней части экрана, когда пользователь прокручивает страницу вниз, но оставаться на своём месте, когда прокрутка находится в верхней части.

Требования:
- Кнопка должна быть изначально расположена под описанием товара.
- При прокрутке вниз кнопка должна "прилипать" к нижней части окна браузера.
- Кнопка должна занимать всю ширину экрана на мобильных устройствах и быть фиксированной внизу.

Ожидаемый результат:
При скролле вниз кнопка остаётся в нижней части окна браузера.
При возвращении наверх кнопка возвращается на своё место под описанием товара.

#домашка
👍2
CSS Вопрос:

Как правильно выбрать изображения в формате 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).

Простой пример:
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}


Что делает этот код?
Убирает все анимации (animation: none).
Отключает плавные переходы (transition: none).
!important гарантирует, что правило переопределит любые другие стили.

Когда это особенно полезно?
Некоторым пользователям анимации могут вызывать дискомфорт или даже головокружение, например:
Людям с вестибулярными расстройствами (motion sickness).
Пользователям, у которых в системе включена опция «уменьшить движение».
Тем, кто просто не любит резкие анимации.

Важно: Этот медиа-запрос не отключает анимации для всех, а лишь адаптирует сайт для пользователей с особыми настройками.

#полезности
👍41👎1
Красивая анимация скролла

Смотреть на codepen 🧑‍💻

#практика
👍32
Как выбрать значение в раскрывающемся списке 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