Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
webgl

7 Articles
{
,

}
Direct link to the article Nailing That Cool Dissolve Transition
animation canvas transition webgl

Nailing That Cool Dissolve Transition

We’re going to create an impressive transition effect between images that’s, dare I say, very simple to implement and apply to any site. We’ll be using the kampos library because it’s very good at doing exactly what we need. We’ll …

Avatar of Yehonatan Daniv
Yehonatan Daniv on Mar 31, 2021 (Updated on Apr 4, 2021)
Direct link to the article Creating WebGL Effects with CurtainsJS
canvas curtains.js slider webgl

Creating WebGL Effects with CurtainsJS

This article focuses adding WebGL effects to <image> and <video> elements of an already “completed” web page. While there are a few helpful resources out there on this subject (like these two), I hope to help simplify this subject …

Avatar of Zach Saucier
Zach Saucier on Nov 18, 2020
Direct link to the article Building an Images Gallery using PixiJS and WebGL
canvas JavaScript webgl

Building an Images Gallery using PixiJS and WebGL

Sometimes, we have to go a little further than HTML, CSS, and JavaScript to create the UI we need, and instead use other resources, like SVG, WebGL, canvas, and others.

For example, the most amazing effects can be created with …

Avatar of Luis Goncalves
Luis Goncalves on Feb 12, 2020
Direct link to the article Techniques for Rendering Text with WebGL
webgl

Techniques for Rendering Text with WebGL

As is the rule in WebGL, anything that seems like it should be simple is actually quite complicated. Drawing lines, debugging shaders, text rendering… they are all damn hard to do well in WebGL.

Isn’t that weird? WebGL …

Avatar of Daniel Velasquez
Daniel Velasquez on Dec 6, 2019
Direct link to the article Animate Images and Videos with curtains.js
animation canvas webgl

Animate Images and Videos with curtains.js

While browsing the latest award-winning websites, you may notice a lot of fancy image distortion animations or neat 3D effects. Most of them are created with WebGL, an API allowing GPU-accelerated image processing effects and animations. They also …

Avatar of Martin Laxenaire
Martin Laxenaire on Jun 6, 2018 (Updated on Jun 20, 2019)
Direct link to the article Creating Photorealistic 3D Graphics on the Web
3d three.js webgl

Creating Photorealistic 3D Graphics on the Web

Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we …

Avatar of Engin Arslan
Engin Arslan on Aug 4, 2017
Direct link to the article A Comparison of Animation Technologies
animation canvas GreenSock shape morphing waapi webgl

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It’s a complicated question and complicated answer. This post serves …

Avatar of Sarah Drasner
Sarah Drasner on May 2, 2016 (Updated on Mar 30, 2020)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top