Submit your widget

CSS and jQuery Ink Transition Effect

Created 10 months ago   Views 8967   downloads 1322    Author codyhouse
 CSS and jQuery Ink Transition Effect
View DemoDownload 568.8 KB
37
Share |

This is an ink bleed transition effect, powered by CSS animations.

I recently came across a couple of websites using ink bleeds as transition effects. A great example is the Sevenhills website. At first I thought they were using a HTML canvas powered technique (for allowing transparency), then I checked the source code and found out they weren’t using a video, but a PNG image sprite.

By using a PNG sprite and the steps() timing function in CSS, we can create video effects and use them as transitions! In our resource, we used this technique to fire a modal window, but you can use it to transition between two different pages as well.

The process to create these effects is simple, let me break it down for you:

First, you need a video with a filling effect and a transparent area. Then you need to export this video as a PNG sequence. We used After Effects to export the sequence (make sure to export the alpha channel as well).

Read more:https://codyhouse.co/gem/ink-transition-effect/