HN 日本語サマリー

← 一覧へ戻る
Web開発

Tw-fade: ピュアCSSによるスクロール駆動のエッジマスキング

Tw-fade: pure CSS scroll-driven edge masking (pete.design)

81 pointsby petekp30 コメント

要約

「Tw-fade」は、純粋なCSSでスクロールに応じてコンテンツのエッジをマスキングする技術です。スクロール可能なコンテンツが存在する場合にのみフェードが表示され、エッジで自然に消えていくのが特徴です。軸、サイズ、範囲、クリアゾーンのユーティリティをスクロールコンテナに直接適用できる、構成可能なシステムを提供します。

全文翻訳

周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 周辺の仮象 スクロール認識型 フェードは、スクロールするコンテンツがさらにある場合にのみ現れ、いずれかのエッジで再びゆっくりと消えていきます。 イーズドグラデーション イーズドアルファランプは、クリップされた線で終わるのではなく、コンテンツを表面に溶け込ませます。 fade- y xy t x fade- r range-2xl size-lg 構成可能 軸、サイズ、範囲、クリアゾーンのユーティリティは、スクロールコンテナに直接構成されます。