Прокрутка текста на JavaScript в стиле Star Wars

Скрипт для прокрутки текста, представленный здесь - это функция, которая позволит создавать на странице блоки с прокручиваемым текстом. При определенной фантазии и умении с помощью данного скрипта можно создавать довольно интересные эффекты. Например реализовать прокрутку текста как в фильме Star Wars (Звездные воины).

Скрипт позволяет так же настраивать скорость прокрутки текста. Ещё имеются две функции обратного вызова: до и после прокрутки текста. Бывает пригождаются. В общем, кому стало интересно милости просим...

Технически идея такова: для корректной работы скрипту нужен внешний элемент-контейнер. Этот элемент-контейнер должен содержать внутри себя единственный элемент-слайдер. Элемент-слайдер будет смещаться относительно элемента-контейнера. Ниже я приведу по шагам что нужно делать что бы прокрутка текста корректно заработала. Начнем с html-каркаса.

Прокрутка текста: Html

Html каркас, который нам понадобится для прокрутки текста должен иметь следующий вид:

    <!-- элемент-контейнер //-->
    <div id="perspective">
        <!-- элемент-слайдер //-->
        <div>
            <h2> ... </h2>
            <p> ... </p>
            <p> ... </p>
            <p> ... </p>
        </div>
    </div>

Прокрутка текста: JavaScript

Далее в html-коде размещаем вызов скрипта прокрутки текста и тег script c вызовом функции textSlider. textSlider - сама функция прокрутки текста.

    <script src="/путь/к/скрипту/на/вашем/сервере/textSlider.min.js"></script>
    <script>
        textSlider(
            /* html-элемент-контейнер */
            window.document.getElementById("perspective"), 
            /* скорость прокрутки */
            50, 
            /* ф-ция обратного вызова перед стартом прокрутки */
            function () {
                console.log("Scrolling start");
            }, 
            /* ф-ция обратного вызова после прокрутки */
            function () {
                console.log("Scrolling finish");
            }
        );
    </script>

Прокрутка текста: CSS.

Что бы получить такой эффект, как в фильме Star Wars, понадобится пошаманить с CSS3. А именно применить transform: perspective( 220px ) rotateX( 40deg ) здесь perspective( 220px ) - задает значение перспективы, а rotateX( 40deg ) - задает значение угла поворота относительно оси X. Вы можете поиграться с этими параметрами и понять как они действуют на практике. Я не стал особо "париться" и просто привел ниже CSS из демо-примера.

    html body { 
        background: #111;
    }
     
    #perspective {
        font-size: 1.5em;

        width: 20%;
        height: 45%;

        position: absolute;

        left: 50%;
        margin-left: -10%;

        top: 64%;
        margin-top: -20%;

        overflow: hidden;
        
        text-align:center;
        color: yellow;

        -webkit-transform: perspective( 220px ) rotateX( 40deg );
        -moz-transform: perspective( 220px ) rotateX( 40deg );
        -o-transform: perspective( 220px ) rotateX( 40deg );
        transform: perspective( 220px ) rotateX( 40deg );
    }
    
    #slide p {text-align:justify;}

Прокрутка текста: JavaScript исходный код

Как то на хабре я видел реализацию эффекта прокрутки текста в стиле Star Wars, но там это было монстро-подобно и глючило. А у нас же наоборот код скрипта получился довольно коротенький. А как известно чем короче программа - тем меньше в ней ошибок ;)

    /**
     * Прокрутка текста.
     * @param {HTMLElement} container - html-элемент-контейнер.
     * @param {number} speed - скорость прокрутки от 0(медленно) до 100(быстро)
     * @param {function} cbStart - ф-ция обратного вызова. Вызывается перед стартом прокрутки.
     * @param {function} cbEnd - ф-ция обратного вызова. Вызывается после прокрутки.
     */
    function textSlider(container, speed, cbStart, cbEnd) {
        "use strict";
        var slider      = container.children[0],
            slideVal    = container.clientHeight,
            slideLim    = slider.clientHeight,
            interval;
        /* высчитываем скорость */
        speed = 100 - Math.min(speed,90);
        /* FIX: застывания текста когда он 
            подходит к верхнему краю контейнера */
        slider.children[0].style.marginTop = "0px";
        /* Убираем текст в самый низ контейнера */
        slider.style.marginTop = slideVal + "px";
        /* Вызываем ф-цию перед стартом прокрутки */
        cbStart && cbStart();
        interval = window.setInterval(function () {
            /* Смотрим не пора ли остановится т.е. не уехала ли
                нижняя строка слайдера за верхний край контейнера */
            if (slideVal < -slideLim) {
                /* Вызываем ф-цию после прокрутки */
                cbEnd && cbEnd();
                return window.clearInterval(interval);
            }
            slider.style.marginTop = parseInt(slideVal, 10) + "px";
            slideVal -= 1;
        }, speed);
    }

Прокрутка текста: заключение

Хотя JavaScript код здесь - кроссбраузерный CSS transform, наоборот, поддерживается только новейшими браузерами, и то пока не всеми. Но это не беда ведь в худшем случае пользователь увидит просто плоский текст прокручиваемый снизу вверх. Но я думаю это вас не остановит. Прошу комментировать мое творенье и да прибудет с вами сила :)