javascript - 仅在一个 div 上使用 jInvertScroll.js

Question

我想要的是仅在一个 div 上使用 jInvertScroll(http://www.pixxelfactory.net/jInvertScroll/ 它会创建水平视差)，然后垂直滚动到网站的其余内容。

类似这样的:

<div id="parallax"> //this one scrolls horizontally
   ...
</div>

<div id="content"> //this one and the others scroll vertically when "parallax" is done scrolling
   ...
</div>

但是我是 javascript 新手，不知道该怎么做。

Answer 1

/**
 *	jQuery Plugin for simple vertical scrolling - horizontal movement parallax effect
 *	I wrote this plugin for a project we have done.
 *
 *	License:
 *	The MIT License (MIT)
 *
 *	@version 0.8.3
 *
 *   Copyright (c) 2013 pixxelfactory
 *
 *   Permission is hereby granted, free of charge, to any person obtaining a copy
 *   of this software and associated documentation files (the "Software"), to deal
 *   in the Software without restriction, including without limitation the rights
 *   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 *   copies of the Software, and to permit persons to whom the Software is
 *   furnished to do so, subject to the following conditions:
 *
 *   The above copyright notice and this permission notice shall be included in
 *   all copies or substantial portions of the Software.
 *
 *   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 *   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 *   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 *   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 *   THE SOFTWARE.
 **/
(function($) {
  'use strict';

  $.jInvertScroll = function(sel, options) {
    var defaults = {
      width: 'auto', // The horizontal container width
      height: 'auto', // How far the user can scroll down (shorter distance = faster scrolling)
      onScroll: function(percent) { // Callback fired when the user scrolls down, the percentage of how far the user has scrolled down gets passed as parameter (format: 0.xxxx - 1.0000)
        // do whatever you like
      },
      initialized: function() {

      },
      afterResized: function() {

      }
    };

    var config = $.extend(defaults, options);

    if (typeof sel === 'Object' && sel.length > 0) {
      return;
    }

    var elements = [],
      longest = 0,
      totalHeight,
      winHeight,
      winWidth;

    function init() {
      // Extract all selected elements from dom and save them into an array
      $.each(sel, function(i, val) {
        $(val).each(function(e) {
          elements.push($(this));

          var w = $(this).width();
          if (longest < w) {
            longest = w;
          }
        });
      });

      // Use the longest elements width + height if set to auto
      if (config.width == 'auto') {
        config.width = longest;
      }

      if (config.height == 'auto') {
        config.height = longest;
      }

      // Set the body to the selected height
      $('body').css('height', config.height + 'px');


      // Call the initialized callback
      if (typeof config.initialized === 'function') {
        config.initialized.call(this, config.height);
      }
    }

    function calc() {
      totalHeight = $(document).height();
      winHeight = $(window).height();
      winWidth = $(window).width();
    }

    function onscroll(e) {
      var currY = $(this).scrollTop();

      // Make calculations
      calc();

      var diff = totalHeight - winHeight;
      var scrollPercent = 0;

      if (diff != 0) {
        // Current percentual position
        scrollPercent = (currY / diff).toFixed(4);
      }

      // Call the onScroll callback
      if (typeof config.onScroll === 'function') {
        config.onScroll.call(this, scrollPercent);
      }

      // do the position calculation for each element
      $.each(elements, function(i, el) {
        var deltaW = el.width() - winWidth;
        if (deltaW <= 0) {
          deltaW = el.width();
        }
        var pos = Math.floor(deltaW * scrollPercent) * -1;
        el.css('left', pos);
      });
    }

    function setlisteners() {
      // Listen for the actual scroll event
      $(window).on('scroll resize', onscroll);
      $([document, window]).on('ready resize', calc);
    }


    // Init actions
    init();
    setlisteners();


    return {
      reinitialize: function() {
        init();
        setlisteners();
      },
      destroy: function() {
        // Remove previously added inline styles
        $('body').attr('style', '');

        // Remove listeners
        $(window).off('scroll resize', onscroll);
        $([document, window]).off('ready resize', calc);
      }
    };
  };
}(jQuery));



(function($) {
  var elem = $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
    {
      onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
        console.log(percent);
      },
      initialized: function(height) {
        $("#content").css("margin-top", height);
      }
    });

  $(window).resize(function() {
    if ($(window).width() <= 768) {
      elem.destroy();
    } else {
      elem.reinitialize();
    }
  });
}(jQuery));

html,
body {
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}
/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */

body {
  overflow-x: hidden;
  background: url('../images/bg.jpg') repeat top left;
}
h1 {
  font-size: 20px;
  font-weight: normal;
  color: #2e6e80;
}
/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */

.scroll {
  position: fixed;
  bottom: 0;
  left: 0;
  top: 0;
}
/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */

.horizon {
  z-index: 1;
  width: 3000px;
  background: lightblue;
}
.middle {
  z-index: 500;
  width: 4000px;
  background: lightpink;
}
.front {
  z-index: 1000;
  width: 6000px;
  background: lightgreen;
}
#content {
  height: 450px;
  background: red;
  position: relative;
  z-index: 1001;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>jInvertScroll Example</h1>

<div class="horizon scroll">

</div>
<div class="middle scroll">

</div>
<div class="front scroll">

</div>
<div id="content"></div>

我不知道你想要什么，但我想你想要这样。