Creating a simple portfolio website with WebGL and Barba.js

Catégories : Code, UX Design
Liste de souhaits Partager

À propos du cours

In this course I will focus on two main concepts. Firstly, we are going to learn how to do simple smooth page transitions with GSAP and Barba.js libraries. After that we will move to more advanced effects using FLIP concept for animations.

Secondly, I will teach you how you can create image-to-fullscreen animations on the website. 

That amazing zooming combined with WebGL shader effects that you often see on the coolest websites. I will explain the concept, and we will use it to create a couple of different effects. Don’t worry if you are not yet familiar with shaders, a short practical intro to them will be included in the course. So you can use it as your first step in learning them.

Then we will combine smooth page transition with cool WebGL effects. I will also include some tips on performance and where you can go from that. In the end we will have a simple but cool portfolio website with shader animations and smooth page transitions.

Afficher plus

Contenu du cours

WebGL

  • Intro
  • Creating Boilerplate
  • Using shaders in THREE.js
  • Vertex Shaders
  • Fragment Shaders
  • Combining shaders
  • Sync HTML and WebGL dimensions
  • Creating Zoom Effect
  • Create zoom Effect
  • Fixing UV aspect ratio
  • Effect with corners
  • Effect with wave

Implementing transition in HTML

Smooth Page Transitions

Combining WebGL page transitions

Using a simple CMS

Conclusion

Notes et avis de l’apprenant

Encore aucun avis !
Encore aucun avis !