Creating a simple portfolio website with WebGL and Barba.js
Ничто не может сравниться с плавным пользовательским интерфейсом. Вот почему мы любим WebGL, потому что мы можем создавать сумасшедшие эффекты с потрясающей производительностью. Но если вы объедините это с плавной анимацией, когда пользователь перемещается между страницами, вы получите отличный веб-сайт. Это именно то, что мы собираемся создать в этом курсе.
В этом курсе я остановлюсь на двух основных концепциях. Во-первых, мы узнаем, как делать простые плавные переходы между страницами с библиотеками GSAP и Barba.js. После этого мы перейдем к более продвинутым эффектам, используя концепцию FLIP для анимации.
Во-вторых, я научу вас создавать на веб-сайте анимацию из изображения в полноэкранный режим. Это потрясающее масштабирование в сочетании с шейдерными эффектами WebGL, которые вы часто видите на самых крутых веб-сайтах. Я объясню концепцию, и мы будем использовать ее для создания нескольких различных эффектов. Не волнуйтесь, если вы еще не знакомы с шейдерами, краткое практическое введение к ним будет включено в курс. Так что вы можете использовать это как свой первый шаг в их изучении.
Затем мы объединим плавный переход между страницами с классными эффектами WebGL. Я также добавлю несколько советов по производительности и по дальнейшим действиям. В итоге у нас будет простой, но крутой сайт-портфолио с шейдерной анимацией и плавными переходами между страницами.
В последнем разделе с 11ty на винде через терминалы VSCode / PHP storm не завилось выскакивает ошибка: "eleventy : Невозможно загрузить файл FAKEPATH\Creating a simple portfolio website with WebGL and Barba.js\lesson4-with-eleventy\node_modules\.bin\eleventy.ps1, так как выполнение сценариев отключено в этой системе. Для получения дополнительных сведений см. about_Execution_Policies по адресу
https:/go.microsoft.com/fwlink/?LinkID=135170." помогло решить проблему следующее: https://gist.github.com/2ik/3ddbef3263dee8e76b63a391e2ffe5d0.
Также отдельное спасибо автору этого курса Юрию Артюху ссылка на его феноменальный канал - https://www.youtube.com/channel/UCDo7RTzizoOdPjY8A-xDR7g