scrollmagic and velocityjs

Question

我試圖在scrollmagic和velocity.js的某個點上爲div創建動畫效果它給了我一個錯誤提供的參數'addTo（）'不是有效的ScrollMagic控制器，所以速度動畫發生在它到達觸發，但在我看來，這是一個有效的控制器

var scene = new ScrollMagic.Controller(); 
 
new ScrollMagic.Scene({triggerElement: "#trigger", triggerHook: 'onLeave' }).setVelocity($(".Imagem").velocity({ scaleX: [1, 0], })).addTo(scene);

.rick { 
 
    
 
    width: 350px; 
 
    height: 200px; 
 
    position:relative; 
 
} 
 
.Imagem { 
 
    float: left; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    background-color: green; 
 
    background-size: cover; 
 
    width: 350px; 
 
    height: 200px; 
 
    z-index: 25; 
 
} 
 
.Ima { 
 
    position: absolute; 
 
    opacity:0; 
 
    z-index: 5; 
 
} 
 
.spacer.s0 { 
 
    min-height: 1px; 
 
} 
 
.spacer.s2 { 
 
    min-height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.js"></script> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium dui at nunc finibus tempor. Ut vel lorem id ipsum hendrerit vestibulum at vitae ex. Vestibulum tellus turpis, accumsan sit amet molestie a, faucibus ut enim. Maecenas velit justo, cursus in scelerisque sed, sodales in orci. In non libero purus. Integer posuere rhoncus venenatis. Nullam in rutrum risus. Sed elementum enim a risus eleifend tempus. Aliquam dui nibh, ornare quis maximus sed, interdum id erat. Phasellus hendrerit, lacus sodales vulputate tempus, augue ipsum hendrerit turpis, sed blandit nibh risus ultrices sapien. Vivamus diam ipsum, tincidunt eget ullamcorper ut, cursus fermentum sapien. Nam a accumsan nisl, vitae faucibus erat. Donec sit amet arcu non metus viverra pulvinar quis non nunc. 
 

 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas, urna vel gravida elementum, erat massa feugiat justo, a blandit metus ligula vel mauris. Donec vel augue hendrerit felis consequat dapibus et nec erat. Proin erat turpis, dignissim a neque vitae, vestibulum fermentum dui. Pellentesque egestas quis ligula non fermentum. Suspendisse ultricies neque urna, eget convallis magna elementum ac. Mauris eu rutrum arcu, eget elementum elit. 
 

 
Sed commodo nisi quis libero porta mollis. Integer ullamcorper neque ut tempus sollicitu 
 

 
      <div class="spacer s0"></div> 
 
      <div class="spacer s2"></div> 
 
      <div id="trigger" class="rick"><div class="Imagem"></div><img class="Ima" src="http://lorempicsum.com/futurama/350/200/1" ></div> 
 
      <div class="spacer s2"></div> 
 

 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium dui at nunc finibus tempor. Ut vel lorem id ipsum hendrerit vestibulum at vitae ex. Vestibulum tellus turpis, accumsan sit amet molestie a, faucibus ut enim. Maecenas velit justo, cursus in scelerisque sed, sodales in orci. In non libero purus. Integer posuere rhoncus venenatis. Nullam in rutrum risus. Sed elementum enim a risus eleifend tempus. Aliquam dui nibh, ornare quis maximus sed, interdum id erat. Phasellus hendrerit, lacus sodales vulputate tempus, augue ipsum hendrerit turpis, sed blandit nibh risus ultrices sapien. Vivamus diam ipsum, tincidunt eget ullamcorper ut, cursus fermentum sapien. Nam a accumsan nisl, vitae faucibus erat. Donec sit amet arcu non metus viverra pulvinar quis non nunc. 
 

 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas, urna vel gravida elementum, erat massa feugiat justo, a blandit metus ligula vel mauris. Donec vel augue hendrerit felis consequat dapibus et nec erat. Proin erat turpis, dignissim a neque vitae, vestibulum fermentum dui. Pellentesque egestas quis ligula non fermentum. Suspendisse ultricies neque urna, eget convallis magna elementum ac. Mauris eu rutrum arcu, eget elementum elit. 
 

 
Sed commodo nisi quis libero porta mollis. Integer ullamcorper neque ut tempus sollicitudin. Vivamus porta, neque non dictum viverra, nunc sem volutpat enim, non dictum eros justo in lorem. Pellentesque commodo, mi ut commodo dictum, massa nulla fermentum neque, at congue dolor risus a ex. Mauris volutpat elit non rutrum viverra. Quisque odio sapien, auctor id hendrerit ut, egestas vel augue. Maecenas molestie venenatis dui eu pharetra. Donec non interdum eros. In hac habitasse platea dictumst. Vestibulum volutpat eu tellus in malesuada. Integer cursus ullamcorper efficitur. Nunc eleifend posuere nulla in iaculis. Etiam dictum odio vel sollicitudin interdum. Etiam ut dolor vel nibh vestibulum accumsan. In faucibus bibendum arcu, rutrum venenatis justo sodales pellentesque. Proin finibus leo nisl, ut dictum dolor convallis ut. 
 

 
Ut dignissim luctus dapibus. Mauris egestas sollicitudin nisl, sed aliquet orci cursus vitae. Praesent pellentesque porta est nec iaculis. Vestibulum non sem massa. Pellentesque eleifend dictum faucibus. Vivamus quis nisi vel velit finibus lobortis. Sed quis semper neque. Etiam vestibulum fringilla velit vitae finibus. 
 

 
Sed sollicitudin ornare porttitor. Nulla facilisi. Suspendisse at sem urna. Sed leo ante, ultricies quis aliquet id, ultricies id nulla. Mauris ac fringilla quam. Pellentesque sit amet nunc sed nisl porttitor tempus. Mauris quis suscipit elit, a sagittis arcu. Maecenas et dignissim ante, non accumsan ex. Vestibulum vehicula efficitur tortor. Aliquam posuere sodales eros eu tincidunt. Donec vitae dapibus nulla, non tempus tellus. 
 

 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium dui at nunc finibus tempor. Ut vel lorem id ipsum hendrerit vestibulum at vitae ex. Vestibulum tellus turpis, accumsan sit amet molestie a, faucibus ut enim. Maecenas velit justo, cursus in scelerisque sed, sodales in orci. In non libero purus. Integer posuere rhoncus venenatis. Nullam in rutrum risus. Sed elementum enim a risus eleifend tempus. Aliquam dui nibh, ornare quis maximus sed, interdum id erat. Phasellus hendrerit, lacus sodales vulputate tempus, augue ipsum hendrerit turpis, sed blandit nibh risus ultrices sapien. Vivamus diam ipsum, tincidunt eget ullamcorper ut, cursus fermentum sapien. Nam a accumsan nisl, vitae faucibus erat. Donec sit amet arcu non metus viverra pulvinar quis non nunc. 
 

 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas, urna vel gravida elementum, erat massa feugiat justo, a blandit metus ligula vel mauris. Donec vel augue hendrerit felis consequat dapibus et nec erat. Proin erat turpis, dignissim a neque vitae, vestibulum fermentum dui. Pellentesque egestas quis ligula non fermentum. Suspendisse ultricies neque urna, eget convallis magna elementum ac. Mauris eu rutrum arcu, eget elementum elit. 
 

 
Sed commodo nisi quis libero porta mollis. Integer ullamcorper neque ut tempus sollicitudin. Vivamus porta, neque non dictum viverra, nunc sem volutpat enim, non dictum eros justo in lorem. Pellentesque commodo, mi ut commodo dictum, massa nulla fermentum neque, at congue dolor risus a ex. Mauris volutpat elit non rutrum viverra. Quisque odio sapien, auctor id hendrerit ut, egestas vel augue. Maecenas molestie venenatis dui eu pharetra. Donec non interdum eros. In hac habitasse platea dictumst. Vestibulum volutpat eu tellus in malesuada. Integer cursus ullamcorper efficitur. Nunc eleifend posuere nulla in iaculis. Etiam dictum odio vel sollicitudin interdum. Etiam ut dolor vel nibh vestibulum accumsan. In faucibus bibendum arcu, rutrum venenatis justo sodales pellentesque. Proin finibus leo nisl, ut dictum dolor convallis ut. 
 

 
Ut dignissim luctus dapibus. Mauris egestas sollicitudin nisl, sed aliquet orci cursus vitae. Praesent pellentesque porta est nec iaculis. Vestibulum non sem massa. Pellentesque eleifend dictum faucibus. Vivamus quis nisi vel velit finibus lobortis. Sed quis semper neque. Etiam vestibulum fringilla velit vitae finibus. 
 

 
Sed sollicitudin ornare porttitor. Nulla facilisi. Suspendisse at sem urna. Sed leo ante, ultricies quis aliquet id, ultricies id nulla. Mauris ac fringilla quam. Pellentesque sit amet nunc sed nisl porttitor tempus. Mauris quis suscipit elit, a sagittis arcu. Maecenas et dignissim ante, non accumsan ex. Vestibulum vehicula efficitur tortor. Aliquam posuere sodales eros eu tincidunt. Donec vitae dapibus nulla, non tempus tellus.

] 2

Answer 1

，因爲你不是你得到這個錯誤使用構造函數正確地實例化此Controller。您錯過了new關鍵字。正確的說法是因爲 -

var scene = new ScrollMagic.Controller(); 

這是導致失敗，如果instanseof運營商addTo功能。

請參考this link使用速度插件。 爲.Ima類

.Ima { 
    position: absolute; 
    opacity:100; 
    z-index: 5; 
} 

更新更新CSS的JS調用setVelocity

var scene = new ScrollMagic.Controller(); 
new ScrollMagic.Scene({triggerElement: "#trigger", triggerHook: 'onLeave' }).setVelocity(".Imagem",{opacity:0}, {duration:600}).addTo(scene); 

這可以找到工作here