Красивая анимация зачеркивая пунктов чеклиста на css и javascript
и темная тема:
JavaScript:
Оригинальное зачеркивавшие checkbox'ов
11.11.2021
Довольно простой, но функциональный пример таймера с выводом убывающего времени.
После истечения времени стартует колбэк.
Javascript рисуем по canvas мышкой
10.09.2021
Задача: нужно рисовать линии на канвасе когда пользователь ведет курсор с зажатой левой кнопкой.
И как всегда, обычное дело оказалось не без подводных камней!
Пример того, как можно сделать неоновое сердце с анимацией на JavaScript.
Все рисование происходит на canvas с использованием webgl
Иногда нужно отреагировать на нажатие клавиш не на конкретонм элементе или в поле ввода, а на странице. Ниже приведу простенький сниппет на данную тему. Он просто отслеживает нажатие сочетания клавиш (горячих клавиш) ctrl + enter.
Иногда требуется отсортировать HTML таблицу, без обращения к серверу. Это можно спокойно сделать на простом JavaScript.
Бывает нужно обратиться из родительского окна к элементу внутри iframe и передать или получить из него какие-либо данные.
Иногда необходимо произвести как-либо действия, если размер экрана изменился, но повесить событие onresize и выполнять весь код при любом изменении - бывает накладно по ресурсам.
Учитывая, что обычно действие требуется только при пересечении некоторого рубежа / брейкпоинта (например, только если ширина окна стала меньше 972px), то ниже будет примет решения такой задачи.
Частая задача - красиво оформить поле для прикрепления файла.
Основной проблемой тут является то, что сам элемент input type="file" через CSS кастомизировать можно плохо, поэтому его просто скрывают и оформляют кнопку место его кнопку, ссылку, label...
Но и тут есть проблема, обычно, такие кнопки не отображают файл который был выбран пользователем и, иногда, посетители сайта не могут понять, прикрепился их файл или нет.
Часто бывает, что нужно обработать клик вне активного элемента (блока), например когда сделан кастомный выпадающий список.
Подобная проблема бывает когда используется всплывающее (модальное) окно, но там, чаще всего, есть слой с зтемнением, клик по которому и можно обработать.