Суперскроллорама и анимация гринсока не работают

<!DOCTYPE html>
<html>
<head>
    <title>practice1</title>
    <style>
        .window{width:100%;height:700px;}
        #window1{background:black; color:white;}
        #window1>#x1>h1 {font-size:10px}
        #window2{background:green; color:white;}
        #window3{background:yellow; color:black;}
        #window4{background:white; color:black;}
        #window5{background:red; color:white;}
    </style>
</head>
<body>
    <div id="window1" class="window">
        <div id="x1">
            <h1>fade it</h1>
        </div>
    </div>
    <div id="window2" class="window">
        <div id="x2">
            <h1>fade it</h1>
        </div>
    </div>
    <div id="window3" class="window">
    </div>
    <div id="window4" class="window">
    </div>
    <div id="window5" class="window">
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="TweenMax.min.js" type="text/javascript"></script>
    <script src="jquery.superscrollorama.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var controller=$.superscrollorama();
        TweenMax.to("x1",5,{fontSize:50px});
        controller.addTween("#x2", 3, TweenMax.to("#x2", 3, {scale:2,color:blue}));
    });
    </script>
</body>

Я работал над сайтом, используя суперскроллорам, но это не сработало. Поэтому я решил заняться практикой, но этот простой код не работает. Я включил все в вышеупомянутый файл, вы просто должны использовать greensock TweenMax.min.js и jquery.superscrollorama.js, чтобы проверить файл. Я очень расстроен, правильно знаю, и я знаю, что есть только минутная ошибка, но кто-нибудь может помочь мне разобраться, пожалуйста. Заранее спасибо.

1 ответ

Хей-хо!

Обратите внимание, что суперскроллора была заменена ScrollMagic: https://github.com/janpaepke/ScrollMagic

Тем не менее ваша ошибка в параметрах для addTween.
В документации по суперскроллоре вы можете увидеть это: .addTween(target, tween, duration, offset, reverse)

Ваш второй параметр - 3, где должна быть анимация...

Эта путаница с параметрами tween и superperscrollorama была фактически одной из тех, которые были исправлены в ScrollMagic.

Так что дайте ему шанс!:)

С уважением,
январь

Другие вопросы по тегам