Archive of posts with category 'JavaScript'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

05/02/2021
Вариант модальных окон на JavaScript

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

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

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

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

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

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

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

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

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

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

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

11/01/2021
Как отследить клик вне элемента

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

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

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

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

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

14/12/2020
Адаптивная навигация

Адаптивная навигация

Навигация - одна из основных составляющих сайта. Она должна быть доступна и удобна для использования на любом устройстве.

09/12/2020
Плагин для отображения размеров окна браузера

Плагин для отображения размеров окна браузера

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

26/11/2020
Индикатор прокрутки на JavaScript

Индикатор прокрутки на JavaScript

С нуля напишем индикатор прокрутки страницы на чистом JavaScript.

23/11/2020
Скрываем/показываем Header при прокрутке

Скрываем/показываем Header при прокрутке

Как скрывать Header при прокрутке страницы вниз и отображать при прокрутке вверх

18/11/2020
CSS-переменные: как сделать темную тему

CSS-переменные: как сделать темную тему

Реализуем темную (и не только) тему с помощью css-переменных и немного JavaScript

29/09/2020