CSSのみの断片化効果

ホールドオン.Firefoxではサポートされていません.
ここでは、結果の作業デモです.JavaScriptの処理、SVGの策略なし.一つだけ<img> そして、いくつかのCSS.魔法を見てホバー.
クール、右?さて、私はSCSSに頼っていたので、CSSだけではないことを認めなければなりません、しかし、それはまだJS😉.
上記は2点に依存する.

マスキング

アニメーションのグラデーション

マスキング

マスキングは時々概念化するのは難しいです、そして、しばしばクリッピングと混同されます.一番下のライン:マスクはイメージです.イメージが要素としてマスクとして適用されるとき、イメージのどんな透明な部分も私たちが要素を通って見るのを許します.任意の不透明な部分は、要素を完全に見えるようになります.
マスクは、不透明度と同じように動作しますが、同じ要素の異なる部分で.それはクリッピングとは異なり、パスの外のすべてが単に隠れている道です.マスキングの利点は、我々が同じ要素上で望むように多くのマスク層を持つことができるということである — どのように複数の画像をチェーンすることができますbackground-image .
そして、マスクがイメージであるので、我々は彼らを作るためにCSS勾配を使うようになります.より良いトリックを理解するために簡単な例を取りましょう.

img {
  mask:
    linear-gradient(rgba(0,0,0,0.8) 0 0) left,  /* 1 */
    linear-gradient(rgba(0,0,0,0.5) 0 0) right; /* 2 */
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
}

ここでは、イメージの2つのマスク層を定義しています.それらは両方とも固体の色です、しかし、アルファ透明性値は異なります.
我々が使う色がデフォルトから無関係であることは、価値がありますmask-mode is alpha . アルファ値は唯一の関連するものです.我々のグラデーションはlinear-gradient(rgba(X,Y,Z,0.8) 0 0) どこX , Y and Z はランダムな値です.
各マスク層は50% 100% (画像の幅と幅の半分を指定).つのマスクは、左をカバーし、他の権利をカバーします.最後に、我々はイメージの全体の領域をカバーしている2つの重なっているマスクを持っています、そして、我々が以前に議論したように、各々は異なって定義されたアルファ透明性値を持ちます.

アニメーションのグラデーション

我々がしたいことは、透明性アニメーションを作成するために我々のマスクの線形勾配アルファ値にアニメーションを適用することです.後で、断片化効果を引き起こす非同期アニメーションにこれらを作ります.
グラデーションをアニメーション化することは、我々がCSSですることができなかった何かです.つまり、我々のための限られたサポートを得たまで@property .
詳細は前の投稿を参照

CSSのグラデーション

テマニAFIF・ 2月26日・ 2分読む

#css #webdev #tutorial

要するに@property カスタムのCSSプロパティを作成して、型を指定することで構文を定義できます.つのプロパティを作成しましょう.--c-0 and --c-1 , それは、1の初期値で数をとります1 .

@property --c-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --c-1 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}

これらのプロパティは、CSSマスクのアルファ値を表します.そして、両方ともデフォルトで完全に不透明になるので(つまり).1 ), 全体像はマスクを通して示す.カスタムプロパティを使用してマスクを書き換える方法を示します.

/* Omitting the @property blocks above for brevity */

img {
  mask:
    linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left,  /* 1 */
    linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right; /* 2 */
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
  transition: --c-0 0.5s, --c-1 0.3s 0.4s;
}

img:hover {
  --c-0:0;
  --c-1:0;
}

ここでしているのは、それぞれのカスタム変数に対して異なる遷移期間と遅延を適用することです.前方に移動し、イメージをホバー.マスクの最初のグラデーションは0 イメージを完全に透かして見えるようにするには、2番目のグラデーションに従います.

もっとマスキング！

これまでのところ、我々はマスクの2つの線形勾配と2つのカスタム特性で働いていました.フラグメンテーション効果を作成するには、より多くのタイルが必要になります、それは多くのグラデーションと多くのカスタムプロパティを意味する!
SCSSは、これはかなり些細なタスクになりますので、これは私たちがここからスタイルを書くために向いている.最初の例で見たように、タイルの種類があります.行と列と考えることができますので、2つのSCSS変数を定義しましょう.$x and $y を表現する.

