awwwards.com
Место встречи, где профессионалы цифрового дизайна со всего мира находят вдохновение, делятся знаниями и опытом, общаются и делятся конструктивной и уважительной критикой. «Всегда сомневаюсь», «всегда развиваюсь».
Создание простого веб-сайта-портфолио с помощью WebGL и Barba.js
Creating a simple portfolio website with WebGL and Barba.js
Продолжительность
3 ч 41 мин
Категория
JavaScript
Количество уроков
21 Видео
Дата добавления
18 авг. 2021 г., 16:26
Язык
Английский
Ничто не может сравниться с плавным пользовательским интерфейсом. Вот почему мы любим WebGL, потому что мы можем создавать сумасшедшие эффекты с потрясающей производительностью. Но если вы объедините это с плавной анимацией, когда пользователь перемещается между страницами, вы получите отличный веб-сайт. Это именно то, что мы собираемся создать в этом курсе.
В этом курсе я остановлюсь на двух основных концепциях. Во-первых, мы узнаем, как делать простые плавные переходы между страницами с библиотеками GSAP и Barba.js. После этого мы перейдем к более продвинутым эффектам, используя концепцию FLIP для анимации.
Во-вторых, я научу вас создавать на веб-сайте анимацию из изображения в полноэкранный режим. Это потрясающее масштабирование в сочетании с шейдерными эффектами WebGL, которые вы часто видите на самых крутых веб-сайтах. Я объясню концепцию, и мы будем использовать ее для создания нескольких различных эффектов. Не волнуйтесь, если вы еще не знакомы с шейдерами, краткое практическое введение к ним будет включено в курс. Так что вы можете использовать это как свой первый шаг в их изучении.
Затем мы объединим плавный переход между страницами с классными эффектами WebGL. Я также добавлю несколько советов по производительности и по дальнейшим действиям. В итоге у нас будет простой, но крутой сайт-портфолио с шейдерной анимацией и плавными переходами между страницами.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
-
Урок 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
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
awwwards.com
11 мар. 2021 г., 17:44
Объединение "миров" WebGL и HTML
Merging WebGL and HTML worlds
Вы, наверное, видели все эти потрясающие веб-сайты с эффектами WebGL на изображениях. Но что еще более удивительно, когда эти изображения кажутся частью HTML-содержимого страницы. Как это вообще возможно? Что ж, именно этим мы и займемся в этом курсе. Мы объединим HTML и WebGL!
awwwards.com
11 мар. 2021 г., 17:29
Обогатите свою историю с помощью 3D: Потрясающий опыт с WebGL
Enrich your story with 3D: Creating stunning WebGL experiences
У каждого бренда своя индивидуальность, свои характеристики и цветовые схемы ... Узнайте, как играть с ними, чтобы создавать захватывающие и интерактивные впечатления, рассказывающие их историю. Узнайте, как шаг за шагом создавать потрясающие возможности 3D WebGL и преодолевать трудности, с которыми вы можете столкнуться.
frontendmasters
29 окт. 2019 г., 22:03
Продвинутое креативное программивароние: WebGL и Shaders
Advanced Creative Coding: WebGL and Shaders
Участники курса узнают как создавать в реальном времени визуальные эффекты, интерактивный опыт и генеративные художественные проекты с использованием JavaScript, WebGL / GLSL и веб-платформы. В частности, этот семинар будет посвящен некоторым более сложным темам, таким как знакомство с трехмерной векторной математикой и более продвинутые эффекты шейдеров. Навыки, которые вы изучите здесь, могут быть применены во многих областях, включая AR / VR,
frontendmasters
27 окт. 2018 г., 08:11
Креативное программирование в Canvas и WebGL
Creative Coding in Canvas & WebGL
Научитесь использовать Canvas и WebGL в этом семинаре JavaScript по креативному программированию! Пользуясь обширным ландшафтом графического программирования в Интернете, учащиеся узнают об генеративном искусстве, интерактивной анимации, 3D-графике с помощью ThreeJS и пользовательских шейдерах в GLSL. В этом воркшопе представлены некоторые фундаментальные концепции творческой работы по разработке, включая приложения VR / AR, игры, художественные
3D-программирование с помощью WebGL и Babylon.js для начинающих
3D Programming with WebGL and Babylon.js for Beginners
Обновите свои навыки и будьте готовы к будущему, включив 3D-технологии в свой портфель навыков.В настоящее время поддерживается всеми браузерами, WebGL - это JavaScript API, который позволяет вам отображать 3D-изображения в браузере без использования плагинов. Существующие библиотеки, такие как Babylon.js, делают этот процесс очень простым и интуитивным для разработчиков с использованием JavaScript.В этом курсе вы узнаете основные понятия 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