awwwards.com
Место встречи, где профессионалы цифрового дизайна со всего мира находят вдохновение, делятся знаниями и опытом, общаются и делятся конструктивной и уважительной критикой. «Всегда сомневаюсь», «всегда развиваюсь».
Создание простого веб-сайта-портфолио с помощью WebGL и Barba.js
Creating a simple portfolio website with WebGL and Barba.js
★4.8 (всего оценок - 38)
Продолжительность
3 ч 41 мин
Категория
barba.jsКоличество уроков
21 Видео
Дата добавления
18 авг. 2021 г., 16:26
Язык
Английский
Дата обновления
29 апр. 2026 г., 12:50
Этот курс поможет вам создать современный и визуально впечатляющий сайт‑портфолио, сочетая WebGL‑эффекты, плавные переходы между страницами и интерактивную анимацию. Материал ориентирован на разработчиков, которые хотят улучшить свой UI/UX посредством анимаций, шейдеров и грамотной работы с анимационными библиотеками.
Что вы узнаете в этом курсе
Курс детально разбирает ключевые инструменты и техники, необходимые для создания динамичного портфолио, которое выделяется визуальной глубиной и плавностью переходов.
Плавные переходы между страницами
- Использование GSAP для создания управляемых и отзывчивых анимаций.
- Настройка и интеграция Barba.js для межстраничных переходов.
- Применение подхода FLIP для более естественных и производительных анимаций.
WebGL-анимации и работа с шейдерами
- Пошаговое создание эффекта перехода изображения в полноэкранный режим.
- Комбинация масштабирования с шейдерными эффектами для глубины и стилизации.
- Базовое обучение шейдерам — идеальный старт для новичков.
Интерактивные визуальные эффекты
Вы научитесь объединять плавные переходы и WebGL-эффекты, создавая цельный пользовательский опыт с акцентом на визуальную эстетику.
Создание узнаваемого портфолио
- Проработка структуры минималистичного, но выразительного сайта.
- Добавление интерактивных деталей, основанных на шейдерах.
- Оптимизация визуальных эффектов под разные устройства.
Рекомендации по оптимизации и дальнейшему развитию
Вы получите практические советы по повышению производительности, оптимизации рендера и расширению проекта после завершения курса.
Работа с производительностью
- Техники уменьшения нагрузки на графику.
- Правильное использование шейдеров для лёгкого рендера.
Расширение функциональности
- Идеи для добавления новых WebGL-эффектов.
- Как масштабировать проект к полноценному портфолио‑сайту.
Итог
После прохождения курса у вас будет собственный стильный сайт‑портфолио с плавными переходами и шейдерными эффектами, а также фундаментальные навыки работы с WebGL, GSAP и Barba.js. Эти знания станут отличной базой для создания более сложных и визуально богатых веб‑проектов.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:00:47Intro
- Урок 2. 00:24:56Creating Boilerplate
- Урок 3. 00:12:54Using shaders in THREE.js
- Урок 4. 00:22:00Vertex Shaders
- Урок 5. 00:15:16Fragment Shaders
- Урок 6. 00:09:32Combining shaders
- Урок 7. 00:07:26Sync HTML and WebGL dimensions
- Урок 8. 00:11:11Creating Zoom Effect
- Урок 9. 00:04:05Create zoom Effect
- Урок 10. 00:12:00Fixing UV aspect ratio
- Урок 11. 00:12:01Effect with corners
- Урок 12. 00:05:48Effect with wave
- Урок 13. 00:06:32Merge HTML and WebGL with custom scroll
- Урок 14. 00:09:47Create meshes from images
- Урок 15. 00:06:47Correct positioning
- Урок 16. 00:08:43Resizing website
- Урок 17. 00:04:10Mouse events
- Урок 18. 00:04:35Barba.js intro
- Урок 19. 00:20:32Creating smooth Barba.js transition
- Урок 20. 00:21:26Using 11ty as a site generator
- Урок 21. 00:00:51Thank you
Автор - awwwards.com
Комментарии
В последнем разделе с 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