Туман на фотографии
Туман на фотографии, который убирается курсором мыши
Небольшой и не требующий дополнительных библиотек JS-код, который создает на фоновом изображении движущийся туман и стирает его движением курсора мыши.
Простые решения по работе с сайтом и его элементами
Вращающийся трехмерный куб с фотографиями
Заголовок на прозрачном фоне, перекрывающий блок с рамкой на CSS
Текст на однородном фоне, выделенный контуром и тенью
Анимированная кнопка с мессенджером, зафиксированная внизу страницы
3D-сцена из нескольких фото
Вариант создания трехмерной композиции из нескольких картинок наложенных на фоновое изображение
Пример имеет два варианта поворота композиции:
-
С использованием JS
Поворот сцены происходит средством движения курсора мыши -
На чистом CSS
Поворот сцены происходит средством CSS-анимации
Меню с SVG-иконкой и текстом
Горизонтальное меню с SVG-иконкой и вращающимся текстом
Каждый пункт меню имеет название, которое заменяется при наведении курсора мыши SVG-иконкой и двумя альтернативными вращающимися заголовками.
В данном меню не используется JavaScript
3D-слайдер в виде куба
Трехмерный слайдер в виде куба с использованием библиотеки Swiper
Несмотря на то, что слайдер имеет форму куба, количество слайдов в нем может быть любым.
Эффект выделения блока при наведении курсора
Плавный переход фона от блока к блоку при наведении на них курсора мыши
Фон, который перемещается от блока к блоку, имеет свой собственный элемент и соответственно оформление. Используемый для этого JS-код не требует дополнительных библиотек и относительно прост, что позволяет использовать это решение в различных вариантах оформления.
Плавающая фиксация при прокрутке
Плавная и плавающая фиксация элемента при прокрутке страницы
Решение сделано для библиотеки jQuery
Анимированные CSS-фоны для секций
6 вариантов анимированных фонов на CSS для секций, слайдеров или блоков
Данные фоны могут использоваться не только как самостоятельные, но и как наложенные на фото или слайдер.
Во всех примерах есть возможность изменить фото секции и прозрачность анимированного фона.
Карусель только для малых экранов
Пример подключения карусели для блоков только на мобильные экраны
Данное решение написано для библиотеки jQuery и карусели Swiper (тестировалось только на версии 11.1.3)
В примере используется сетка Bootstrap, которая на малых экранах переходит в карусель .
Анимация букв у заголовков при прокрутке страницы
Два варианта появления букв у заголовков при прокрутке страницы
В данной теме представлено два варианта появления букв у заголовков при прокрутке страницы.
Первый — это с библиотеками WOW.js и animate.css, а второй — с их альтернативой AOS.js
О блоге:
Данный блог посвящен разнообразной работе с сайтом и по большей своей части является моей записной книжкой, в которой я пишу о том, что использую, использовал или хотел бы использовать. В основном это про украшение контента и страниц, чем собственно, и люблю заниматься. Именно поэтому в эту книжку попадают только проверенные решения, которые я разобрал, проверил и решил применять в той или иной степени.
Все стили и скрипты, что я выкладываю тут, я стараюсь внедрить на страницу статьи, убедившись, что это решение работает, не только отдельно, но и уже на сделанном сайте. Очень часто бывает так, что на отдельной странице все хорошо и красиво, а на сайте происходят сплошные конфликты, например из-за bootstrap, стилей сайта или используемой информации. И вот тут становятся заметны все ошибки, решив которые заметка попадает на этот блог.