Текстурный переход между изображениями на three.js
При наведении на картинку происходит плавный переход сквозь текстуру для показа другой картинки. При движении курсора мыши так же происходит наклон в 3d пространстве. Реализовано на three.js
Космическая стрелялка, игра на js
Срелялка на jаvascript. Вы соревнуетесь с компьютером в то, кто кого быстрее подстрелит. Осложняют ситуацию летающие астеройды.
Гибкий текст
Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.
Экран из матрицы
Анимация экрана из фильма матрица
Бесконечный CSS grid
Бесконечно перетаскиваемые изображения по всем направлении на гридах и с применением библиотеки anime.js
Спирали
Случайно генерируемые градиентные спирали на канвасе
Частицы на three.js
Частицы на three.js с возможностью настроек вариантов отображения с помощью dat-gui
Изменение формы курсора при наведении на ссылку
Эффект двойного курсора, когда за привычной стрелкой двигается кружок. Когда наводим на элемент с определенным классом, например на ссылку, то кружок плавно увеличивается в размере. Для придания плавности движения кружку используется библиотека GSAP.
Слайдер с размытыми градиентными не активными слайдами
Для эффекта размытия в местах сопряжения слайдов используется SVG c фильтром размытия
CSS фильтры для hover эффекта карточек
Hover эффект на CSS использующий фильтры для заблюривания неактивных карточек
Галактика на WebGL
Простая реализация галактики на three.js. В шейдерах используется текстура картинки звезды.
Деление клетки на канвасе, эффект для фона
Фоновый эффект для интро страницы сайта на канвасе. Митозис, деление клеток.