特定の量をスクロールするとフェードイン

-1

jqueryを使わずに特定の量のピクセルをスクロールしたときにフェードインしたいdivを、javascriptのみを使用したいと思っています。特定の量をスクロールするとフェードイン

2017-02-27 Dogantr

こんにちは@Dogantr - 歓迎StackOverflow。私はこのような質問は一般的に下落して閉じられるのではないかと心配しています。 StackOverflowはコード作成サービスではなく、特定の回答を求める特定の質問をします。 http://stackoverflow.com/help/how-to-ask –

jqueryのがのJavascriptで、あなたはループJSで（スクロール用）リスナーが変更しない限り（Codepenから）あなた自身がこのように、HTML5（CSS3とjQueryの一部）を使用する必要がありますドキュメントオブジェクトモデルで何か、

HTML

<div class="top"><div class="title">Fade Away</div></div>

CSS

body { 
    margin: 0; 
    height: 1000px; 
} 

.top { 
    margin: 0; 
    position: relative; 
    width: 100%; 
    background-color: #aaa; 
    height: 300px; 
    opacity: 1; 
    text-align: center; 
    font-family: 'helvetica'; 
    font-size: 80px; 
    font-weight: 100; 
    color: #fff; 
} 

.title { 
    position: absolute; 
    top: 60%; 
    left: 100px; 
}

$(window).scroll(function(){ 
    $(".top").css("opacity", 1 - $(window).scrollTop()/250); 
    });

だけ追加することができますskrollrと呼ばれるこの1のようなあなたが使用できるいくつかの事前書かれた視差のスクリプトがありますが、 JSファイルを参照し、ページコードにCSSを追加してください：https://prinzhorn.github.io/skrollr/

あなたが始めるのに役立つPE！

出典

2017-02-27 21:07:20 Janine

Tnxs m8 !!!!!!!!を参照してください。 – Dogantr

スクロール位置を上から取得するには、document.pageYOffsetプロパティを使用できます。は、あなたがたsetIntervalを使用する必要がで何かをフェードインするには、ここでそれを見ることができます：

How to do fade-in and fade-out with JavaScript and CSS

出典

2017-02-27 21:03:15

特定の量をスクロールするとフェードイン

答えて

関連する問題