Удобные плагины JavaScript для веб-дизайнеров
АвторAdi Purdila
Время урока1,5 часа
ЯзыкАнглийский

Поделитесь с друзьями!

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

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

Это обновленный курс, чтобы обеспечить актуальность используемых библиотек JavaScript.

Мы создали полное руководство, которое поможет вам изучить JavaScript, независимо от того, начинаете ли вы как веб-разработчик или хотите изучить более сложные темы.

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

Попутно я объясню, как использовать Headroom.js, ProgressBar.js, Cleave.js, ScrollTrigger.js, LazySizes.js, Swiper.js и Darkmode.js.

Удобные плагины JavaScript для веб-дизайнеров

Headroom.js – очень легкий плагин, который предназначен для скрытия элемента заголовка, пока он вам не понадобится. Конечно, это не единственное, для чего вы можете использовать его, но оно, безусловно, лучше всего работает при использовании в заголовке.

Позвольте мне показать вам простой пример.

Ссылки по теме

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

Ссылки по теме

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

Ссылки по теме

ScrollTrigger – это библиотека, которая переключает определенные классы на различные элементы в зависимости от позиции прокрутки окна вашего браузера. Другими словами, вы можете использовать его для добавления или удаления классов при прокрутке до определенного элемента.

Существует множество возможных вариантов использования этого, но, вероятно, один из самых популярных – запуск анимации элемента при прокрутке вниз до него. Позвольте мне показать вам пример, чтобы увидеть, как это работает.

Ссылки по теме

LazySizes – это плагин для отложенной загрузки изображений. Ленивая загрузка задерживает загрузку определенного элемента, пока этот элемент не понадобится.

Например, если у вас высокий веб-сайт и несколько изображений в самом низу, нет смысла загружать эти ресурсы, если пользователь фактически не прокручивает до дна и не хочет их видеть.

Итак, позвольте мне показать вам, как работает LazySizes и как это может повлиять на время загрузки страницы.

Ссылки по теме

Как веб-дизайнер, вы, вероятно, потратили довольно много времени на поиск хорошего слайдера – бесплатного, легкого, настраиваемого и, конечно же, работающего безупречно!

Один из моих личных фаворитов называется «Swiper». Он соответствует критериям, которые я только что упомянул, а также работает на мобильных устройствах с использованием сенсорного ввода. Он имеет аппаратно-ускоренные переходы, 3D-эффекты и даже ленивую загрузку изображений. О, и это супер просто в использовании. Позвольте мне показать вам пример.

Ссылки по теме

Как я уверен, вы заметили, что темный режим или «ночной режим» был очень популярен в последнее время. В таких приложениях, как Facebook и Instagram, есть темный режим, iOS изначально поддерживает его, в MacOS и Windows он есть, и он начинает появляться и на веб-сайтах. Фактически, недавно Facebook реализовал темный режим на своем настольном веб-сайте.

Теперь создание переключателя темного режима с нуля может занять очень много времени. В основном вам нужно переписать много CSS и изменить большинство ваших цветов. К счастью, существует ванильный JavaScript-плагин под названием Darkmode.js, который использует mix-blend-mode для мгновенного добавления темного режима на ваш сайт. Итак, давайте проверим и посмотрим, что это такое.

Ссылки по теме

Скрытый контент

  • Вы не зарегистрированы
  • Вы не вошли как пользователь
  • У Вас просрочена подписка
  • Ваша подписка не даёт вам право скачивать данный раздел