Scale div on scroll - 자바 스크립트

Question

이 기존 코드 백 (http://codepen.io/anon/pen/fDqdJ)으로 작업하기. 나는 페이지의 상단에서 일정한 거리에 이미 움직이는 div가 움직이는 동안 크기가 변하는 또 다른 문장을 추가하고 싶다.

정말 구문에 어려움을 겪고 스크롤의 애니메이션 div의 크기를 증가시킵니다. 나는 CSS 변환을 사용할 필요가 있다고 생각하지만 도움이 필요하다!

은 JS 예를 들어 아래를 참조하십시오 :

여기

var $window = $(window); 
var $box = $("#box"); 

$window.scroll(function() { 
    var scrollTop = $window.scrollTop(); 
    console.log(scrollTop); 
    if (scrollTop >= 250 && scrollTop < 400) { 
     $box.css({top: -250 + scrollTop});  
    } else if(scrollTop >= 400 && scrollTop < 460) { 
     $box.css({left: (10+(scrollTop-400)/2)+"%"}) 
    } else if(scrollTop >= 460 && scrollTop < 580) { 
     $box.css({top: (50+(scrollTop-460)/2)+"%"}) 
    } else if(scrollTop >= 580 && scrollTop < 620) { 
     $box.css('transform', 'scale(' + whateverTheScaleShouldBe + ')'); 
    } 
}); 

는 HTML 구조입니다 - 어떤 도움이 많이 감사

<div class="wrapper"> 
    <div class="row" id="row1"> 
    </div> 
    <div class="row" id="row2"> 
    <div id="box"></div> 
    </div> 
    <div class="row" id="row3"> 
    </div> 
    <div class="row" id="row4"> 
    </div> 
</div> 

! :)

J

Answer 1

이 코드의 문제 :

$box.css({transform:scale(1.1)}) 

는 ... 값이 잘못된 것입니다. CSS 속성에 설정할 값은 문자열이어야합니다. 현재 코드는 자바 스크립트에서 scale 함수를 호출하려고 시도하고 있습니다. 실제로는 존재하지 않습니다. 당신이 CSS 기능 scale를 사용하려는 경우,이로 코드를 대체 : 더 간단하게

$box.css({transform: 'scale(1.1)'}); 

또는를 :

$box.css('transform', 'scale(1.1)'); 

... 다음은 CSS 규모를 변경할 수 있습니다. CSS 기능에 동적 값을 사용하고 싶을 수도 있습니다. 그 일을하는 동적 문자열을 만드는 문제가 될 것입니다 :

$box.css('transform', 'scale(' + whateverTheScaleShouldBe + ')'); 

이 whateverTheScaleShouldBe 당신의 계산이 무엇이든 될 것입니다; 귀하의 질문에서 명확하지 않다 당신은 스크롤로 스케일을 변경하고 싶습니다. 당신은 규모가 선형 적으로 예를 들어, 100px 당 0.1 성장하고 싶다면, 당신이 할 수 있습니다 :

scaleAmt = 1.0 + (scrollTop/100); 
$box.css('transform', 'scale(' + scaleAmt + ')'); 

이 발생하는 어떤 문제