を徐々にの不透明度をページの下部で0から1に変更する機能が必要です。ページの一番下にフェードイン（徐々に）
私はプロジェクトの上部で同様の機能を使用しますが、フェードインの代わりにフェードアウトを使用します。これを作成するのはかなり簡単でしたが、設定したしきい値を使ってページの最後にフェードインするのは悪夢です。
var scrollBottom: (($(document).height() - $(window).height()) - $(window).scrollTop())
を私は数で「scrollBottom」を分割しなければならないしきい値を設定するには：
の研究の後、私はそれを使用して、ページの下部にフェードアウトを作成することが可能であることを発見しました。すべてうまく動作しますが、私はフェードインをフェードインに変更することはできません。私は不透明ではなく色で遊んでいました。テキストを白から黒に変更すると同じ結果が得られますが、「scrollBottom」から別の値を特定の色に割り当てて徐々に変更することはできませんでした。
多くの試みの後、私はページの下部にフェードアウトエフェクトを保存するソリューションを使いましたが、フェードアウトするテキストの代わりに、私はdivの上にある単色でフェードアウトしていますテキストレイヤー。それは動作しますが、私はここに私のdivのdisplay:none;
に設定することができますが、不透明度が0になるまでのテキストをハイライト表示することができないという事実に約満足していないコードです：
$(window).on("scroll", function() {
$(".h-work").css("opacity", 1 - $(window).scrollTop()/320);
if ($(window).scrollTop() >= 320) {
$(".h-work").hide();
} else {
$(".h-work").show();
}
var t = 320;
var sb = (($(document).height() - $(window).height()) - $(window).scrollTop());
var f = sb/t;
$(".hide").css("opacity", f);
if (sb >= 320) {
$(".h-work-bottom").hide();
} else {
$(".h-work-bottom").show();
}
if (f <= 0) {
$(".hide").hide();
} else {
$(".hide").show();
}
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
overflow-y: scroll;
}
body {
height: 400%;
width: 100%;
}
.wrap-fixed-real {
height: 100vh;
width: 100%;
position: fixed;
}
.h-work {
display: flex;
opacity: 1;
align-items: center;
justify-content: center;
z-index: 10;
}
.h-work-bottom {
display: flex;
opacity: 1;
align-items: center;
justify-content: center;
z-index: 9;
}
h1 {
position: relative;
padding: 0px 48px;
width: 100%;
max-width: 640px;
display: block;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 26px;
text-align: left;
line-height: 34px;
color: #000000;
}
.hide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrap-fixed-real h-work">
<h1>Scroll down</h1>
</div>
<div class="wrap-fixed-real h-work-bottom">
<h1>
<div class="hide"></div>More, even worse projects to come.</h1>
</div>
</body>
</html>あなたが見ることができるようにvarfは、私は誰にもいくつかのランダムなテキストを選択しようとするつもりはありませんが、私には、これはプロではない、ということを知って0になるまで、ユーザーは下部のテキストをhiglightすることができません。私は同じことをしましたが、2つの異なる方法を使用しました。より一貫性のあるコードにしたいと思っています。
これは私の質問です。上記の例で見ることができるのと同じ結果を得ることはできますが、divの代わりにテキストフェードインを使用することはできますか？
EDIT：私が見てきた（文字通り、数秒間）、彼はpointer-events: none;がdiv要素.coverの下にテキストを選択することができbeeingていないとの問題を解決することを述べているいくつかの見知らぬ人からの回答。できます！今のところ私はこれが行く方法だと思います。私は知らない、なぜあなたの返信を削除しましたか。
ありがとうございました！私は本当にあなたの助けに感謝します。 :) – Tanuki