Создаем анимации с помощью JavaScript: Используем requestAnimationFrame() для плавного рендеринга
Читать 👨💻
#js | #полезности
Читать 👨💻
#js | #полезности
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
Как валидировать формы на JavaScript
Многие начинающие верстальщики ограничиваются required, type="email" и pattern="". Это удобно, но часто недостаточно. Гибкая валидация требует JavaScript.
Простой пример валидации email
JS:
Варианты валидации
1. HTML-проверка через pattern:
2. JS: input.validity
js
3. JS: setCustomValidity()
Работает только с формами, которые потом отправляются нативно (form.submit() без preventDefault).
Дополнительные советы
Используй trim() при проверке, чтобы убрать пробелы.
Проверяй не только email, но и пароли, телефоны, checkbox'ы.
Добавляй визуальные подсказки (цвета, сообщения).
Почему это важно?
Плохая валидация = сломанные формы, негативный UX и ошибки на бэке.
Хорошая валидация:
- помогает пользователю
- экономит время
- делает интерфейс понятным
#js | #полезности
Многие начинающие верстальщики ограничиваются required, type="email" и pattern="". Это удобно, но часто недостаточно. Гибкая валидация требует JavaScript.
Простой пример валидации email
HTML:
<form id="myForm">
<input type="email" name="email" placeholder="Введите email" required />
<button type="submit">Отправить</button>
</form>
JS:
const form = document.getElementById("myForm");
form.addEventListener("submit", (e) => {
e.preventDefault();
const emailInput = form.email;
const email = emailInput.value;
if (!email.includes("@") || !email.includes(".")) {
alert("Пожалуйста, введите корректный email");
emailInput.focus();
return;
}
alert("Форма успешно отправлена");
form.reset();
});Варианты валидации
1. HTML-проверка через pattern:
<input type="text" pattern="[A-Za-z]{3,}" title="Только латиница, минимум 3 буквы">2. JS: input.validity
js
if (!emailInput.validity.valid) {
alert("Некорректный email");
}3. JS: setCustomValidity()
emailInput.setCustomValidity("Пожалуйста, проверьте email");Работает только с формами, которые потом отправляются нативно (form.submit() без preventDefault).
Дополнительные советы
Используй trim() при проверке, чтобы убрать пробелы.
Проверяй не только email, но и пароли, телефоны, checkbox'ы.
Добавляй визуальные подсказки (цвета, сообщения).
Почему это важно?
Плохая валидация = сломанные формы, негативный UX и ошибки на бэке.
Хорошая валидация:
- помогает пользователю
- экономит время
- делает интерфейс понятным
#js | #полезности