Скачать Создание простого веб-сайта-портфолио с помощью WebGL и Barba.js - awwwards (2021)

[bart]

Создание простого веб-сайта-портфолио с помощью WebGL и Barba.js
Creating a simple portfolio website with WebGL and Barba.js
awwwards - Yuri Artiukh

Ничто не может сравниться с плавным пользовательским интерфейсом. Вот почему мы любим WebGL, потому что мы можем создавать сумасшедшие эффекты с потрясающей производительностью. Но если вы объедините это с плавной анимацией, когда пользователь перемещается между страницами, вы получите отличный веб-сайт. Это именно то, что мы собираемся создать в этом курсе.


В этом курсе я остановлюсь на двух основных концепциях. Во-первых, мы узнаем, как делать простые плавные переходы между страницами с библиотеками GSAP и Barba.js. После этого мы перейдем к более продвинутым эффектам, используя концепцию FLIP для анимации.

Во-вторых, я научу вас создавать на веб-сайте анимацию из изображения в полноэкранный режим. Это потрясающее масштабирование в сочетании с шейдерными эффектами WebGL, которые вы часто видите на самых крутых веб-сайтах. Я объясню концепцию, и мы будем использовать ее для создания нескольких различных эффектов. Не волнуйтесь, если вы еще не знакомы с шейдерами, краткое практическое введение к ним будет включено в курс. Так что вы можете использовать это как свой первый шаг в их изучении.

Затем мы объединим плавный переход между страницами с классными эффектами WebGL. Я также добавлю несколько советов по производительности и по дальнейшим действиям. В итоге у нас будет простой, но крутой сайт-портфолио с шейдерной анимацией и плавными переходами между страницами.

Материал на английском языке




Продажник:

Для просмотра вы должны войти или зарегистрироваться.

Скачать: