2014-03-06 5 views
0
<!DOCTYPE html> 
<html> 
<head> 
    <title>practice1</title> 
    <style> 
     .window{width:100%;height:700px;} 
     #window1{background:black; color:white;} 
     #window1>#x1>h1 {font-size:10px} 
     #window2{background:green; color:white;} 
     #window3{background:yellow; color:black;} 
     #window4{background:white; color:black;} 
     #window5{background:red; color:white;} 
    </style> 
</head> 
<body> 
    <div id="window1" class="window"> 
     <div id="x1"> 
      <h1>fade it</h1> 
     </div> 
    </div> 
    <div id="window2" class="window"> 
     <div id="x2"> 
      <h1>fade it</h1> 
     </div> 
    </div> 
    <div id="window3" class="window"> 
    </div> 
    <div id="window4" class="window"> 
    </div> 
    <div id="window5" class="window"> 
    </div> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="TweenMax.min.js" type="text/javascript"></script> 
    <script src="jquery.superscrollorama.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var controller=$.superscrollorama(); 
     TweenMax.to("x1",5,{fontSize:50px}); 
     controller.addTween("#x2", 3, TweenMax.to("#x2", 3, {scale:2,color:blue})); 
    }); 
    </script> 
</body> 

superscrollorama를 사용하여 웹 사이트에서 작업하고 있었지만 작동하지 않았습니다. 그래서 연습을하기로 결정했지만 여전히이 간단한 코드는 작동하지 않습니다. 위의 파일에 모든 것을 포함 시켰습니다. greensock의 TweenMax.min.js와 jquery.superscrollorama.js를 사용하여 파일을 확인하기 만하면됩니다. 나는 진짜로 좌절감을 느낀다. 그리고 나는 단지 몇 분의 실수 만 있다는 것을 알고있다. 그러나 아무도 나를 알아낼 수 있도록 도와 줄 수는 없다. 미리 감사드립니다.superscrollorama 및 greensock 애니메이션이 작동하지 않습니다.

답변

1

헤이호!

는 Superscrollorama이 ScrollMagic 중단 되었기 것을, 참고 : 이 https://github.com/janpaepke/ScrollMagic

그럼에도 불구하고 당신의 실수 addTween에 대한 매개 변수입니다. superscrollorama에서
는 당신이 볼 수있는 다큐 : 트윈와 superscrollorama 매개 변수이 혼란 실제로 것들 중 하나 귀하의 두 번째 매개 변수는 트윈해야 3입니다 .addTween(target, tween, duration, offset, reverse)

...

그 ScrollMagic으로 수정되었습니다.

그럼 한 번주세요. :)

관련,