1

こんにちは、sckrollr を理解しようとしていますが、相対的な使用に失敗しているようです。取得しようとしているのは次のとおりです。

  • 内部にいくつかの要素が入った X 個のボックスがある
  • その要素のアンカーがビューポートのアンカーに到達すると、何かが行われます

上記のコードを持っていて、skrollr が 2 番目の .text 要素のアニメーションを実行して、ページのスクロールを開始することがわかりません。要素のアンカーがビューポートのアンカーに到達したときにのみアニメーションを作成するべきではありませんか?

わからない

    <style>
      body{height:100% !important;} /*SOLUTION FOR THIS PROBLEM*/
      .paralaxelem2{width:100%;height:100%;background:50% 0 no-repeat fixed;background-size:100% 100%;}
      .text{margin:0 auto;width:500px;padding:150px 0 0 0;position:relative;}
      .text h1{padding:0px;margin:0px;text-transform:uppercase;color:#000;}
      .text p{background-color:#000;color:#fff;padding:15px;}
    </style>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_2.jpg');">
  <div class="text" data-0-top-top="opacity:1;" data--300-top-top="opacity:0;">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_1.jpg');">
  <div class="text" data-bottom-top="opacity:1;padding-top:150px;" data-bottom-bottom="opacity:1;padding-top:600px;">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_3.jpg');">
  <div class="text">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>
4

2 に答える 2

1

私はこの問題の解決策を見つけました.他の人が私と同じ問題を抱えているようです.skrollrは体の高さを自動に設定して計算を行い、私のような100％の高さを持つ要素を台無しにします.セクション要素なので、css シート「body{height:100% !important;}」に設定するだけで問題を解決できます。それは私にとって問題を解決しました。

ソース: https://github.com/Prinzhorn/skrollr/issues/347

于 2013-10-21T09:26:07.520 に答える