I first created polyClip.js so I could combine the lossy compression algorithm of JPEGs with the ability to have a transparent area that PNGs allow. The result works well in all browsers, but can polyClip.js be fast enough to change the clipping area on-the-fly and even animate it at reasonably fast speeds with CSS3-style transformations on the clipping areas. The answer is a resounding yes and it is really fast even in older IE as well. This article will discuss in doing this with polyClip and a related library, Silk.js to do battery friendly and CPU efficient HTML5 animations.
Entries Tagged as 'jQuery'
Cross-Browser Animated Image Masking (Even in IE) Using polyClip.js
Tags: animation · canvas · HTML5 · Images · JavaScript · jQuery · requestAnimationFrame · transform
Cross Browser GPU Acceleration and requestAnimationFrame in Depth
Animations made with requestAnimationFrame
appear less jumpy and stuttery than those using setTimeout or jQuery.animate by ensuring that animation frames are generated at the most optimal times according to the CPU load, what the browser is doing, what the graphics card is doing, etc. Recently, I researched a bit about how it works, how different browsers behave with it, and how well browsers are at animating both Canvas and SVG. This article will be a brain dump of all I have learned so far. Some of what I discovered may surprise you.
Tags: canvas · HTML · HTML5 · jQuery · Polyfills · SVG · Uncategorized · VML · XML
Clipping JPEG Images Into Non-Rectangular Polygons Using polyClip.js
Up until now, if a developer needed to clip an image in a non-rectangular shape, it was necessary to save the image as a PNG with an alpha channel. If the image is a photograph, the file-size balloons up to unacceptable levels. My new library, polyClip.js, allows developers to clip these images using photograph friendly JPEGs instead. This article guides you step by step on how to use it yourself.
Tags: canvas · HTML5 · Images · JavaScript · jQuery · Uncategorized · VML