Question

我使用名为Jinvertscroll的Jquery插件创建了一个带视差的水平滚动网站。但是，滚动在到达页面末尾之前停止。在https://dl.dropboxusercontent.com/u/246684898/VipSitaraman.com/examples/index.htm进行演示。请告诉我如何更改插件上的总卷轴长度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vip Sitaraman</title>
    <link rel="stylesheet" href="css/example.css" />
<body style="background-color:#383938">

<div id="main">
<div class="suit scroll">        
      <img id="animation" src="images/1.png"  alt="" />
</div>
<div class="plane scroll">        
      <img class="plane" src="images/plane.png"  alt="" />
</div>
<div class="pinned scroll">
    <a id="navv">< </a><a id="nav"> ></a>

    </div>
<div class="bg scroll">
        <img src="images/bg.jpg" alt="" />
    </div>
    <div class="horizon scroll">
        <img src="images/horizon_01.png" alt="" />
    </div>
    <div class="middle scroll">
        <img src="images/middle_01.png" alt="" />
    </div>
    <div class="front scroll">
        <img src="images/front_01.png" alt="" />
    </div>
    <div class="research scroll" id="research">
    </div>
<div class="music scroll" id="music">
    </div>
    </div>
</div>
</div>
    <script type="text/javascript" src="../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/js/jquery.jInvertScroll.js"></script>
    <script type="text/javascript">
    (function($) {
        $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
            {
            height: 3000, // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
            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);
            }
        });
    }(jQuery));
    </script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var b = 300
var bodyHeight = $("body").height()-$(window).height();
window.onscroll = function() {
     if($('#animation').attr('src') != 'images/suit.gif'){
        $('#animation').attr('src','images/suit.gif');
    };
};
});//]]>  

</script>



<script type='text/javascript'>//<![CDATA[ 

$(function (){
    var sdegree = 0;
    var orig = 0;
    var z = 1 + Math.random() * 20
    $(window).scroll(function () {
        if (sdegree > -10 && sdegree < 10 && sdegree - orig >= 0) {
            orig = sdegree;
            sdegree = sdegree + 1;
        } else if (sdegree > -10 && sdegree < 10 && sdegree - orig < 0) {
            orig = sdegree;
            sdegree = sdegree - 1;
        } else if (sdegree <= -10) {
            orig = sdegree;
            sdegree = sdegree + 1;
        } else if (sdegree >= 10) {
            orig = sdegree;
            sdegree = sdegree - 1;
        } else {
            orig = sdegree;
        }
        var srotate = "rotate(" + sdegree + "deg)";
        $('.plane').css('z-index','z');
        $(".plane").css({
            transform: srotate
        });
    });
});
//]]>  

</script>

<script type="text/javascript">
    $(function() {
  $("#nav").click(function() {
     $('html,body').animate({  
        scrollTop: $(document).scrollTop()+800
    }, 1000);
    if($('#animation').attr('src') != 'images/suit.gif'){
        $('#animation').attr('src','images/suit.gif');
    }
  });     
 });
</script>

<script type="text/javascript">
    $(function() {
      $("#navv").click(function() {
            $('html,body').animate({
              scrollTop: $(document).scrollTop()-800
            }, 1000);
      });
    });
    </script>
</body>
</html>

Answer 1

如果你只需要定义尺寸，那么这就是你要找的东西：

$.jInvertScroll(['.myScrollableElements'], {
width: 'auto',  // Page width (auto or int value)
height: 'auto', // Page height (the shorter, the faster the scroll)
onScroll: function(percent) {
    // Callback function that will be called each time the user
    // scrolls up or down, useful for animating other parts
    // on the page depending on how far the user has scrolled down
    // values go from 0.0 to 1.0 (with 4 decimals precision)
}
});

SOURCE

如何在Jinvert Scroll上设置总高度

1 个答案: