ScrollTrigger: SVG Text Mask — текстовая SVG-маска, которая меняется при прокрутке страницы. Подобный эффект реализован с помощью ScrollTrigger, GSAP, ScrollToPlugin3 и ZeptoJS

#GSAP #ScrollTrigger

Star rating! - звёздный рейтинг. Написан без использования JavaScript.

#css

1337 Matrix - Заставка с зеленым кодом из фильма «Матрица». Сделано на канвасе с js

#javascript

Rolling Text Hover Animation - при наведении курсора на текст происходит волнообразное скольжение вверх / вниз с изменением цвета текста

#css

Alien Rating Control - Звездный рейтинг с svg анимацией настроений вымышленного инопланетянина. Звезды представляют из себя radio элементы формы, а анимация выполнена с использованием js GreenSock

#HTML #javaskript #CSS

Parallax Effect + Text Blend Mode - Параллакс эффект при перемещениях курсора и эффект mix-blend-mode применяемый для текста

#css #html

Wordle Tag Cloud - Генератор облака тегов в форме круга.

#css #html

Particle Text - Текст формируемый из частиц, на которые мы можем воздействовать за счет наведения курсора.

#css #html

Particle Visual - Летящие частицы анимированные с помощью tweenmax. По клику часть частиц под курсором исчезают.

#css #html

Virtual dots - Хаотично перемещающиеся точки по канвасу

#css #html

Hypnotizing Cyclone - Гипнотический вихрь на шейдераx

#css #html #javascript

Generative Haunts - Случайным образом генерируемый дом с привидениями

#css #html

Deep Fractal Zoom II - Три разновидности фрактала. При перемещении курсора мы либо погружаемся, либо всплываем.

#css #javackript

Fractal Circles - Случайно генерируемые круги

#javascript #css #html

Curl noise - Пример curl noise с элементами в виде коробок. Используются шейдеры и webGL библиотека Kgl

#css #html #javascript

I swear to God I'm not drunk! - Три одинаковых изображения накладываются друг на друга образуя интересный эффект. При движении курсора, меняется положение изображений, создавая дополнительный объем.

#javascript #css #html

Organism - Абстрактная анимация на чистом CSS

#css

Extreme Hover - довольно-таки смелый hover эффект на изображении. При наведении происходит разделение блока на отдельные кусочки с общим фоном - картинкой.

#css #html

NEON LOVE - Неоновые огни на канвасе с помощью шейдеров. Неоновое сердце и знак бесконечности.

#css #html #javascript

A LONG WAY - Бесконечный цикл из простейших геометрических фигур расположенных по заданной траектории. Перемещаясь вместе с камерой, пролетаем через каждую фигуру.

#css #html

FLOATING LOVE HEARTS EFFECT - Сердца двигаются за курсором и быстро исчезают, поэтому никаких неудобств для пользователя не создают. При желании всегда можно уменьшить размер и количество сердечек. Проект выполнен на чистом JavaScript: скрипт размещён в HTML-блоке

#html #javascript