Question

我在这里再次成为新手 - 我正在尝试使用http://johnpolacek.github.com/superscrollorama/，你可以想象我对java脚本的想法是非常压倒性的，特别是这个“补间”的东西。

无论如何我正在尝试制作一个滚动动画词的启动页面，我想两次使用相同的补间，我试着查看常见问题和诸如此类的东西，但即使它们太先进了我也不太了解（哇！）我尝试两次输入'淡入淡出'但这不起作用。也没有在底部添加另一个'淡化'脚本。显然我在这里遗漏了一些东西。有谁想帮助我认为可能是一个容易解决的问题？ ;）

<div id="raychulllogo">
    <h2 id="fade-it">I'M <br> <img src="images/raychulllogoDARK.png" > </h2>
</div>

<h2 id="spin-it"></h2>
<p id="med">AND I </p>
<h2 id="smush-it">PHOTOGRAPH,</h2>
<h2 id="scale-it">DESIGN</h2>
<h2 id="fade-it"> &amp; FILM </h2>

这是JavaScript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.superscrollorama.js"></script>
<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();
        // individual element tween examples
        controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
        controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}));
        controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing
    });
</script>

Answer 1

它可能像切换到类而不是id一样容易（你不能有多个相同的id）。所以改为：

  <div id="raychulllogo">
    <h2 class="fade-it">I'M <br> <img src="images/raychulllogoDARK.png" > </h2>
   </div>
    <h2 class="spin-it"></h2>
    <p class="med">AND I </p>
    <h2 class="smush-it">PHOTOGRAPH,</h2>
    <h2 class="scale-it">DESIGN</h2>
    <h2 class="fade-it"> &amp; FILM </h2>
</div>

和

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.superscrollorama.js"></script>
<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();
        // individual element tween examples
        controller.addTween('.fade-it', TweenMax.from( $('.fade-it'), .5, {css:{opacity: 0}}));
        controller.addTween('.scale-it', TweenMax.fromTo( $('.scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}));
        controller.addTween('.smush-it', TweenMax.fromTo( $('.smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing
    });
</script>

为了清楚起见，<h2 id="fade-it">更改为<h2 class="fade-it">等，$('#fade-it')更改为$('.fade-it')等。

Answer 2

我正在尝试同样的事情而.class的东西没有用，但我找到了一种让它工作的方法：为每个想要动画的东西创建不同的类，如

class="fade-it1" class="fade-it2" class="fade-it3"

并添加相同的控制器，如：

controller.addTween('.fade-it', TweenMax.from( $('.fade-it'), .5, {css:{opacity: 0}}));
controller.addTween('.fade-it2', TweenMax.from( $('.fade-it2'), .5, {css:{opacity: 0}}));
controller.addTween('.fade-it3', TweenMax.from( $('.fade-it3'), .5, {css:{opacity: 0}}));

我尝试了它并且它有效！

Answer 3

遇到这个寻找同一问题的答案。似乎＆＃34;＃fly-it＆＃34;选项还需要对css文件进行一些更改。当想要多个＆＃34;＃fly-it＆＃34;在同一个html页面中，您还需要将以下内容添加到您的css文件中。

#fly-it { position: relative; }
#fly-it2 { position: relative; }
#fly-it3 { position: relative; }
#fly-it4 { position: relative; }

如何使用superscrollorama在多个单词上使用相同的补间？

3 个答案: