С информацией
Только заголовки

Анимированный переход между страницами

Варианты визуальных эффектов при переходе с одной страницы сайта на другую

Реализация данных эффектов основана на тех же принципах, что и прелоадеры, только анимация в этом случае показывается еще и при клике на ссылку.

Для этого мы перехватываем на JS (в примерах для библиотеки jQuery) клик по ссылке, показываем анимацию закрытия и только после этого по ней переходим.

Читать далее

QR-код для ссылки на страницу

Модальное окно с QR-кодом ссылки на текущую страницу

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

QR-код генерируется через api сервиса goqr.me, а само решение выполнено для библиотеки jQuery

Читать далее

Закладки для страниц сайта

Решение для библиотеки jQuery, позволяющее на сайте добавлять страницы в избранное.

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

Все сохраненные закладки хранятся в локальном хранилище браузера localStorage, что позволяет использовать это решение даже на html-сайтах

Читать далее


Ночная тема для сайта

Переключение светлой темы сайта на темную и наоборот

Кнопка, которая добавляет и запоминает к тегу <body> класс dark, которым можно перекрасить весь сайт.

Читать далее

Версия для печати без использования отдельной страницы

Два примера создания версии для печати на той же странице сайта, где находится документ

Данные решения не являются универсальными и для каждого сайта и/или страницы должны быть своими.

В данной теме рассмотрены два варианта создания версий для печати на примере страницы этого блога.

Читать далее

Блокирование элементов сайта при включенном AdBlock на CSS

Простое решение на CSS, как отображать разный контент в зависимости от включенного AdBlock

Для того чтобы попросить посетителя сайта отключить AdBlock, вовсе не обязательно мучать его всплывающими окнами, которые кстати можно им же и заблокировать, или писать хитрые скрипты (как в теме про определение показа рекламы), которые можно просто отключить.

Есть решение проще — использовать CSS.

Читать далее

Новогоднее украшение для логотипа

Оформления логотипа сайта новогодним элементом на примере лого ВКонтакте

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

Читать далее

Отложенная загрузка Яндекс карты и виджета ВК

Отложенная загрузка скриптов на примере Яндекс Карты и виджета группы ВКонтакте

Внешние скрипты, такие как карты, виджеты соц сетей, чаты, например JivoSite, или сторонние формы лучше подключать на страницу не сразу, а через определенное время и действие (в данном примере после прокрутки страницы).

В этой теме рассмотрено подключение таким образом Яндекс карты и виджета группы ВКонтакте

Читать далее

Создание сообщения об использовании куки (cookie)

Создание и установка модального окна с сообщением об использовании файлов cookies

В данной теме рассмотрено создание внизу страницы небольшого модального окна с текстом об использовании сайтом файлов cookies и двумя кнопками: закрыть окно и перейти на политику конфиденциальности.

Читать далее