각기 다른 속도로 스크롤하는 여러 배경에 시차 스크롤 효과 적용

Question

배경 및 머리말/꼬리말 이미지 만 포함하는 시차 효과를 만들기 위해 주 콘텐츠 마크 업 (일반 Wordpress 루프) 만 남기고 있습니다.

배경이 상단 .site-branding에서 별도의 사업부에 img있는 상단 배너를 제외하고, 전체 문서 소요 사업부 #page 및 body에있는 채우기 배경에 모두.

#page { 
    background:url("http://i.imgur.com/jK3tbU8.png") no-repeat scroll bottom center, url("http://i.imgur.com/TSrLfq1.png") repeat-x scroll top center, url("http://i.imgur.com/Md0r0mw.png")repeat-x scroll bottom center; 
    padding:0; 
    margin:0; 
    transition: 0s ease-in-out; 
    transition-property: background-position; 
} 

body { 
    background:url("http://i.imgur.com/910XVzz.jpg") repeat scroll top; 
    padding:0; 
    margin:0; 
    transition: 0s ease-in-out; 
    transition-property: background-position; 
} 

.site-branding { 
    margin-left:auto; 
    margin-right:auto; 
    min-width: 0; 
    overflow: hidden; 
    display: block; 
} 
.site-branding img { 
    max-width:100%; 
    margin-left:0; 
} 

일정한 속도로 상단 배너 스크롤까지, 약간 느린 속도로 상단 배경 스크롤 업, 페이지의 중간에 일반적으로 채우기 스크롤 ...

지금까지 너무 좋아

(아래 링크 된 JSFiddle을 참조하십시오.) 그때 원하는

은 (jK3tbU8.png은 "만다라 결국 페이지의 하단에있는 정지 (느린 스크롤보다, 예를 들어) 두 개의 하단 배경, jK3tbU8.png 및 Md0r0mw.png가 자신의 속도로 스크롤 할 수 있도록 "바닥 글 페이드 배경 jK3tbU8.png 상단에있는 바닥 글 배너).

아래 스크립트를 사용하면 속도를 올릴 수 있습니다. 그러나 정확히 아래쪽에서 멈출 수 없습니다..

나는 주로 scrollTop()과 offset()이 위에 올랐기 때문에 이런 일이 발생할 것이라고 생각합니다 ...?

당신은 값을 빼는 문제라고 생각할 것입니다.하지만 뷰포트의 높이가 모든 차이를 만들어냅니다. 뷰포트가 변경되면 이미지는 매우 다름에도 불구하고 더 높거나 낮은 위치에서 끝납니다.

계산에 뷰포트를 고려해야 할 것으로 생각하십니까? 그러나 나는 어떻게 몰라!

