Easy parallax effects and element management on canvas.
I've been working hard at improving the Canvallax API & feature set, and it's almost ready for prime time. Check out the v2.0.0 branch to try out the upcoming features. File any feedback or bugs under Issues
.to
, .from
and .fromTo
methods on all elements.var star = canvallax.Polygon({ points: [[80, 0], [100, 50], [160, 55], [115, 95], [130, 150], [80, 120], [30, 150], [45, 95], [0, 55], [60, 50],'close'] });
)Canvallax.Pattern
& Canvallax.RoundedRectangle
plugins included.Canvallax.Ellipse
to replace Canvallax.Circle
, make round shapes of any size!Canvallax.Group
for keeping Elements linked together.--
Easy parallax effects on <canvas>
Canvallax is a small (5.8kb minified, 2.1kb gzipped) dependency-free Javascript library for managing elements on <canvas>
. Support is built-in for:
<img />
, <canvas />
, etc) with Canvallax.Image
Canvallax.Circle
, Canvallax.Polygon
and Canvallax.Rectangle
)The Canvallax library is primarily meant to help with managing individual elements on canvas with unified positioning, scale and scroll effects. Some canvas knowledge will be needed for more advanced implementations like custom elements and animation, though most effects can be achieved with the built-in functionality.
View the CodePen collection of Canvallax demos
Create a new Canvallax instance either by calling new Canvallax()
or Canvallax()
, either will work. First variable is an optional object containing options, the default values are shown below.
var myCanvallax = Canvallax(),
img = Canvallax.Image('image.jpg'),
circle = Canvallax.Circle(),
triangle = Canvallax.Polygon({
sides: 3
}),
square = Canvallax.Rectangle({
width: 100,
height: 100
});
myCanvallax.add(img,circle,triangle,square);
Read the Canvallax Wiki for full documentation.