0

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

无论如何，我正在尝试制作一个滚动动画文字启动页面，并且我想两次使用相同的补间，我尝试查看常见问题解答等等，但即使它们对我来说太先进了，我还无法理解（嘎！）我试着输入'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>
4

3 回答 3

0

It may be as easy as switching to classes, instead of ids (you can't have multiple identical ids). So change to this:

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

and 

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

Just to be clear, <h2 id="fade-it"> changes to <h2 class="fade-it"> etc. and $('#fade-it') changes to $('.fade-it') etc.

于 2013-03-21T18:13:14.090 回答
0

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

我试过了，它奏效了！

于 2013-06-17T14:03:38.927 回答
0

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

#fly-it { position: relative; }
#fly-it2 { position: relative; }
#fly-it3 { position: relative; }
#fly-it4 { position: relative; }
于 2015-03-26T22:06:27.267 回答