沒有背景圖像的視差div

處理網站的視差效果。我已經獲得了視差效果，使用背景圖像正常工作，但我決定只改變一點點。而不是使用bg圖像的效果，我正在尋找將效果應用到整個div，但我似乎無法使用整個div得到這個工作。希望將效果應用於.section div中的所有內容，同時保持#subpanel/scroll-pane獨立可滾動。沒有背景圖像的視差div

HTML -

<div class="col col-100"> 
<div class="col col-30"> 
<div class="section">  
<div id="subpanel" class="nav_dialog displayed" style="height: 660px; left: ; display: block;"> 
<div class="close_link"> 
    <a href="#">Close (x)</a> 
</div> 
<div class="scroll-pane" style="overflow: hidden; padding: 0px; width: 475px;"> 
<div class="jspContainer" style="width: 475px; height: 620px;"> 
    <div class="jspPane" style="padding: 0px 65px 0px 20px; top: 0px; width: 396px; font-size: 15px;"> 
     <img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""> 
     <p>&nbsp;</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div class="jspVerticalBar"> 
     <div class="jspCap jspCapTop"></div> 
     <div class="jspTrack"> 
      <div class="jspDrag"> 
       <div class="jspDragTop"></div> 
       <div class="jspDragBottom"></div> 
      </div> 
     </div> 
     <div class="jspCap jspCapBottom"></div> 
    </div> 
</div> 
</div> 
</div> 
</div> 
</div>

JS -

<script> 

$(function() { 
    $.fn.parallax = function(options){ 
     var $$ = $(this); 
     offset = $$.offset(); 
     var defaults = { 
      "start": 0, 
      "stop": offset.top + $$.height(), 
      "coeff": 0.95 
     }; 
     var opts = $.extend(defaults, options); 
     return this.each(function(){ 
      $(window).bind('scroll', function() { 
       windowTop = $(window).scrollTop(); 
       if((windowTop >= opts.start) && (windowTop <= opts.stop)) { 
        newCoord = windowTop * opts.coeff; 
        //console.log($$) 

        $$.css({ 
         "position": "0 "+ newCoord + "px" 
        }); 
       } 
      }); 
     }); 
    };  
    $('.section').parallax({ "coeff":-0.65 }); 
    $('.section .scroll-pane').parallax({ "coeff":2.55 }); 

}) 
</script> 

<script> 
$(function() 
{ 
    $('.scroll-pane').jScrollPane(); 
}); 
</script>

希望這有一定的道理。任何幫助，將不勝感激。

來源

2014-01-24 Eric H

這是一個極好的題！這是我能夠找到關於沒有背景圖像的視差的唯一問題。你的JS在這裏非常出色，非常有幫助 – bwalshy

看來你改變背景位置到位置。的位置允許的值是絕對的，固定的，相對的，靜態&繼承

您可能正在尋找這樣的事情來移動一個完整的div

$$.css({ 
    "top": newCoord + "px" 
});

或

$$.css({ 
    "margin-top": newCoord + "px" 
});

來源

2014-01-24 18:09:13

沒有背景圖像的視差div

回答

相關問題