#Revealer

Angular directive that allows two images to be layered on top of each other and compared using a slider, demo or scroll demo.

#Documentation

Include revelaer module source file in html

 <script src="path/to/revealer.js"></script>

Mark the revealer module as a dependecy of your angular app

angular.moudle('myApp', ['revealer']);

Then declare the revealer directive in your html.

<revealer top-image="top.png" top-label="Top Image" bottom-image="bottom.png" bottom-label="Bottom Label"></revealer>

Options

####top-image Path of image to appear on the top layer. This is the image that is revealed

top-image="top.png"

####bottom-image Path of image to appear on the bottom layer

bottom-image="bottom.png"

####top-label (optional) Label to appear on the top image

top-label="Top Image"

####bottom-label (optional) Label to appear on the bottom image

bottom-label="Bottom Label"

####start-position (optional) set the start position of the revealer in percentage (default : 50)

start-position="60"

####on-complete (optional) if set on the scope, this function will be invoked when the drag action has complete

on-complete="vm.onComplete('called from the controller')"

####scroll (optional)

Set postion of the revealer on scroll, the revealer will only happen when the element is in the windows viewport.

note when set the start-postion will be 0

scroll="true"

####scroll-offset (optional)

change the trigger location of the scroll functionality

scroll-offset="500"

Change log

breaking changes

MIT