I want to mimic powerpoint's wipe effect with css / jquery / velocity.js.
Desired effect: https://www.youtube.com/watch?v=VSBB0wfccws
I tried to use css3 masking (svg/gradient) but with no success.
Here is a simple wipe effect with no masking:
http://plnkr.co/edit/Sys20pLwGb1MK8gBiX5a?p=preview
$(function(){
$('.second').velocity({
width: ['100%', 0]
},{
duration: 2000,
loop: true
})
})
Preferably it should work on all modern browsers.
I'm not sure exactly what you want. The video does not really show it well. Try This Example
// Code goes here
$(function(){
$('.second').velocity({
width: [0,'100%']
},{
duration: 1000,
delay:2000,
loop: 1
});
$('.first').velocity({
opacity:[1,0],
},{
duration: 600,
delay:2000,
loop:1
})
});
Non velocity.js tips
css3 - with -webkit-/-moz-/-o-
Works on chrome only (I think), you need to rewrite it (for that you can find a few help here: http://www.w3schools.com/css/css3_transitions.asp and on the Internet :) ), but the second example is do the same what you need (works with onhover in chrome) http://css-tricks.com/webkit-image-wipes/
If I know very well, the mask attribute only works in safari and chrome and maybe in opera too.
jQuery
Something like you need: http://jquery.malsup.com/cycle/wipe.html
Maybe you search for this: Nivo slider effectslicedownright
Other which can useful:
Jquery image transition left to right and fade in, in a slideshow
Fade effect left to right on a image
CSS Fade Between Background Images on Hover
In my opinion, if there are one which works, use that, don't write another one. Mostly you can find a lot of result for this, if you search for this: jQuery fade left to right | jQuery fade left to right between two images
velocity.js tips
Maybe the answere were be here: http://julian.com/research/velocity/ at the fade & slide section
Or here: http://www.smashingmagazine.com/2014/06/18/faster-ui-animations-with-velocity-js/ the stagger section looks like that.
Check the below link this might help you
Here is the base code
$('#wipe1').cycle({
fx: 'wipe',
speed: 1000,
timeout: 6000,
delay: -4000,
clip: 'l2r'
});
Regards Mahadevan
