Друзья, здесь был канал, в котором я публиковал портфолио дизайнеров.

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

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

3D-анимация сетки при скролле
#Ресурсы

Это проект Framer, воссозданный по примеру сайта Lumen Art Space.

・・・

→ Демо
→ Ремикс

Как создать свои брейпоинты
#Уроки

По умолчанию Framer свои стандартные брейпоинты для страницы.

Но вы всегда можете сделать свою собственную систему.

Жидкое искажение
#Ресурсы

Эффект жидкого искажения, воссозданный во Framer на основе работы Ксении Кондрашовой.

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

・・・

→ Демо
→ Ремикс

Пискельное искажение
#Ресурсы

Еще один эффект искажения на основе работы Ксении Кондрашовой. На этот раз деформация изображения через пиксели.

Настройки
・Выбор изображения
・Размеры ячеек
・Амблитуда движения
・Скорость движения

・・・

→ Демо
→ Ремикс

3D-превью при наведении
#Ресурсы

Интеренсный компонент с трехмерным раскртием списка. Подойдет для предпросмотра проектов.

・・・

→ Демо
→ Ремикс

Стеклянная кнопка
#Ресурсы

С эффектам преломления, искажения и рефлексией. Конечно, это псевдо-эффекты, но выклдяит все равно красиво

・・・

→ Демо
→ Ремикс

Карточка проекта с 3D-флипом

Отлично подойдет для карточек в портфолио, чтобы показать больше изображений при наведении.

・・・

→ Демо
→ Ремикс

КАК сделать авто-воспроизведение видео при прокрутке

1. Оберните видео в компонент.

2. Создайте два варианта: «playing» (воспроизводится) и «not playing» (не воспроизводится).

3. Используйте scroll variant effect с триггером layer in view, чтобы переключать варианты, когда слой попадает в область видимости.

Свайп карточек

Еще один крутой пример для взаимодействия с карточками.

・・・

→ Демо
→ Использовать бесплатно