jQuery(function ($) { 
    "use strict"; 

    $(document).ready(function(){ 
    var $win = $(window); 

    $('div#page').each(function(){ 

     //set an arbitrary "speed" 
     var scroll_speed1 = 8; 

     var viewportHeight = $(window).height(); 

     //set heights of backgrounds (any easy way to get this dynamically?) 
     var topFade = 600; 
     var bottomFade = 870; 
     var mandalaBottom = 457; 

     var $this = $(this); 

     //set background-attachment here, so that in style.css top-fade can be "scroll" 
     //needed in case the script breaks 
     $this.css("background-attachment", "scroll, fixed, scroll"); 

     //set all the initial positions 
     //the idea is that if the images are down below (= higher number) 
     //they will scroll up faster, at a matching speed (= number dimishing faster) 
     var bgP1 = (($this.outerHeight()*2) + mandalaBottom); //mandala-bottom 
     var bgP2 = $this.offset().top; //top-fade 
     var bgP3 = ($this.outerHeight()+(bottomFade)); //bottom-fade 
     var initialValue = "center " + bgP1 + "px," + "center " + bgP2 + "px," + "center " + bgP3 + "px"; 

     //put the images in the css 
     $this.css("background-position", initialValue); 

     //bind to the scroll event 
     $(window).scroll(function() { 

      //percent between viewport and height of page 
      var viewportDiff = percentChange($this.outerHeight(), viewportHeight); 
      console.log("the percent between viewport and height of page is: " + viewportDiff+ "%"); 

      //percent between position of pic and height of page 
      var perDiff = percentChange(bgP1, $this.outerHeight()); 
      console.log("the percent between position of pic and height of page is: " + perDiff); 

     /* 1) $win.scrollTop() = position of the scroll (increasing number) 
      2) perDiff = the proportion between the page and the position of the pic (%) 
      3) viewportDiff= the proportion between the page and the viewport (%) 
      4) $this.outerHeight() = height of the page 
      => scroll + the x% of scroll (given by the difference with the position of the pic) - the x% of page (given by the difference between viewport and page) + the height of the image */    
      var numberToSubstract = ($win.scrollTop() + percentOf($win.scrollTop(), perDiff) - percentOf(viewportDiff, $this.outerHeight()) + (mandalaBottom/2)); 
      console.log("the initial position of the pic was: " + bgP1); 
      console.log("we have substracted this much: " + numberToSubstract); 
      var bgNP1 = bgP1 - numberToSubstract - (mandalaBottom); 
      console.log("the pic now is here: " + bgNP1); 
      console.log("the height of the page is: " + $this.outerHeight());    


      //this calculates where to put the top-fade as the page is scrolled 
      var bgNP2 = -(($win.scrollTop() - $this.offset().top)/ scroll_speed1); 

      //this calculates where to put the bottom-fade as the page is scrolled 
      var perDiff3 = percentDiff(bgP3, $this.outerHeight()); 
      var numberToSubstract3 = ($win.scrollTop() + percentOf($win.scrollTop(), perDiff3))/scroll_speed1; 
      var bgNP3 = bgP3 - numberToSubstract3 - bottomFade; 
      //put the new values in the css 
      var newValue = "center " + bgNP1 + "px," + "center " + bgNP2 + "px," + "center " + bgNP3 + "px"; 
      $this.css("background-position", newValue); 

      }); //scroll 
     }); //page 

      //this takes care of mandala-top 
      $('div.site-branding').each(function(){ 

       //set an arbitrary speed 
       var scroll_speed = 1.5; 

        //bind to the scroll event (again?) 
        $(window).scroll(function() {    

         //this calculates where to put the top-fade as the page is scrolled 
         var bgNP2 = -(($win.scrollTop() /*- $this.offset().top --not needed since it is 0*/)/scroll_speed); 

         //put the new values in the css 
         var newValue2 = bgNP2 + "px"; 
         $('#mandalaTop').css("position", "relative"); 
         $('#mandalaTop').css("top", newValue2); 
         $('#mandalaTop').height(448 /*height of top img*/); 

        }); //scroll 

     }); //div.site-branding 

    });//document ready 

    if(navigator.userAgent.match(/Trident\/7\./)) { 
     $('body').on("mousewheel", function() { 
      event.preventDefault(); 
      var wd = event.wheelDelta; 
      var csp = window.pageYOffset; 
      window.scrollTo(0, csp - wd); 
     }); 
    } 

    //following this calculation: 
    //http://www.calculatorsoup.com/calculators/algebra/percent-difference-calculator.php 
    function percentDiff(val1, val2) { 
     var difference = ((val1 - val2)/((val1+val2)/2)) * 100; 
     return difference; 
    } 

    function percentOf(percent, value) {   
     var n = percent/100; 
     return n * value; 
    } 

    function percentChange(bigVal, smallVal) { 
     var change = ((smallVal-bigVal)/bigVal) * 100; 
     return 100 + change; 
    } 

}); 

가 조금 더 위를 이해하고, 간단한 HTML을 참조하십시오

여기에 희망이 이해하기 너무 어려운 일이 아니다 것, 내 모든 코드는, 내가 그 안에 의견을 많이 넣어입니다 이 모든 것을 포함하는 마크 업은 JSFiddle입니다.

정상적으로 작동하지만 바닥에 엉망이됩니다.

//put the new values in the css 
var newValue = "center " + bgNP1 + "px," + "center " + bgNP2 + "px," + "center " + bgNP3 + "px"; 

에 :

Answer 1

아주 간단한 수정 변경하는 것입니다 기본적으로

//put the new values in the css 
var newValue = "center bottom," + "center " + bgNP2 + "px," + "center " + bgNP3 + "px"; 

, 당신이 바닥에 충실하려는부터 바닥 장식 요소 오프셋 동적 스크롤을 할당하지.

여전히 하단 요소에 애니메이션을 적용하고 하단 요소에 고정하는 경우 간단한 조건부로 수행 할 수 있습니다. 이 경우 457은 이미지 높이입니다.적 오프셋 (offset)를 가지는 경우에 따라서, 페이지 높이보다 작아진다 - 이미지 높이, 간격을 피하기 위해 아래로 이미지를 스틱 : 당신은 무엇을 제안하는 것은 단순히 아래 이미지에 대한 시차 효과를 제거하는 것입니다

if(bgNP1 < $this.outerHeight() - 457) 
{ 
    bgNP1 = $this.outerHeight() - 457; 
} 

//put the new values in the css 
var newValue = "center " + bgNP1 + "px," + "center " + bgNP2 + "px," + "center " + bgNP3 + "px";