我无法通过scrollmagic来显示动画

时间:2019-06-07 10:24:20

标签: javascript html vue.js scrollmagic bootstrap-vue

还有其他可用的插件允许我们做与Skrollr相同的事情吗? 动画元素滚动时显示图片。但采用Vue.js格式。 我认为我没有将它正确地转换为我所做的。 例如,某些东西链接了此链接。 http://scrollmagic.io/examples/expert/multiple_scroll_directions.html

我查看了Scrollmagic文档并在网上搜索。使用vue-scrollmagic的人很少。

在模板中:

 <div class="spacer s0"></div>
<div  class="text-center">
    <img id="animate"
    class="img-fluid iq-mobile-img"
    src="img.png"
    alt="Smartphone"
>
</div>                    

在脚本中:

methods: {
    sphone() {
      var controller = new ScrollMagic.Controller();

      // build scene
      var scene = new ScrollMagic.Scene({
        triggerElement: "#multiDirect",
        duration: 400,
        offset: 250,
      })
        .setPin("#animate")
        .addIndicators({ name: "resize" }) // add indicators (requires plugin)
        .addTo(controller);

  },
  mounted() {
    this.$nextTick(sphone); //this.
  }

未显示错误消息。是新手。所以我可能没有注意到。 我确实看到了警告,但与滚动魔术无关。

我希望它在滚动时可以动画显示。但是它没有动画。这是错误的。

0 个答案:

没有答案