我正尝试在某个时候用 scrollmagic 为一个 div 设置动画。和 velocity.js它给了我一个错误 supplied argument of 'addTo()' is not a valid ScrollMagic Controller 所以速度动画发生在它到达触发器之前但在我看来它是一个有效的 Controller
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
最佳答案
你得到那个错误是因为你没有正确地使用构造函数实例化这个 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
关于javascript - scrollmagic 和 velocityjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44597506/