Simulating a "wipe left" action in Hype 3


(Art Blumberg) #1

I would like to emulate the “wipe” action from PowerPoint. Changing the size of the overlay graphic wouldn’t look right, and I can’t hide the graphic under a copy of the background (because the background is a photo). Any suggestions on how to accomplish this?


(james koh) #2

i found this on google.
Here is a simple wipe effect with no masking:

$(function(){
$(’.second’).velocity({
width: [‘100%’, 0]
},{
duration: 2000,
loop: true
})
})

another one

var origElem, newImg, workerCount;

function workDivs() {
var nr = workerCount,
img = newImg,
main_prc = 100-nr;
$(’

’).prop(‘id’, ‘sch_rot_main’).addClass(‘sch_rot’).appendTo(’#orig’);
for (var i = 0; i <= nr; i++) {
    var q = 1 - ((1/nr).toFixed(2) * i);
    
    $('<div/>').prop('id', 'sch_rot_sub_'+i).addClass('sch_rot sch_rot_bg').data('sch_rot_id', i).css({opacity: q, width: 0}).appendTo('#sch_rot_main');
}

$('.sch_rot_bg').css('background-image', 'url('+img+')');

}

function updateDivs(pos) {
var count = workerCount;
$(’.sch_rot_bg’).each(function(index) {
var adj = pos - (count - index) || 0;
if (adj > 100) {
$(this).remove();
} else {
$(this).css({
zIndex: 100 - index,
width: adj+’%’
});
}
});
}

function animDone() {
$(origElem).css(‘background-image’, ‘url(’+newImg+’)’);
$(’.sch_rot’).remove();
}

function runAnim(speed, i) {
if (i >= workerCount+100) {
animDone();
return;
}
setTimeout(function() {
updateDivs(i);
i++;
runAnim(speed, i);
}, speed);
}

function picSwap(elem, img, workers, speed) {
origElem = elem;
newImg = img;
workerCount = workers;
workDivs();
runAnim(speed, 0);
}

$(‘button’).click(function() {
picSwap(’#orig’, ‘http://placehold.it/480x300/ffffff/000000’, 40, 10);
});