О блоге:

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

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

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

Оформление горизонтальных линий HR

Красивые варианты оформления горизонтальных линий <hr> на CSS

В данной заметке представлено 10 вариантов оформления горизонтальных линий <hr>

Все примеры не имеют классы и привязаны непосредственно к самому тегу.

Читать далее

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

Masonry сетка на CSS

Вариант каменной кладки блоков и изображений без использования JS

Эффект волны на изображении

Волна прокатывается по изображению при движении курсора мыши

Скрипт, реализующий данный эффект основан на WebGL и работает на библиотеке curtains.js

Читать далее

Перелистывание изображений при скроллинге

Красивый эффект смены изображений колесом прокрутки мыши на WebGL

Данный слайдер не имеет стрелок и точек, а перелистывание фотографий происходит при скроллинге страницы.

Работает он на библиотеках TweenMax и three.js

Читать далее

Фильтр для фотографий на WebGL

WebGLImageFilter для наложения на фотографию различных фильтров

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

Читать далее

Слайдер "До" и "После"

Скрипт на jQuery и jQuery UI для смены одной фотографии на другую

Данный слайдер накладывает две фотографии друг на друга и заменяет их движением мыши.

Читать далее

Фон с движущимися трапециями

Анимированный фон для блока или страницы с движущимися трапециями

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

Скрипт реализующий данную анимацию работает на библиотеке p5.js

Читать далее

Прелоадер, его назначение и варианты оформления

Как сделать, оформить, установить и когда нужно использовать preloader

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

В этой статье рассмотрим как его сделать, установить, оформить и самое главное, когда его нужно использовать, а когда нет.

Читать далее

Таймер из кубиков на jQuery

Интересный эффект переключения цифр вращающимися кубиками

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

Читать далее

Всплывающие пузырьки на JS

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

Движение пузырьков реагирует на движение курсора мыши

Читать далее