Постепенное изменение числа до целевого значения

В этой статье разберём частый кейс при вёрстке - постепенное/плавное увеличение числа от некоторого значения до целевого

Вариант бесконечной прокрутки постов

В данной статье сделаем так называемую бесконечную прокрутку постов(Infinite Scroll) используя Intersection Observer API, Vue.js, Axios

Градиентная прозрачность карточек, трансформация курсора при наведении

В данной статье рассмотрим как добиться градиентной прозрачности карточек и сделаем эффект трансформации курсора при наведении на карточку

Параллакс эффект на основе плагина Rellax

В данной статье рассмотрим вариант параллакс эффекта, с помощью плагина Rellax

Псевдо 3D эффект при наведении на карточку

В данной статье кратко опишу как добиться такого эффекта карточки при наведении

Вариант простой галереи изображений на Flexbox

Сделаем простейшую галерею изображений, используя Flexbox

Эффект плавного подчеркивания ссылок при наведении

В данной практической статье сделаем интересный эффект плавного подчеркивания ссылок при наведении

Эффект следования за курсором

Сделаем простой эффект следования декоративного элемента за курсором и добавим ему дополнительное поведение при определенном событии (в данном примере при наведении на ссылку)

Навигация по секциям

В данной статье посмотрим как добиться плавной навигации между секциями, а также напишем JavaScript код, который будет отслеживать активную секцию и в зависимости от этого устанавливать активный класс для соответствующего...

Изменить начертание шрифта при наведении без сдвига соседних элементов

Часто в дизайне активный элемент навигации (или при наведении) выделяют другим начертанием шрифта, например bold. В таком случае, при смене начертания, элемент становится шире и занимает больше пространства, чем раньше,...

Изменяем поведение элементов при наличии точного указателя

Предположим, нам нужно сверстать накладывающиеся друг на друга элементы, которые будут полностью отображаться при наведении. Когда у нас есть курсор, мы без проблем можем навести его на элемент, и при...

Как получить соседние элементы без jQuery

В jQuery есть метод siblings(), который позволяет получить соседние элементы. В этой статье посмотрим, как добиться того же результата на чистом JavaScript.

Как сделать маску для текстовых полей input

Частая задача при вёрстке макетов - добавление масок для текстовых полей, чтобы пользователь вводил данные именно в том формате, который необходим

Как сделать простой Preloader при загрузке страниц

Preloader при загрузке страниц чаще всего нужен в том случае, если необходимо, чтобы пользователь начал пользоваться сайтом только после загрузки всех ресурсов (изображения, javascript-код и так далее). Но нужно использовать...

Создаём и используем символьный SVG-спрайт

В данной статье посмотрим, как можно просто и быстро создавать и использовать символьные SVG-спрайты

Вариант модальных окон на JavaScript

В этой практической статье сделаем свою реализацию модальных окон с корректным отображением на любом экране

Вариант вертикального слайдера с превью на основе Swiper

Сделаем адаптивный вертикальный слайдер на основне плагина Swiper с превью, с возможностью переключать слайды, нажимая на превью или кнопками расположенными рядом, потянув за слайды или колесиком мыши. Если вам понадобится...

Плавное изменение высоты блока без jQuery

В данной практической статье рассмотрим, как плавно изменять высоту блока при отображении и скрытии, если конечная высота блока не известна

Вариaнт адаптивных вкладок (tabs) на JavaScript

Практическая статья по созданию адаптивных вкладок (tabs), используя JavaScript

Позиционирование элементов - свойство Position

Свойство position является одним из базовых CSS-свойств, которое необходимо понять при изучении вёрстки. В этой статье мы разберём его подробно на примерах.

Spotify - Cozy Lofi

Всех с наступающими праздниками!

Свойство z-index и контекст наложения

Свойство z-index c первого взгляда кажется простым, и это не далеко от истины, но чтобы полноценно разобраться в его работе, необходимо узнать о такой концепции, как контекст наложения (stacking context)...

Как отследить клик вне элемента

Хорошая практика для удобства пользователя реализовать закрытие динамического элемента не только при клике на кнопку, а также при клике вне этого элемента

Повышаем производительность при resize, scroll, ...

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