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();

如果addTo函数中的instanseof运算符失败，则会导致失败。

有关速度插件的使用，请参阅this link。更新.Ima类的css

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

更新js setVelocity调用

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

可以找到工作here

scrollmagic和velocityjs

1 个答案: