move screen over image in titanium javascript

Question

I need to create an effect like this in this site withe the name:

Link from the example site

//I need this in javascript

The problem is that the created effect is an image with all designs. How can I move trough the entire image and show only part of the image in javascript for android and IOS?

Answer 1

I achieved it using

index.xml

<Alloy>
<Window class="container">
    <Label id="label" top="80" onClick="doClick">Play Sign</Label>
    <View height="84">
        <ImageView width="255" height="7224" id="sigimage" top="0" image="/testImages/0D8Zt.png"></ImageView>
    </View>
</Window>
</Alloy>

index.tss

".container": {
    backgroundColor:"white"
}
"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}

"#label": {
    font: {
        fontSize: 18
    }
}

index.js

var interval = null;
var i=0;

function doClick(e) {
    clearInterval(interval);
    i = 0;
    replay();
}
replay();
function replay(){
    interval = setInterval(function(){
        if(i<86){
            $.sigimage.top = -i*84;
            i++;
            Ti.API.info('i = '+i);
        }else{
            clearInterval(interval);
        }
    },10);
}

$.index.open();

a little trick, hope this will help you. :)