2

すべての前景要素 (背景視差なし) に視差効果を適用したいクライアント向けの Web を開発しています。この Web は、幅 1234 ピクセル、高さ 9000 ピクセル程度 (すべての画像、大きな背景画像、および前景要素の透過性を備えた PNG) で、いくつかの前景要素があります。iOS ベースの新しいスクロールバーを作成するために、stellar.js と iscroll.js を使用してこの効果を実現しました。視差は滑らかでシンプルです。下にスクロールすると、要素が上に移動し、その逆もありますが、私が抱えている問題 (私はすでに stellar.js 開発者に連絡していますが、まだ答えを待っています。彼がこれを見てくれることを願っています:))状況によっては、ビューポートが特定のスクロールトップに固定されるという弾むような効果があること。たとえば、Web を読み込んで、すべて問題なく、

ここSOでこの問題を検索しているいくつかの投稿を見つけました。何らかの方法で私を助けた答え(最初からこの問題がありましたが、下にスクロールすることさえできませんでした)はこれです:

iScroll コンテンツをスクロールせず、トップに戻るだけです

その投稿では、stellar/iscroll と同じ問題について説明しており、これらの CSS プロパティを変更することでバウンスを最小限に抑えることができましたが、それでも発生します。要素に対して多くの高さの組み合わせを試しましたが、#wrapper #scrollerその答えに従うと#scroller、コンテンツよりもはるかに背が高いように見えるため、下にスクロールすると、コンテンツの下部に跳ね返るまで、この巨大な黒い背景が表示されます.

いくつかのコードを提供しますが、Web は完成していないため共有できず、クライアントから共有しないように求められました。

これは にあり<head>ます。ここでプラグインを初期化します。テンプレートは、モバイル視差に関する stellar.js チュートリアル ( http://markdalgleish.com/2012/10/mobile-parallax-with-stellar-js/ )から取得しました。

<meta name="viewport" content="width=device-width, initial-scale=0.62, maximum-scale=0.62, minimum-scale=0.62, user-scalable=no">

<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/iscroll.js"></script>
<script src="js/vendor/jquery.stellar.js"></script>
<script type="text/javascript">

    function loaded() {
      var ua = navigator.userAgent,
        isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);

      if (isMobileWebkit) {
        $('html').addClass('mobile');
      }

      $(function loaded(){
        var myScroll;

        if (isMobileWebkit) {

            setTimeout(function () { myScroll = new iScroll('wrapper', { useTransform: true, useTransition: false } ); }, 5000);

            setTimeout(function () { myScroll.refresh() }, 10000);

          $('#scroller').stellar({
            scrollProperty: 'transform',
            positionProperty: 'transform',
          });
        } else {
          $.stellar({
            horizontalScrolling: false,
          });
        }
      });

    };

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 100); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);

</script>

<body onload="loaded()">
<div id="wrapper">
    <div id="scroller">
        <div id="fg" data-role="content">

            <!-- all the backgrounds, I load them with the js preloader and apply them as a background-image -->
            <div id='rff-bg0'></div>
            <div id='rff-bg1'></div>
            <div id='rff-bg2'></div>
            <div id='rff-bg3'></div>
            <div id='rff-bg4'></div>

            <div id='nav-bar' data-position="fixed"> <-- This nav-bar has to be fixed because is used to navigate the web
                <!--some buttons here-->
            </div>

            <!-- lots of divs, these are the foreground parallax elements, all with the data-stellar-ratio="", this is working great -->

        </div>
    </div>
</div>
</body>

CSS、視差に影響を与える特定の部分、恒星プラグインと iscroll プラグインの両方を共有します。このスニペットは、上記の恒星チュートリアルからも取得されました。

.mobile body {
  overflow: hidden;
}

.mobile #wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9052px;
  z-index: -1;
  background-color: #000;
}

.mobile #scroller {
    height: 20000px;
    background-color: #000;
}
4

0 に答える 0