3D-параллакс эффект с карточками
Блок-секция для трех карточек с трехмерным параллакс эффектом
Красивый эффект трехмерной трансформации блока при движении курсора мыши.
Футбольный мяч-прелоадер
Вращающийся по окружности футбольный мяч с флагом на CSS и SVG
Данная анимация может использоваться не только как прелоадер для страницы, но и для оформлении секции, блоков (использоваться много раз) или других элементов.
Нейронный шум
Фоновый эффект для шапки или секции с анимированным нейронным шумом
Шум реагирует на движение курсора мыши и на прокрутку страницы, а скрипт, который его реализует, не требует фреймворков и библиотек.
Туман на фотографии
Туман на фотографии, который убирается курсором мыши
Небольшой и не требующий дополнительных библиотек JS-код, который создает на фоновом изображении движущийся туман и стирает его движением курсора мыши.
3D-сцена из нескольких фото
Вариант создания трехмерной композиции из нескольких картинок наложенных на фоновое изображение
Пример имеет два варианта поворота композиции:
-
С использованием JS
Поворот сцены происходит средством движения курсора мыши -
На чистом CSS
Поворот сцены происходит средством CSS-анимации
Меню с SVG-иконкой и текстом
Горизонтальное меню с SVG-иконкой и вращающимся текстом
Каждый пункт меню имеет название, которое заменяется при наведении курсора мыши SVG-иконкой и двумя альтернативными вращающимися заголовками.
В данном меню не используется JavaScript
3D-слайдер в виде куба
Трехмерный слайдер в виде куба с использованием библиотеки Swiper
Несмотря на то, что слайдер имеет форму куба, количество слайдов в нем может быть любым.
Эффект выделения блока при наведении курсора
Плавный переход фона от блока к блоку при наведении на них курсора мыши
Фон, который перемещается от блока к блоку, имеет свой собственный элемент и соответственно оформление. Используемый для этого JS-код не требует дополнительных библиотек и относительно прост, что позволяет использовать это решение в различных вариантах оформления.
Плавающая фиксация при прокрутке
Плавная и плавающая фиксация элемента при прокрутке страницы
Решение сделано для библиотеки jQuery
