css/jquery/velocity.js擦除效果

Question

我想用css / jquery / velocity.js来模仿powerpoint的擦除效果。

期望效果：https://www.youtube.com/watch?v=VSBB0wfccws

我尝试使用css3掩蔽(svg/梯度)，但没有成功。

以下是一个没有掩蔽的简单擦除效果：

http://plnkr.co/edit/Sys20pLwGb1MK8gBiX5a?p=preview

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

最好能在所有的现代浏览器上工作。

Answer 1

我不知道你到底想要什么。这段视频并没有很好地显示出来。试试这个例子

//代码在这里

$(function(){
    $('.second').velocity({    
        width: [0,'100%']
    },{
        duration: 1000,
        delay:2000,
        loop: 1
    });
    $('.first').velocity({    
        opacity:[1,0],
    },{
        duration: 600,
        delay:2000,
        loop:1
    })
});

Answer 2

非velocity.js提示

css3 - with -webkit-/-moz-/-o-

只在chrome上工作(我认为)，您需要重写它(为此，您可以在这里找到一些帮助：transitions.asp和Internet :)，但是第二个例子是做您需要的事情(在http://css-tricks.com/webkit-image-wipes/中使用鼠标悬停)

如果我知道的很清楚，面具属性只适用于safari和chrome，也许在opera中也是如此。

jQuery

你需要的东西：http://jquery.malsup.com/cycle/wipe.html

也许你会搜索这个：Nivo滑块效应

其他有用的：

从左到右的Jquery图像转换，然后在幻灯片中淡入。

CSS从左到右逐渐消失

图像上从左到右的褪色效果

Hover背景图像间的CSS淡出

在我看来，如果有一个是可行的，使用它，不要写另一个。大多数情况下，您可以找到这方面的许多结果，如果您搜索以下内容: jQuery从左到右\\ jQuery会在两个图像之间从左到右褪色。

velocity.js提示

也许被访者是在这里：http://julian.com/research/velocity/在淡出和幻灯片部分

或者这里：http://www.smashingmagazine.com/2014/06/18/faster-ui-animations-with-velocity-js/的错开部分看起来是这样的。

Answer 3

检查下面的链接，这可能对您有帮助。

这是基本代码

$('#wipe1').cycle({ 
  fx:     'wipe', 
  speed:   1000, 
  timeout: 6000, 
  delay:  -4000, 
  clip:   'l2r' 
});   

jquery插件

问候Mahadevan