テキストの下に表示される背景画像の効果をどのように作成するかを知りたいです。例を次に示します: chevalblanc.com。<sections>最初のセクションにはテキストの背景画像が切り取られており、2 番目のセクションには背景に写真などがあります。文字を「切り取って」背景として使用するpngを使用していることに気付きましたが、スクロール効果をどのように作成しますか?
更新: 方法はわかりましたが、実際には非常に簡単です。<section>またはに 2 つの背景画像を指定する<div>必要があり、背景に「固定」したい画像を設定します。
例えば：.yoursection { width: xx %; height: xx %;
background-image: url(images/backgroundimage.jpg) center center no-repeat fixed, url(images/foregroundimage.jpg) center center no-repeat;
}
私にとってはうまくいきました。
これは純粋に CSS3 と Jquery の組み合わせで作成されています。はい、png 透明マスク (mask05.png) を使用していることがわかります。スクロールがどのように行われるかという質問に答えるには、 http: //24ways.org/2010/intro-to-css-3d-transforms/をお読みください。
CSS 3D 変換の代わりに、視差スクロールを使用することもできます (以下にその例を示します)。
http://prinzhorn.github.io/skrollr/
基本的にSkrollrで変身できます。あらゆる要素のスケーリング、スキュー、回転がすべてレイヤーで行われ、トランジションがスムーズです。したがって、基本的には、Skrollr の使用法に関するチュートリアルを見つけて (または単に実験して)、要素を作成します。この例では、透明なテキストの背景になり、透明なテキストの背景要素の下に別の背景画像になります。
あなたが見ている透明なテキストはテキストではなく、ソリッドな画像です
ここにリンクがあります
http://www.chevalblanc.com/randheli/medias/images/intro/1400/maskintro-en.png
スクロールにはスナップスクロールと呼ばれるプラグインがあります
