Html

CSSのみでの視差スクロール？



Parallax Scrolling With Css Only



解決：

視差の純粋なCSSを検索し、CodePenからの最初の結果（2番目の結果は現在のページです:)をクリックすると、両方の良い例が表示されます 修繕 と スクロール 背景。ちなみに、ここにソースコードを配置し、Chrome、Safari、Operaもサポートしています。

この例には、次の2種類の背景があるようです。



  • 修繕 、 とbackground-attachment：目的の要素で修正されました。＃slide2
  • スクロール 、 と変換：translateZ（-1px）scale（2） 前 のような目的の要素＃slide1

また、スクロール効果は設定に依存しているようです変換スタイル：preserve-3d of正しく動作するボディ。 （IEはたまたまサポートしていませんちなみに、トランスフォームスタイルです。）

最後に、微調整することでさまざまなスクロール速度を実現できます2つのような変換プロパティ例のimg要素。



ソースコード ：

純粋なCSS視差スクロール@importurl（http://fonts.googleapis.com/css?family=Nunito）; html {高さ：100％;オーバーフロー：非表示; }本体{マージン：0;パディング：0;パースペクティブ：1px; -webkit-パースペクティブ：1px; -webkit-transform-style：preserve-3d;変換スタイル：preserve-3d;高さ：100％;オーバーフロー-y：スクロール;オーバーフロー-x：非表示;フォントファミリー：Nunito; } h1 {フォントサイズ：250％} p {フォントサイズ：140％;行の高さ：150％;色：＃333; } .slide {位置：相対;パディング：25vh 10％;最小-高さ：100vh;幅：100vw;ボックスサイズ：border-box;ボックスシャドウ：0 -1px 10px rgba（0、0、0、.7）; -webkit-transform-style：継承;変換スタイル：継承; } img {位置：絶対;上：50％;左：35％;幅：320px;高さ：240px; -webkit-transform：translateZ（.25px）scale（.75）translateX（-94％）translateY（-100％）rotate（2deg）;変換：translateZ（.25px）scale（.75）translateX（-94％）translateY（-100％）rotate（2deg）;パディング：10px; border-radius：5px;背景：rgba（240,230,220、.7）;ボックスシャドウ：0 0 8px rgba（0、0、0、.7）; } img：last-of-type {-webkit-transform：translateZ（.4px）scale（.6）translateX（-104％）translateY（-40％）rotate（-5deg）;変換：translateZ（.4px）scale（.6）translateX（-104％）translateY（-40％）rotate（-5deg）; } .slide：before {content： '';位置：絶対;上：0;下：0;左：0;右：0; } .title {幅：50％;パディング：5％; border-radius：5px;背景：rgba（240,230,220、.7）;ボックスシャドウ：0 0 8px rgba（0、0、0、.7）; } .slide：nth-​​child（2n）.title {margin-left：0;マージン右：自動; } .slide：nth-​​child（2n + 1）.title {margin-left：auto;マージン右：0; } .slide、.slide：before {背景：50％50％/カバー; } .header {text-align：center;フォントサイズ：175％;色：#fff;テキストシャドウ：0 2px 2px＃000; } #title {background-image：url（ 'img / html / 11 / parallax-scrolling-with-css-only.jpg'）;背景-添付ファイル：修正済み。 }＃slide1：before {background-image：url（ 'img / html / 11 / parallax-scrolling-with-css-only.jpg'）; -webkit-transform：translateZ（-1px）scale（2）;変換：translateZ（-1px）scale（2）; z-index：-1; }＃slide2 {background-image：url（ 'http://lorempixel.com/output/abstract-q-c-640-480-3.jpg'）;背景-添付ファイル：修正済み。 }＃slide3：before {background-image：url（ 'http://lorempixel.com/output/abstract-q-c-640-480-5.jpg'）; -webkit-transform：translateZ（-1px）scale（2）;変換：translateZ（-1px）scale（2）; z-index：-1; }＃slide4 {背景：＃222; } 
私はキットカットの答えが本当に好きですが、ロイ・プリンスが示唆したように、この効果を生み出すのに十分なものを正確に確認するために、それを必要最低限​​のものにまで減らすことは非常に役立ちます。私はここでそうしました。
 
  非常に基本的な視差スクロール効果を生成するには、次の例で十分です。 ブラウザのプレフィックス、フォールバックなどは対処されていないことに注意してください。でマークされたCSS値/ *例： * /デザイナーの裁量で変更される場合があります。
 
 
 
ここで私のフォークペンを参照してください。
 
html、body {幅：100％;高さ：100％;オーバーフロー：自動; }本体{遠近法：1px; / *例： * /} .background {変換：translateZ（-。4px）scale（.6）translateX（-104％）translateY（-40％）rotate（-5deg）; / *例： * /} .foreground {transform：translateZ（.25px）translateX（50％）scale（.75）rotate（2deg）; / *例： * /}
KitKatの回答に対するマイナーな修正：必要がないようですtransform-style：preserve-3d（少なくともChromeでは）、そしてその効果はむしろ 体に依存しますオーバーフロー：自動 。これを取り除くと視差が失敗します。
  
CSSトランジションを使用することで、少なくとも部分的な効果を得ることができるはずです。ただし、Alejandroが述べたように、CSSはスクロールを検出しません。
 
「そのクールな視差スクロール効果-純粋なCSS3で！」を見てください。 （http://css.dzone.com/articles/cool-parallax-scrolling-effect）例を示します。
 
重要なのは、内部ページリンクを使用することです。したがって、ユーザーはスクロールする代わりにページ内リンクをクリックし、ページを上下にスクロールして新しいセクションに移動します。ページがスクロールすると、トランジションによって視差効果が得られます。