Анимация текста CSS3

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

Демо

Сделать этот эффект 3D преобразования очень просто. HTML нужно задать внешний элемент #titles и раздел, в котором будет прокручиваться эффект #titlecontent :



<div id="titles">
<div id="titlecontent">
    <p>content</p>
</div></div>


Внешний 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 (абсолютную позицию) содержания.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>