0

これは、jQuery で Parallax タイプのものを扱うのは初めてです...そして、私は限界点に達し、それを修正する方法がわかりません。

JSFiddleはこちら

私のコードは... HTML

<div id="bannerText" style="margin-top: 0px; opacity: 1;"> <center>Text, blah blah blah</center> </div>

Javascript

 function scrollBanner() {
//Get the scoll position of the page
scrollPos = jQuery(this).scrollTop();

//Scroll and fade out the banner text
jQuery('#bannerText').css({
  'margin-top' : -(scrollPos/3)+"px",
  'opacity' : 1-(scrollPos/300)
});
 }

CSS

#bannerText { position: fixed; top: 250px; text-align: center; width: 100%; }

ユーザーが下にスクロールすると、テキストがゆっくりと下に落ちて（ただし、それよりも遅いため、画面から消える）、フェードアウトするようにしようとしています。

今のところ、うまくいっていますが、何もありません。画面に私のテキストが表示されているだけです...

編集：このウェブサイトのようにしようとしています。たとえば、ここをクリック

4

2 に答える 2

1

これが実際の例です

パラメータを操作して、必要な効果を得ることができます。このフィドルのように、ページにもjQueryを必ず含めてください：

$(window).on('scroll', function() {
    //Get the scoll position of the page
    scrollPos = $(this).scrollTop();

    //Scroll and fade out the banner text
    $('#bannerText').css({
      'margin-top' : (scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/100)
    });

});
于 2013-09-08T18:37:48.627 に答える