Ночная тема для сайта
Переключение светлой темы сайта на темную и наоборот
Кнопка, которая добавляет и запоминает к тегу <body> класс dark, которым можно перекрасить весь сайт.
Рейтинг со звездочками на CSS
Два варианта рейтинга со звездочками по 5-ти и 10-ти бальной шкале
Для удобства работы с рейтингом звездочки сделаны на radio кнопках с использованием SVG-иконок и на чистом CSS.
Слайдер с точками
Слайдер с точками (горизонтальными линиями) на jQuery
Простой вариант слайдера с переключением его элементов посредством нажатия на точки, расположенные по всей ширине и выглядящие как линии.
Следующая за курсором разноцветная лента
Фоновый эффект на JS с двигающейся за курсором мыши разноцветной ленты
Движение ленты происходит средствами JS в заданной области <canvas> без использования дополнительных библиотек.
Гамбургер SVG-иконки
7 вариантов гамбургер SVG-иконок с анимированным переходом
Переключение иконки по клику происходит через событие onclick, что позволяет обойтись без использования дополнительных JS-кодов
Все иконки FontAwesome 5
Полный список всех иконок FontAwesome 5.15.3 с удобной сортировкой, поиском и экспортом
Иконки можно экспортировать
- Файлом SVG
- HTML кодом (
<i class="..."></i>) - CSS кодом (
content: "...";) - CSS кодом (
background-image: url("...");) - SVG кодом (
<svg>...</svg>)
Нестандартная защита от копирования
Подмена в копируемом тексте кириллических букв на латинские.
Чтобы защитить контент от копирования, обычно блокируется правая кнопка мышки, некоторые клавиши и запрещается выделение текста. Способ хороший, но при желании все равно можно открыть HTML-код и скопировать нужную информацию.
Данный способ ничего не запрещает, а подменяет копируемый текст.
Модальное окно по таймеру
Вывод на экран модального окна через заданный промежуток времени
Несколько вариантов на JS как в нужное время запустить на странице всплывающее окно.
Фиксированный фон в секции
Простой пример фиксации фонового изображения в секции при прокрутке страницы
Данный эффект напоминает параллакс, но выполнен на CSS и всего одним классом.
Решение очень простое, но подойдет не для всех изображений, в примере на этот счет есть заметка.
