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

Падающий снег на CSS

Падающий снег для шапки, секций или фотографий

Простой способ наложения падающих снежинок на секции или фотографии всего одним элементом <div class="snowblock"></div>

Читать далее

Простые решения по работе с сайтом и его элементами

Таймер бездействия посетителя на странице

Запуск через определенное время событий при бездействии пользователя

Иногда бывает необходимо определить отсутствие каких-либо действий со стороны посетителя в течении заданного времени и выполнить свои, например:

  • показ информационных сообщений или баннеров
  • остановка работающих скриптов или анимаций
  • сброс авторизации или другой редирект
  • смена рекламных или других блоков
Читать далее

Гирлянда для шапки сайта

Анимированная гирлянда для украшения шапки сайта к Новому Году

Данный пример оформления сайта к Новому Году очень простой, занимает всего несколько строк кода и подойдет для большинства сайтов.

Читать далее

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

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

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

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

Читать далее

Калькулятор букв и других символов

Калькулятор заглавных и строчных букв, цифр, пробелов и других символов на jQuery

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

Читать далее

Диагональная карусель фотографий

Диагональная карусель фотографий управляемая движением мышки или пальца

Красивый вариант диагональной карусели для фотографий, который не требует JS-библиотек, а скрипт реализующий его занимает менее 50-ти строчек кода.

Читать далее

Вертикальные вкладки

Адаптивные вертикальные вкладки на jQuery

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

Кроме этого, каждая вкладка в данном решении имеет одинаковый HTML-код, что упрощает интеграцию в любую CMS (не нужно проставлять различные ID, классы и другие атрибуты).

Читать далее

Страница входа на сайтах будущего

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

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

Читать далее

Подсветка блоков курсором мыши

Подсветка фона и рамок блоков при движении по ним курсора мыши.

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

Читать далее

О блоге:

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

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