2013-03-30 3 views
0

그래서 5 개의 div가 있습니다. 어떤 이유로 나는 스크립트를 수정하려고하는데, 케이스 1과 케이스 2가 오른쪽에서옵니다. 케이스 3은 왼쪽에서옵니다. 케이스 0은 왼쪽부터 들어오고 케이스 5는 오른쪽에서 들어옵니다. 그러나 케이스 3, 1 및 2에 대한 설정을 사용하면 정지 상태가되고 위쪽/아래쪽 만 애니메이션으로 나타납니다.Div 잘못된 쪽을오고 있습니다 - 스크롤 애니메이션

어떻게 해결할 수 있습니까?

나는 거기에 불투명도를 추가하고 싶다. 나는 그것에 대해 어떻게해야할지 모르겠다. 나는 공을하고 1. 왼쪽/오른쪽 문제에 대한 확실하지

jQuery(document).ready(function() { 
var myHeight; 
jQuery('.type-portfolio').each(function (i) { 
    var myElement = jQuery(this); 
    myElement.data('params', { 
     top1: jQuery(this).css('top'), 
     x1: jQuery(this).css('left') 
    }); 
    switch (i) { 
    case 0: 
     myElement.data('params', { 
      top0: -600, 
      x0: -2600, 
      top1: jQuery(this).css('top'), 
      x1: jQuery(this).css('left') 
     }); 
     break; 
    case 1: 
     myElement.data('params', { 
      top0: -200, 
      x0: -930, 
      top1: jQuery(this).css('top'), 
      x1: jQuery(this).css('left') 
     }); 
     break; 
    case 2: 
     myElement.data('params', { 
      top0: -200, 
      x0: -1030, 
      top1: jQuery(this).css('top'), 
      x1: jQuery(this).css('left') 
     }); 
     break; 
    case 3: 
     myElement.data('params', { 
      top0: 250, 
      x0: -2600, 
      top1: jQuery(this).css('top'), 
      x1: jQuery(this).css('left') 
     }); 
     break; 
    case 4: 
     myElement.data('params', { 
      top0: 250, 
      x0: -530, 
      top1: jQuery(this).css('top'), 
      x1: jQuery(this).css('right') 
     }); 
     break; 
    } 
}); 

function init() { 
    myHeight = jQuery(window).height(); 
    jQuery('.topWrap').css('height', myHeight - 300); 
    jQuery('.portfolioWrapper').css('min-height', Math.max(myHeight/2 + 250, 600)); 
} 
jQuery(window).scroll(function() { 
    var s_max = myHeight/2 + 250; 

    function move(p0, p1, s) { 
     return Math.min((-p0 + p1)/s_max * s + p0, p1); 
    } 
    var scrollTop = parseInt(jQuery(window).scrollTop()); 
    jQuery('.type-portfolio').each(function (i) { 
     var myX = move(jQuery(this).data('params').x0, parseInt(jQuery(this).data('params').x1), scrollTop), 
      myY = move(jQuery(this).data('params').top0, parseInt(jQuery(this).data('params').top1), scrollTop); 
     if (i < 3) { 
      jQuery(this).stop().css({ 
       left: myX + 'px', 
       top: myY + 'px' 
      }) 
     } else { 
      jQuery(this).stop().css({ 
       right: myX + 'px', 
       top: myY + 'px' 
      }) 
     } 
    }) 
}) 
init(); 
jQuery(window).resize(function() { 
    init(); 
}); 
}) 

답변

0

에 페이드하지만 스크롤에 요소를 퇴색 할 :

$(document).ready(function($){ 
    $(window).scroll(function(){ 
     if($(this).scrollTop() > 300){ 
      $("#YourElementID").fadeTo("slow",0); 
     } 
    }); 
}); 
+0

내가 요소를 페이드하는 방법을 알고는 문제가 내 스크롤링 효과로 구현됩니다 –

+0

편집보기, 건배. –

+0

그 방법입니다. 300px 이후에 실행하는 것이 아니라 스크롤로 작업하기를 원했습니다. opacity0과 opacity1에 x1과 top1을 추가하여 작동 시켰습니다. 이제 유일한 문제는 왼쪽 및 오른쪽 방향입니다. –