canvallax

Canvallax 2

Easy parallax effects on <canvas>

<canvas> is awesome, but drawing can be cumbersome and maintaining multiple elements is a nightmare.

Enter Canvallax: a tiny, dependency-free Javascript library for drawing shapes and images on <canvas>. Easily position, rotate, scale and animate elements, and create amazing scroll or pointer tracking effects! Super performant, supporting modern browsers (IE9+).

Many jaw-dropping effects can be achieved with the built-in functionality:

• Build scenes with easy positioning via x & y coordinates, a z axis for 3D/parallax effects, and stacking with zIndex.
• Common shapes built in (canvallax.Ellipse, canvallax.Polygon, & canvallax.Rectangle)
• Draw Images from URLs or nodes (<img />, <canvas />) with canvallax.Image.
• Rotate and scale elements with support for transformOrigin.
• Scroll & Pointer tracking for scenes and elements with configurable easing and offsets.
• Animation of elements with .to, .from and .fromTo.
• Easily add and create your own plugins using canvallax.createElement, canvallax.createTracker or the general canvallax.createClass.
• Opacity, blend modes, offsets, clipping, fixed positioning, and so much more!

Read the Canvallax Docs for documentation on each feature.

Demos

View a CodePen collection full of Canvallax demos! Demos currently use Canvallax 1.0.0, new demos for Canvallax 2.0.0 coming soon

Basic Usage

The examples below will help you get started using Canvallax. For advanced usage, read the Canvallax Wiki for full documentation.

Scenes

In order to use Canvallax, you need to create a canvallax.Scene and add elements to it. Create a new scene either by calling new canvallax.Scene() or canvallax.Scene(); either will return a new instance. Elements can be created in the same way, new canvallax.Ellipse() or canvallax.Ellipse, then added to the scene like so:

An object containing options may be given on creation, allowing you to set properties and callbacks.

  var scene = canvallax.Scene({
        className: 'my-scene', // Class added to the `<canvas>` element
        parentElement: document.getElementById('scene-container'), // Where the canvas should be prepended
        fullscreen: false, // Scenes are fullscreen by default, but you can make them a specific width/height by setting fullscreen to false
        width: 640,
        height: 480
      }),
    
      img = canvallax.Image({ src: 'image.jpg' }),
      
      circle = canvallax.Ellipse({ fill: '#000', width: 100, height: 100 });
    
  scene.add(img,ellipse);
  

Elements

Canvallax pieces (canvallax.Scene, canvallax.Group, canvallax.Polygon, canvallax.Rectangle, etc.) all accept an object containing options as the only parameter, allowing you to customize the look/functionality of each piece and control the positioning, scale and rotation.

var scene = canvallax.Scene(),

    img = canvallax.Image({
        src: 'image.jpg',
        opacity: 0.5,
        rotation: 180
      }),
      
    triangle = canvallax.Polygon({
        fill: '#000',
        points: 3,
        width: 80,
        height: 80
      }),
    
    redEllipse = canvallax.Ellipse({
        fill: '#F00',
        width: 80,
        height: 80,
        x: 200,
        y: 200  
      }),
    
    outlinedSquare = canvallax.Rectangle({
        stroke: '#000',
        width: 100,
        height: 100
      });
    
scene.add(img,triangle,redEllipse,outlinedSquare);
    

Animation

Animation with Canvallax is super easy! Use external animation libraries like GSAP or Velocity, or use the fully featured animation functions built in to Canvallax objects: .to, .from and .fromTo!

  var scene = canvallax.Scene(),
      rect = canvallax.Rectangle();
  
  scene.add(rect);
  
  var duration = 3,
      properties = { rotation: 360 }, // This object contains properties to animate
      options = { repeat: -1 };
  
  rect.to(duration, properties, options);
  rect.from(1,{ x: -100 });
  rect.fromTo(3,{ width: 100 },{ width: 200 },{
    repeat: -1, // inifinte repeat
    yoyo: true // alternate animation direction on repeat
  );
  

Trackers

Canvallax's built in trackers allow you to link an object's position to the scroll or pointer (mouse or touch)! You can use the ease property to slow the tracking down, use the invert property to reverse the tracked values, and use the offset property to adjust the tracked values.

  var scene = canvallax.Scene({
        tracker: canvallax.trackScroll() // Make the scene following the window scroll
      }),
      arrow = canvallax.Polygon({
        fill: '#000',
        points: 3,
        width: 100,
        height: 100
        tracker: canvallax.trackPointer({ ease: 10, offset: -50 }) // Move the arrow with your cursor
      });
  
  scene.add(arrow);