Техно-мир

Это не javascript и нет графики растра — здесь чистый текст HTML5 и CSS3. Прокрутка текста 3D теперь работает в браузерах Chrome, Safari и Firefox. Опера пока не будет показывать 3D преобразования в текущей версии, но это будет работать в Internet Explorer 10, но вам придётся немного подождать выхода IE10 для Windows7, если у вас нет возможности использовать Windows8. Предыдущие версии не поддерживают преобразований и анимации.Сделать этот эффект 3D преобразования очень просто. HTML нужно задать внешний элемент #titles и раздел, в котором будет прокручиваться эффект #titlecontent:

    
content

Внешний DIV позиционируется в центре нижней части окна браузера, и вращается с помощью 3D перспективы использования преобразований (отметим, что префиксы были опущены, но они в реальном коде):

#titles
    {
        position: absolute;
        width: 18em;
        height: 50em;
        bottom: 0;
        left: 50%;
        margin-left: -9em;
        font-size: 350%;
        font-weight: bold;
        text-align: justify;
        overflow: hidden;
        transform-origin: 50% 100%;
        transform: perspective(300px) rotateX(25deg);
    }

Псевдо-элемент применяется для наложения отдаления из градиента в верхней части внешнего DIV:

#titles:after
    {
        position: absolute;
        content: ' ';
        left: 0;
        right: 0;
        top: 0;
        bottom: 60%;
        background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
        pointer-events: none;
}

Всё, что нам осталось сделать, это прокрутка содержимого с помощью CSS анимации:

#titlecontent
    {
        position: absolute;
        top: 100%;
        animation: scroll 100s linear 4s infinite;
    }
    @keyframes scroll {
        0% { top: 100%; }
        100% { top: -170%; }
}

Обратите внимание,

Вы можете также использовать margin-top (отступ сверху), а не absolutely-positioning (абсолютную позицию) содержания.

Вернуться назад