質問
clip-maskJavaScript や jQueryを使用するのと同様に、グラデーションでコンテンツをフェードアウトする方法はありますか?
問題
背景が透明な固定ヘッダーと、透明な部分を持つ「.png」ロゴがあります。ページを垂直にスクロールする半透明の要素があり、ヘッダーとロゴの下にあります。
ロゴの下をスクロールすると、ロゴが透けて見え、すべてがかなり悪く見えます。
提案されたソリューション
特定のポイント (ヘッダーの下部) より上のコンテンツをフェードアウトさせたいと考えています。GSAPでScrollMagicを使用して、要素がスクロールするときに要素をアニメーション化し、他の CSS 修正との競合を引き起こすclip-pathため、JavaScript/jQuery の修正を最も可能性が高いものとして探しています。
サンプルコード
コメンターのリクエストで、いくつかのピースを含む JSFiddle を作成しました。
考慮すべき要素が 2 つあり#mastheadます#content。不透明度から へのグラデーションとしてフェードしたい下の領域 ( 内blue)があります。#masthead#content10