동기화 스프라이트 내가 스크롤하여 플레이 애니메이션을 찾고 있었다 ScrollMagic

오버플로 지역 사회, 를 사용하여 스크롤하고 내가 JS와 JS에 대한 지식의 부족으로 그런 일을 만들고 싶었다 동기화 스프라이트 내가 스크롤하여 플레이 애니메이션을 찾고 있었다 ScrollMagic

발견 라이브러리. 그러나 모든 요소를 복사하여 지나치더라도 여전히 작동하지 않습니다.

// initialise ScrollMagic controller 
 
var controller = new ScrollMagic.Controller(); 
 

 
// create Tween 
 
var tween = TweenMax.to("#js-animation", 1.0, { 
 
\t backgroundPosition: "100% 0", 
 
\t ease: SteppedEase.config(480) 
 
}) 
 

 
// build scene 
 
var scene = new ScrollMagic.Scene({duration: 15000}) 
 
\t .triggerHook("onCenter") 
 
\t .setPin("#js-pinned") 
 
\t .setTween(tween) 
 
\t .addTo(controller);

body { 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    font-size: 15em; 
 
    min-height: 110vh; 
 
} 
 

 
.cnc { 
 
    margin: auto; 
 
    width: 50%; 
 
    height: 50%; 
 
    background: url('http://image.gilawhost.com/16/12/29/9mq5kqgu.png') no-repeat 0 0%; 
 
    background-size: 100%; 
 
} 
 

 
h1 { 
 
    font-size: 1.2em; 
 
} 
 

 
p { 
 
    width: 60%; 
 
    margin: auto; 
 
    text-align: left; 
 
} 
 

 
.p { 
 
    margin-top: 120px; 
 
    font-size: 14px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<!-- 
 
come from the demo de Tom Bennet 
 
http://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock 
 
--> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Demo 4: Synchronising Playback with the Scrollbar</title> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 

 
</head> 
 

 
<body> 
 
    <h1>Demo 4: Synchronising Playback with the Scrollbar</h1> 
 

 
<p>A responsive sprite animation that is synchronised with the scrollbar, and that remains in a fixed position for its duration of 1500 pixels. Scroll up and down to control playback.</p> 
 

 
<div class="container" id="js-pinned"> 
 
    <div class="cnc" id="js-animation"></div> 
 
</div> 
 

 
<p class="p">Demo by Tom Bennet. <a href="http://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock" target="_blank">See article</a>.</p> 
 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.min.js'></script> 
 

 
</body> 
 
</html>

내가 뭔가를 그리워하거나 스프라이트가 너무 무거운 파일나요?

출처

2016-12-29 Felix Jely

당신의 스프라이트 PNG는 너무 무겁지 않습니다. 이미지 요소에 좀 더 정의 된 크기 조정 규칙이 필요했습니다. 의 height 100 %의 화상에 맞는 것이다 (폭/높이 스프라이트 애니메이션 비례 한 프레임 치수

.cnc { 
    margin: auto; 
    width: 350px; 
    height: 200px; 
    background: url('http://image.gilawhost.com/16/12/29/9mq5kqgu.png') no-repeat 0 0%; 
    background-size: auto 100%; 
}

주 및 background-size: auto 100% : 여기

그 요소가 이제 생겼는지 컨테이너, 너비가 비례하여 증가하도록하십시오).

아래의 예를 작업 - 멀리 스크롤 :

// initialise ScrollMagic controller 
 
var controller = new ScrollMagic.Controller(); 
 

 
// create Tween 
 
var tween = TweenMax.to("#js-animation", 1.0, { 
 
\t backgroundPosition: "100% 0", 
 
\t ease: SteppedEase.config(479) 
 
}) 
 

 
// build scene 
 
var scene = new ScrollMagic.Scene({duration: 15000}) 
 
\t .triggerHook("onCenter") 
 
\t .setPin("#js-pinned") 
 
\t .setTween(tween) 
 
\t .addTo(controller);

body { 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    font-size: 15em; 
 
    min-height: 110vh; 
 
} 
 

 
.cnc { 
 
    margin: auto; 
 
    width: 350px; 
 
    height: 200px; 
 
    background: url('http://image.gilawhost.com/16/12/29/9mq5kqgu.png') no-repeat 0 0%; 
 
    background-size: auto 100%; 
 
} 
 

 
h1 { 
 
    font-size: 1.2em; 
 
} 
 

 
p { 
 
    width: 60%; 
 
    margin: auto; 
 
    text-align: left; 
 
} 
 

 
.p { 
 
    margin-top: 120px; 
 
    font-size: 14px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<!-- 
 
come from the demo de Tom Bennet 
 
http://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock 
 
--> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Demo 4: Synchronising Playback with the Scrollbar</title> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 

 
</head> 
 

 
<body> 
 
    
 

 
<div class="container" id="js-pinned"> 
 
    <div class="cnc" id="js-animation"></div> 
 
</div> 
 

 
<p class="p">Demo by Tom Bennet. <a href="http://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock" target="_blank">See article</a>.</p> 
 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.min.js'></script> 
 

 
</body> 
 
</html>

출처

2016-12-29 14:09:02

은 잘 작동, 감사합니다! –

동기화 스프라이트 내가 스크롤하여 플레이 애니메이션을 찾고 있었다 ScrollMagic

답변

관련 문제