2

background-attachment に問題があります: 修正済み。ページの要素に適用すると、非常に途切れ途切れのスクロール効果が生じます。基本的に、ユーザーにとって良い経験ではないものではありません。

私のコードはここにあります：

HTML

<div class="con row1">
<p>Some text here just to flesh out example</p>
</div>

<div class="grad-space">
</div>

<div class="con row2">
<p>Some text here just to flesh out example</p>
</div>

CSS

.con {
height: 100vh; }

.grad-space {
 height: 50vh; }

.row1 {
background: url('https://s-media-cache-    ak0.pinimg.com/736x/3d/88/09/3d880927ac8bfec60a04ca93064569e0.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed; }

.row2 {
background:   url('https://d3rt1990lpmkn.cloudfront.net/640/31762579d8fd04a756fb791ac9c3634b5828f0dd') no-repeat center;
background-size: cover;
background-attachment: fixed; }

ここに、私が話していることを正確に示すコードペンへのリンクがあります: http://codepen.io/reskk/pen/qaYJwq

編集: フルページ Codepen: http://codepen.io/reskk/full/qaYJwq/

不思議なことに、ブラウザーのサイズを小さな幅 (たとえば 800px) に縮小すると、実際にはスクロールが非常にスムーズになります。

ブラウザーが最大幅 (および最大高さ、コード入力ボックスのために codepen を完全に取得できない) にあるとき、ぎくしゃくした途切れ途切れのスクロールが発生します。

私はこれについて広範な検索を行いましたが、解決策を見つけることができませんでした。

誰かがこれについて何か考えを持っていますか? これは非常に素晴らしい効果ですが、残念なことに、それがもたらすパフォーマンスによって役に立たなくなります。

ありがとう、

レスク

4

2 に答える 2

1

どのコードペンもページ全体で表示できることをご存知ですか? フルページ Codepen

あなたのchoppy効果について、おそらくあなたが探しているのは ですscroll animation smoother。これが正しい用語かどうかはわかりません。それは、マウスのスクロール効果を遅らせるか、「行ジャンプ」の高さを減らして、動きをより良く見せることです。

CSS パララックス by davidwalsh

削除されたフレームワーク/ライブラリ参照の編集 (オフトピック)

于 2016-10-11T22:53:32.220 に答える