Ничто не может сравниться с плавным пользовательским интерфейсом. Вот почему мы любим WebGL, потому что мы можем создавать сумасшедшие эффекты с потрясающей производительностью. Но если вы объедините это с плавной анимацией, когда пользователь перемещается между страницами, вы получите отличный веб-сайт. Это именно то, что мы собираемся создать в этом курсе.
В этом курсе я остановлюсь на двух основных концепциях. Во-первых, мы узнаем, как делать простые плавные переходы между страницами с библиотеками GSAP и Barba.js. После этого мы перейдем к более продвинутым эффектам, используя концепцию FLIP для анимации.
Во-вторых, я научу вас создавать на веб-сайте анимацию из изображения в полноэкранный режим. Это потрясающее масштабирование в сочетании с шейдерными эффектами WebGL, которые вы часто видите на самых крутых веб-сайтах. Я объясню концепцию, и мы будем использовать ее для создания нескольких различных эффектов. Не волнуйтесь, если вы еще не знакомы с шейдерами, краткое практическое введение к ним будет включено в курс. Так что вы можете использовать это как свой первый шаг в их изучении.
Затем мы объединим плавный переход между страницами с классными эффектами WebGL. Я также добавлю несколько советов по производительности и по дальнейшим действиям. В итоге у нас будет простой, но крутой сайт-портфолио с шейдерной анимацией и плавными переходами между страницами.
Посмотреть больше
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
Creating a simple portfolio website with WebGL and Barba.js,
а также все другие курсы, прямо сейчас!
Курс хороший , эффект в курсе рассмотрен модный , современный. НО в исходниках уроков нету package.json пришлось сделать самому.
В последнем разделе с 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
Testosterone
Thank you, admin!
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Вы, наверное, видели все эти потрясающие веб-сайты с эффектами WebGL на изображениях. Но что еще более удивительно, когда эти изображения кажутся частью HTML-содержимого страницы. Как это вообще возможно? Что ж, именно этим мы и займемся в этом курсе. Мы объединим HTML и WebGL!
Обогатите свою историю с помощью 3D: Потрясающий опыт с WebGL
Enrich your story with 3D: Creating stunning WebGL experiences
У каждого бренда своя индивидуальность, свои характеристики и цветовые схемы ... Узнайте, как играть с ними, чтобы создавать захватывающие и интерактивные впечатления, рассказывающие их историю. Узнайте, как шаг за шагом создавать потрясающие возможности 3D WebGL и преодолевать трудности, с которыми вы можете столкнуться.
Продвинутое креативное программивароние: WebGL и Shaders
Advanced Creative Coding: WebGL and Shaders
Участники курса узнают как создавать в реальном времени визуальные эффекты, интерактивный опыт и генеративные художественные проекты с использованием JavaScript, WebGL / GLSL и веб-платформы. В частности, этот семинар будет посвящен некоторым более сложным темам, таким как знакомство с трехмерной векторной математикой и более продвинутые эффекты шейдеров. Навыки, которые вы изучите здесь, могут быть применены во многих областях, включая AR / VR,
Научитесь использовать 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 и
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