SuperScrollarama javascript 슬라이딩 divs greensock

Question

누군가가 나에게 도움을 줄 수 있기를 바랍니다. #slide 태그가 삽입되지 않는 이유는 무엇입니까? 그리고 #sliding 태그를 추가하면 나머지 superscrollorama 태그가 작동하지 않습니다. 나는 무엇을 놓치고 있습니까? 어떤 도움을 주시면 Javascript에 익숙하지 않습니다. 다음은 내가 작업하고있는 사이트에 대한 링크입니다. thesurrealstudio.com/new-site

고마워!

$(document).ready(function() { 
     // This example adds a duration to the tweens so they are synced to the scroll position 

     var controller = $.superscrollorama(); 

     // amount of scrolling over which the tween takes place (in pixels) 
     var scrollDuration = 200; 

     // individual element tween examples 

     controller.addTween('#fade-it', TweenMax.from($('#fade-it'), .5, {css:{opacity: 0}}), scrollDuration); 
     controller.addTween('#fly-it', TweenMax.from($('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}), scrollDuration); 
     controller.addTween('#spin-it', TweenMax.from($('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}), scrollDuration); 
     controller.addTween('#scale-it', TweenMax.fromTo($('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}), scrollDuration); 
     controller.addTween('#smush-it', TweenMax.fromTo($('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), scrollDuration); // 100 px offset for better timing 
     controller.addTween('#slide', TweenMax.from($('#slide'), .5, {css:{margin-left: 0}}), scrollDuration); 

     // set duration, in pixels scrolled, for pinned element 
      var pinDur = 4000; 
      // create animation timeline for pinned element 
      var pinAnimations = new TimelineLite(); 
      pinAnimations 
       .append(TweenMax.from($('#pin-frame-pin h2'), .5, {css:{marginTop:0}, ease: Quad.easeInOut})) 
       .append([ 
        TweenMax.to($('#slide'), .5, {css:{marginLeft:0}}), 
        TweenMax.to($('#services/portfolio'), .5, {css:{marginLeft:'100%'}}) 
       ], .5) 

    }); 

되는 HTML 그것에서

<div id="about/services" class="divider"></div> 


     <!--start of services page --> 
     <section id="slide" class="pin-frame"> 

      <div class="grid wfull"> 



       <div class="row"> 

        <div class="c12"> 
        <header> 

        </header> 
        </div> 

       </div> 

        <div class="row"> 

        <div class="c4"> 

        </div> 

        <div class="c4 s4 end"> 

        </div> 


       </div> 




       <div class="row"> 

        <div class="c12"> 

        </div> 


       </div> 


       <div class="row"> 

        <div class="c12"> 
        <footer> 

        </footer> 
        </div> 
       </div> 




      </div> 


     </section> 
     <!--end of services page --> 



     <div id="services/portfolio" class="divider"></div> 



     <!--start of portfolio page --> 
     <section id="portfolio-page" class="section"> 

      <div class="grid wfull" class="section"> 



       <div class="row"> 

        <div class="c12"> 
        <header> 

        </header> 
        </div> 

       </div> 

        <div class="row"> 

        <div class="c4"> 

        </div> 

        <div class="c4 s4 end"> 

        </div> 


       </div> 




       <div class="row"> 

        <div class="c12"> 

        </div> 


       </div> 


       <div class="row"> 

        <div class="c12"> 
        <footer> 

        </footer> 
        </div> 
       </div> 

Answer 1

한번에 로딩 JQuery와 소스입니다 :

controller.addTween('#slide', TweenMax.from($('#slide'), .5, {css:{margin-left: 0}}), scrollDuration); 

변경 마진 '에 마진 왼쪽 : 또한

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 

이 라인을 가지고 단일 할당량을 사용하는 '왼쪽':

controller.addTween('#slide', TweenMax.from($('#slide'), .5, {css:{'margin-left': 0}}), scrollDuration);