Clip-path_html/css_WEB-ITnose に基づく任意の要素のフラグメント スプライシング アニメーション

この記事は 2016 年 6 月 7 日火曜日 23:51 に公開され、js インスタンスに分類されます。 今日は 21 回、20 回読みました

byzhangxinxu http://www.zhangxinxu.com から

記事のアドレス: http://www.zhangxinxu.com/wordpress/?p =5426

1. まずエフェクトを見てみましょう

ここをクリックしてください: クリップパスに基づいて要素のフラグメントが動的エフェクトに飛び込む

2. 実装原理

効果は基本的に CSS3 アニメーションであり、回転 (transform:rotate) と変位 (transform:translate) のコンポーネントである点が異なります。

その三角形はどこから来たのでしょうか? 基本的に CSS3 クリップパスを使用して切り取られました。

CSS3 クリップパスの詳細については、以前の記事「CSS3 クリップパス ポリゴン グラフィックスの構築とアニメーション変換: 2 つまたは 3 つのこと」を参照してください。

三角形を切り取ることは難しくありませんが、任意の要素を 1 つずつ三角形に切り取ったらどうなるでしょうか?

これは JS の助けを借りて実現する必要があります。

JS で要素を 1 つずつ直角二等辺三角形に切り出し、ランダムに配置すると、CSS3 アニメーションによって周囲の要素をすべてグループ化できます。 CSS3 アニメーションのアニメーション キーフレームにおける CSS スタイルの重みがスタイルよりも大きいように見えるためです。

そのため、次のコア 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);    }}

その中で、アニメーションをより滑らかにするために will-change が使用されます。以前の記事「CSS3 の使用法」を参照してください。ページのスクロール、アニメーション、その他のレンダリングのパフォーマンスを向上させるために変更します。」

.active .clip[style] この CSS が意味するのは、クリップされた三角形の親のクラス名が active である限り、すべての三角形の位置はランダムに分散されず、アニメーション化されるということです。フォームが元の位置に戻ります。そうです、それだけです。クリップされた三角形のフラグメントをすべてアニメーション化する必要はなく、単にその位置に戻すだけです。

クラス名をアクティブに切り替えることで、フラグメントのアニメーションを継続的に表示できます。テスト後、モバイル端末での効果も良好です。

現在、IE と Android 4.3 を除き、クリップパスはサポートされていますが、-webkit- private プレフィックスが必要です。

3.

も使用したいと思います。コードは次のとおりです (プロジェクト JS に直接入れることができます)。または別の JS ファイル):

/*** @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<n;i+=a){for(var h=0;h<e;h+=a){var d=[i,h],u=[i,h+a],l=[i+a,h+a],v=[i+a,h];var c=[i+a/2,h+a/2];var m=[[d,c,v],[d,u,c],[c,u,l],[v,c,l]];m.forEach(function(t,a){var n=t.map(function(t){return t.map(function(t){return t+"px"}).join(" ")}).join();var e="-webkit-clip-path: polygon("+n+");";var i=Math.random();var h=i<.5?-1:1;var u=[600*(.5-Math.random()),600*(.5-Math.random())];var l="translate("+u.map(function(t){return t+"px"}).join()+") rotate("+Math.round(h*360*Math.random())+"deg)";var v="-webkit-transform:"+l+";transform:"+l+";";o=o+r.html.replace('">','" style="'+e+v+'">')})}}t.parentNode.innerHTML=r.html+o;return true}else{t.className+=" no-clipath";return false}};

構文は次のとおりです:

clipPath(ele);

このうち、ele は DOM 要素であり、clipPath メソッドはネイティブ JS に基づいて記述されています他の JS フレームワークに依存せず、クリップパスをサポートしていないブラウザの場合は効果がありません。戻り値は true または false のブール値です。true を返すとブラウザがクリップ パスをサポートすることを意味し、false はクリップ パスをサポートしないことを意味します。

コード内の distance:60 は、フラグメントのサイズが小さいほど、フラグメントの数が多くなり、パフォーマンスのテストが大きくなります。

たとえば、デモでのテキストと画像の使用:

var eleText = document.getElementById('text'),    eleImage = document.getElementById('image');    // 碎片特效初始化clipPath(eleText);clipPath(eleImage);

次のことに注意してください:

1. アニメーションの適用 絶対位置決め要素 である必要があります。まず、エフェクトが必要であり、次にパフォーマンスに関する考慮事項です。
2. パフォーマンスをテストする可能性があるため、動的要素を適用しすぎないでください。
3. スマッシュに使用される元の要素は常に存在します。こうすることで、継ぎ合わせた部分の隙間が目立たなくなります！

4. 結論

私が書いた JS の最初のバージョンでのフラグメントの分散はランダムであり、基本的には独自の方向に従って四隅にランダムに分散されました。あなたは本当にランダムです。つまり、左端の破片が右端から飛んできた可能性があるため、効果はより爆発的になるはずです。

はい、他には何もありません。ちょっとした特殊効果があるだけです。

はっきり言って、少しの JS と少しの CSS だけで、それほど難しいものではありません。重要なのは、良い解決策を考えることです。良いソリューションを得るにはどうすればよいでしょうか? フロントエンドを心から愛する必要があります。そうすれば、常にフロントエンドを念頭に置くことができ、自然と多くの良いアイデア、創造性、ソリューションを思いつくようになります。そうしないと、いつまでも人の知恵を拾うだけになってしまいます。

この記事はオリジナルの記事であり、ナレッジポイントは頻繁に更新され、いくつかの間違いが修正されるため、追跡可能性を高め、誤解を招くことを避けるために、元のソースを保持してください。古くて誤った知識により、より多くの更新が行われる予定です。

この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5426

(この記事はここまで)