如何使用superscrollorama对多个单词使用相同的补间

how to use the same tween on multiple words using superscrollorama?

本文关键字：单词使 superscrollorama 何使用      更新时间：2023-09-26

我又是一个新手我正在尝试使用http://johnpolacek.github.com/superscrollorama/，你可以想象java脚本的想法对我来说是非常压倒性的，特别是这个"间"的事情。

无论如何，我正在尝试制作一个滚动动画单词splash页面，我想使用两次相同的补间，我试着查看faq和其他东西，但即使它们对我来说太先进了，我也无法理解(啊!)我试着输入"fade-it"两次，但这不起作用。在底部添加另一个"褪色"脚本也是如此。很明显我遗漏了什么。有人想帮忙吗我认为这个问题很容易解决?;) 

<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>

这可能就像切换到类而不是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')等

我正在尝试同样的事情和。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}}));

我试过了，它工作了!

在寻找同样问题的答案时遇到了这个。似乎"#fly-it"选项也需要对css文件进行一些更改。当想要多个"#fly-it"在同一个html页面，你还需要添加以下的css文件。

#fly-it { position: relative; }
#fly-it2 { position: relative; }
#fly-it3 { position: relative; }
#fly-it4 { position: relative; }
相关文章：