Example #1
3
        initialize: function (options) {
            // Each cat image is placed inside a container with
            // `overflow : hidden` to clip the content
            var container = new ContainerSurface({
                classes: ['cat'],
                properties: {overflow: 'hidden'}
            });

            // Create the cat photo
            var cat = new Surface({
                tagName : 'img',
                origin : [0.5,0.2],
                proportions : [1, false],
                aspectRatio : 4/3,
                attributes : {src : options.src}
            });

            // Transform the image inside of the container by
            // mapping the input (provided by the scrollview) to a translation
            var parallaxTransform = this.input.map(function (data) {
                var offset = options.parallaxAmount * (data.index + data.progress);
                return Transform.translateY(offset)
            });

            // Build the render subtree inside the container
            container
                .add({
                    align : [.5, 0.2],
                    transform: Transform.compose(
                        Transform.translateY(-options.index * options.parallaxAmount),
                        Transform.skewY(options.skew)
                    )
                })
                .add({
                    transform: parallaxTransform
                })
                .add(cat);

            // Build the render subtree for the view
            this
                .add({transform: Transform.skewY(-options.skew)})
                .add(container);
        }
Example #2
0
 var rotation = angle.map(function (angle) {
     return Transform.compose(
         Transform.rotateX(angle),
         Transform.rotateY(angle)
     );
 });