#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.module('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
1.0.0
breaking changes
- removed topimage, bottomimage, toplabel, bottomlabel
0.1.4
- support UMD #7
0.1.3
- updated revealer tests
- onComplete function fature added #9
- updated documentation
0.1.2
- fix release listener issue #11
0.1.1
- fix offset issue #6
- updated gulp task to output to a single destination
0.0.1
- intital release
License
MIT