カスタムプロパティ

我々は必要になる@property それぞれの定義.しかし、SSSは我々のプロパティをループで実行することによって、私たちのために重いリフティングを行うことができます.

@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i}-#{$j} {
      syntax: "<number>";
      initial-value: 1;
      inherits: false;
    }
  }
}

その後、私たちはそれらのすべてに行く0 ホバーについて:

img:hover {
  @for $i from 0 through ($x - 1) {
    @for $j from 0 through ($y - 1) {
      --c-#{$i}-#{$j}: 0;
    }
  }
}

勾配

我々は、Aを書くつもりです@mixin それは私たちのために生成します.

@mixin image() {
  $all_t: (); // Transition
  $all_m: (); // Mask
  @for $i from 0 through ($x - 1) {
    @for $j from 0 through ($y - 1) {
      $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
      $all_m: append($all_m, linear-gradient(rgba(0,0,0,var(--c-#{$i}-#{$j})) 0 0) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
    }
  }
  transition: $all_t;
  mask: $all_m;
}

マスク層はすべて同じ大きさになっており、このためには1つのプロパティが必要です$x and $y 変数とcalc() :

mask-size: calc(100%/#{$x}) calc(100%/#{$y})

この行にも気づきました.

$all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);

同じミキシング内で、以前に定義されているカスタムプロパティをすべて含む遷移プロパティも生成します.
最後に、各プロパティの異なる持続時間/遅延を生成しますrandom() SCSSの機能

@function transition($i,$j) {
  @return $s*random()+s $s*random()+s;
}

今私たちがしなければならないすべては$x and $y 我々の断片化の粒度を制御する変数.
我々は、コードを拡張し、ランダムな設定を変更することができます別の種類のアニメーションを検討する.
上のコードでtransition() 以下の関数

// Uncomment one to use it
@function transition($i,$j) {
  // @return (($s*($i+$j))/($x+$y))+s (($s*($i+$j))/($x+$y))+s; /* diagonal */
  // @return (($s*$i)/$x)+s (($s*$j)/$y)+s; /* left to right */
  // @return (($s*$j)/$y)+s (($s*$i)/$x)+s; /* top to bottom */
  // @return  ($s*random())+s (($s*$j)/$y)+s; /* top to bottom random */
  @return  ($s*random())+s (($s*$i)/$y)+s; /* left to right random */
  // @return  ($s*random())+s (($s*($i+$j))/($x+$y))+s; /* diagonal random */
  // @return ($s*random())+s ($s*random())+s; /* full random*/
}

式を調整することで、我々はさまざまな種類のアニメーションを得ることができます.単に使用する1つのコメントを解除します.このリストは消耗している — 我々はより多くのforumlasを考慮して任意の組み合わせを持つことができます.(私は高度な数学関数を追加した場合、何が可能か想像しますsin() , sqrt() , など)
我々はまだアルファベット値をアニメーション化する代わりに、我々は色の停止をアニメーション化するようにグラデーションを調整することによって我々のコードを再生することができます.勾配は次のようになります.

linear-gradient(white var(--c-#{$i}-#{$j}),transparent 0)

その後、変数を100% to 0% . そして、ねえ、我々は線形勾配で固執する必要はありません.なぜ放射状か?
遷移のように、我々は任意の種類のグラデーションを定義することができます — 組み合わせは無限です!
別の変数を紹介しましょう.この変数はmask-size このように:

calc(#{$o}*100%/#{$x}) calc(#{$o}*100%/#{$y})

それが等しいならば、重なりはありません1 . それが大きいならば、我々は重なりを得ます.これにより、より多くの種類のアニメーションを作成できます.

それだ！

我々がしなければならないのは、変数と数式の間の完璧な組み合わせを見つけるために驚くほどクレイジー画像断片化効果を作成することです.