4

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

所需效果：https ://www.youtube.com/watch?v=VSBB0wfccws

我尝试使用 css3 masking (svg/gradient) 但没有成功。

这是一个没有遮罩的简单擦除效果：

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

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

最好它应该适用于所有现代浏览器。

4

3 回答 3

2

非velocity.js 提示

css3 - 带有 -webkit-/-moz-/-o-

仅适用于 chrome（我认为），您需要重写它（为此您可以在此处找到一些帮助：http: //www.w3schools.com/css/css3_transitions.asp和 Internet :)），但是第二个例子是做同样的事情（在 chrome 中使用 onhover） http://css-tricks.com/webkit-image-wipes/

如果我很清楚，掩码属性仅适用于 safari 和 chrome，也许也适用于歌剧。

jQuery

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

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

其他有用的：

Jquery图像从左到右过渡并淡入，在幻灯片中

CSS 从左到右淡入淡出

图像从左到右的淡入淡出效果

悬停时背景图像之间的 CSS 淡入淡出

在我看来，如果有一个有效的，使用它，不要写另一个。大多数情况下，如果您搜索以下内容，您可以找到很多结果：jQuery fade left to right | jQuery在两个图像之间从左到右淡入淡出

speed.js 提示

也许答案在这里：http: //julian.com/research/velocity/在淡入淡出和幻灯片部分

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

于 2014-09-08T13:02:14.947 回答
2

我不确定你到底想要什么。视频并没有很好地展示它。 试试这个例子

// 代码在这里

$(function(){
    $('.second').velocity({    
        width: [0,'100%']
    },{
        duration: 1000,
        delay:2000,
        loop: 1
    });
    $('.first').velocity({    
        opacity:[1,0],
    },{
        duration: 600,
        delay:2000,
        loop:1
    })
});
于 2014-09-08T03:43:15.190 回答
1

检查以下链接，这可能会对您有所帮助

这是基本代码

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

jQuery插件

问候马哈德万

于 2014-08-25T05:26:28.277 回答