Web開発
Tw-fade: ピュアCSSによるスクロール駆動のエッジマスキング
Tw-fade: pure CSS scroll-driven edge masking (pete.design)
要約
「Tw-fade」は、純粋なCSSでスクロールに応じてコンテンツのエッジをマスキングする技術です。スクロール可能なコンテンツが存在する場合にのみフェードが表示され、エッジで自然に消えていくのが特徴です。軸、サイズ、範囲、クリアゾーンのユーティリティをスクロールコンテナに直接適用できる、構成可能なシステムを提供します。
全文翻訳
周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象
スクロール認識型 フェードは、スクロールするコンテンツがさらにある場合にのみ現れ、いずれかのエッジで再びゆっくりと消えていきます。
イーズドグラデーション イーズドアルファランプは、クリップされた線で終わるのではなく、コンテンツを表面に溶け込ませます。 fade- y xy t x fade- r range-2xl size-lg
構成可能 軸、サイズ、範囲、クリアゾーンのユーティリティは、スクロールコンテナに直接構成されます。