基于clip-path的因素碎片飞入动作效果demo

四、结束语

自家写的第一版JS中的碎片布满是为随意布满,基本上依照本人方位随机布满在4个角的趋向上;这里给大家来得的是真随机,约等于最侧面的零散恐怕是从最右面飞过来的,所以效果要更爆裂一点。

好了,其余就没怎么了,三个小特效而已。

事实上说穿了,并从未多大的难度,一点JS+一点CSS。关键是想到好的化解思路。怎么样才具有好的消除思路呢,须要对前面叁个是真爱,那样您会一贯把前端放在脑中,任其自然就可以是还是不是迸出相当多很好的思绪,创新意识和消除方案了!不然,恒久都不得不道听途说。

1 赞 2 收藏
评论

图片 1

二、完毕原理

效果本质上是CSS3动画,正是旋转(transform:rotate)和位移(transform:translate),只是旋转和位移的预制构件是三角碎片而已。

那三角从何而来,本质上是使用CSS3 clip-path剪裁出来的。

至于CSS3 clip-path能够敬慕作者事先的作品:“CSS3 clip-path
polygon图形营造与动画片转变二三事”。

剪裁一个三角并轻松,可是,假使把自由的因素剪裁成三个一个的三角呢?

那就供给依赖JS来兑现了。

JS把成分剪裁成壹个一个的等腰直角三角形,然后轻松分布在周边,然后,通过CSS3
animation动画,让具备的在四周的要素归为就能够。因为CSS3
animation动画关键帧中的CSS样式权重就像要比style大。

于是,咱们有如下主旨CSS:

.clip[style] { opacity: 0; } .active .clip[style] { will-change:
transform; animation: noTransform .5s both; } @keyframes noTransform {
to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
.clip[style] {
    opacity: 0;
}
.active .clip[style] {
    will-change: transform;
    animation: noTransform .5s both;
}
@keyframes noTransform {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

其中,will-change意义是让动画更通畅,可参见作者事先文章:“使用CSS3
will-change进步页面滚动、动画等渲染品质”。

.active .clip[style]这段CSS表示的情致是,只要被剪裁的三角们的父级有了类名active,
全体的三角的地方就不是肆意布满,而是会以动画片格局归位到其原先的职责。没有错,是有所,大家从没要求对每叁个剪裁的三角形碎片做动画,只要归位就足以。

通过toggle类名active,
碎片的动作效果就足以不停地显现,经测量试验,在活动端效果也是没有错的。

基于clip-path的因素碎片飞入动作效果demo。基于clip-path的因素碎片飞入动作效果demo。当前,除了IE浏览器和Android4.3-都扶植了clip-path,但是还亟需-webkit-个体前缀。

三、小编也想接纳

自身花了点武术封装了一个措施,1K转运一点,代码如下(我们能够直接放到项目JS中或单独个JS文件):

基于clip-path的因素碎片飞入动作效果demo。/** * @description 任意成分碎片化,同盟CSS能够有细碎拼凑特效
越多内容参见 * @author
zhangxinxu(.com) * @license MIT [保留此段注释音讯具名] */ var
clipPath=function(t){if(!t){return false}t.removeAttribute(“id”);var
r={height:t.clientHeight,width:t.clientWidth,distance:60,html:t.outerHTML};if(window.getComputedStyle(document.body).webkitClipPath){var
a=r.distance,n=r.width,e=r.height;var o=””;for(var i=0;i’,'”
style=”‘+e+v+'”>’)})}}t.parentNode.innerHTML=r.html+o;return
true}else{t.className+=” no-clipath”;return false}};

1
2
3
4
5
6
7
/**
* @description 任意元素碎片化,配合CSS可以有碎片拼接特效
               更多内容参见 http://www.zhangxinxu.com/wordpress/?p=5426
* @author zhangxinxu(.com)
* @license MIT [保留此段注释信息署名]
*/
var clipPath=function(t){if(!t){return false}t.removeAttribute("id");var r={height:t.clientHeight,width:t.clientWidth,distance:60,html:t.outerHTML};if(window.getComputedStyle(document.body).webkitClipPath){var a=r.distance,n=r.width,e=r.height;var o="";for(var i=0;i’,’" style="’+e+v+’">’)})}}t.parentNode.innerHTML=r.html+o;return true}else{t.className+=" no-clipath";return false}};

语法如下:

clipPath(ele);

1
clipPath(ele);

其中,ele为DOM元素,clipPath措施基于原生JS书写,不依赖于别的JS框架,对于不帮助clip-path的浏览器未有效果与利益。重回值是布尔值truefalse,
返回true意味着浏览器扶持clip-pathfalse为不支持。

代码中的distance:60意味着碎片的轻重缓急,越小碎片愈来愈多,对质量的考验就越大。

比方,demo普通话字和图片的利用:

var eleText = document.getElementById(‘text’), eleImage =
document.getElementById(‘image’); // 碎片特效开首化 clipPath(eleText);
clipPath(eleImage);

1
2
3
4
5
6
var eleText = document.getElementById(‘text’),
    eleImage = document.getElementById(‘image’);
    
// 碎片特效初始化
clipPath(eleText);
clipPath(eleImage);

亟需注意的是:

  1. 利用动作效果的必得是absolute相对定位成分。一来效果必须,二来品质考虑衡量;
  2. 应用动作效果的因素不要太复杂,也许对质量会有考验;
  3. 原本被用来粉碎的要素一贯都在的,那样,碎片拼接处的闲暇就看不出来啦!

基于clip-path的任性成分的零碎拼凑动作效果

2016/06/08 · CSS ·
clip-path

初藳出处:
张鑫旭(@张鑫旭)   

一、先看效能

你能够狠狠地方击这里:基于clip-path的因素碎片飞入动作效果demo

图片 2

发表评论

电子邮件地址不会被公开。 必填项已用*标注