Варианты визуальных эффектов при переходе с одной страницы сайта на другую
Реализация данных эффектов основана на тех же принципах, что и прелоадеры, только анимация в этом случае показывается еще и при клике на ссылку.
Для этого мы перехватываем на JS (в примерах для библиотеки jQuery) клик по ссылке, показываем анимацию закрытия и только после этого по ней переходим.
Заголовок на прозрачном фоне, перекрывающий блок с рамкой на CSS
Текст на однородном фоне, выделенный контуром и тенью
Анимированная кнопка с мессенджером, зафиксированная внизу страницы
Решение на JavaScript для сохранения любой текстовой информации на сайте в .txt файл для скачивания
Калькулятор заглавных и строчных букв, цифр, пробелов и других символов на jQuery
Данный калькулятор может пригодиться для сайтов организаций, которые занимаются нанесением текстов на какие-либо поверхности.
Диагональная карусель фотографий управляемая движением мышки или пальца
Красивый вариант диагональной карусели для фотографий, который не требует JS-библиотек, а скрипт реализующий его занимает менее 50-ти строчек кода.
Адаптивные вертикальные вкладки на jQuery
Преимуществом данной реализации табов является их адаптивный вариант, при котором контент каждой вкладки расположен сразу за ее названием (по аналогии с аккордеоном).
Кроме этого, каждая вкладка в данном решении имеет одинаковый HTML-код, что упрощает интеграцию в любую CMS (не нужно проставлять различные ID, классы и другие атрибуты).
Шуточный пример входной страницы сайта
Шуточный пример на тему, как могут в будущем выглядеть страницы входа у сайтов, если в ближайшие годы примут еще законы о конфиденциальности, а сеошники продолжат забивать страницу формами и контактами.
Подсветка фона и рамок блоков при движении по ним курсора мыши.
Решение выполнено с использованием JS, который занимает всего несколько строчек, не требует дополнительных библиотек и применяется к блокам в любом количестве секций.
Электрический паук следующий за курсором мыши
Паук реализован на чистом JS и хорошо подойдет для оформления секции на сайтах подходящей тематики.
Смена слайдов карусели на Bootstrap 3 движением мышки или пальца
В данной теме нет кодов самой карусели и всех ее составляющих, а только скрипт, который листает слайды событиями touch... и mouse...
HTML5 плеер для аудио-отзывов или других звуковых файлов
Данный плеер относительно прост и не требует подключения дополнительных библиотек.
Данный блог посвящен разнообразной работе с сайтом и по большей своей части является моей записной книжкой, в которой я пишу о том, что использую, использовал или хотел бы использовать. В основном это про украшение контента и страниц, чем собственно, и люблю заниматься. Именно поэтому в эту книжку попадают только проверенные решения, которые я разобрал, проверил и решил применять в той или иной степени.
Все стили и скрипты, что я выкладываю тут, я стараюсь внедрить на страницу статьи, убедившись, что это решение работает, не только отдельно, но и уже на сделанном сайте. Очень часто бывает так, что на отдельной странице все хорошо и красиво, а на сайте происходят сплошные конфликты, например из-за bootstrap, стилей сайта или используемой информации. И вот тут становятся заметны все ошибки, решив которые заметка попадает на этот блог.
