Скрипт Typed.js позволяет выводить текст на экране так ,как будто его набирают по букве с клавиатуры.
JavaScript:
Javascript эффект печатания текста
Маска для ввода номеров телефона
Плагин jQuery Masked Input Plugin позволяет красиво оформить ввод телефонного номера на форму.
JavaScript библиотека для распознавания лиц
Попалась на глаза интересная JS библиотека, для распознавания лиц.
Она весит всего 2kb и может очень быстро распознать лицо человека.
Небольшой скрипт, который переадресует пользователя в случаи его бездействия на странице.
Если пользователь ничего не делает в течении N секунд, то данный скрипт редиректит его на другую страницу.
Может пригодиться, например, если нужно разлогинивать человека из панели управления.
Динамический бэкграунд (частицы/кривые)
Интересная библиотека, например, для интерактивного бэкграунда.
Сайт разработчика VincentGarreau/particles.js
Живое Demo
На сайте было древовидное меню с возможностью его раскрывать, но при переходе на нужную страницу дерево отображалось закрытым.
Ниже пример кода, который раскрывает дерево в зависимости от адреса текущей страницы.
Например, по ТЗ, нужно убрать все внешние ссылки из HTML. Данный пример показывает, как это сделать.
Как проверить, что элемент скрыт.
Иногда требуется проверить, отображается ли сейчас тот или иной блок на экране. В Jquery для этого есть специальный селектор:
if($(element).is(":visible")) { //... }
Пример кастомного чекбокса (checkbox)
Это не законченный код. Хотел написать собственную замену стандартным checkbox, накидал основу, но до конца не довел. Готовых красивых checkbox'ов много, т.ч. нет смысла делать еще одну.
Пример простого всплывающего окна (диалога) на javascript, которое закрывается при нажатии вне его
Набросок небольшого скипта для отслеживания нажатия на другой элемент на нативном javascript.
Например, нам нужно скрыть меню или закрыть диалоговое окно, когда пользователь нажимает на "свободное место".
Если сразу перейти к сути, но нам нужно проверить, что нажали не на наш блок или не на его содержимое:
const elBlock = document.getElementById(selectorBlock); const clickListener = (event) => { const target = event.target; if ( (target !== elBlock) && (!elBlock.contains(target)) ) { doClose(); } }