наверх





Интересный пример создания изменяющихся слов. То есть, сначала было одно слово, после на его месте появилось другое и так далее.


Этот самый пример изменения слов будем создавать без применения JS, на чистом HTML CSS, где основа будет CSS анимация.

HTML


<div class="rw-sentence">
        <span>Заголовок, если надо</span>
        <div class="rw-words">
            <span>слово 1</span>
            <span>слово 2</span>
            <span>слово 3</span>
            <span>слово 4</span>
        </div>
</div>


Соответственно, если поняли, изменяться будут слова, под классом rw-words, то есть вместо слова слово 1 вместо него появится слово 2, и так далее по кругу.

CSS



Сначала украсим заголовок, если он будет вам нужен:

.rw-sentence span{
    color: #3B86F8; /* Цвет текста */
    font-size: 30pt;  /* Размер шрифта */
}


Теперь переходим к самим изменяющимся словам.

.rw-words span{
    position: absolute;  /* Позиционирование */
    opacity: 0;  /* Отсутствие прозрачности */
    overflow: hidden; /* Все лишние будет удалено */
    width: 100%;    /* Ширина */
    color: #A4A5A4; /* Цвет текста  */
}

.rw-words span a{
    color: #A4A5A4; /* Цвет ссылок */
}


Теперь что с анимацией. Если задать одну и ту же анимацию просто тегу <span>, то слова будут просто напросто накладываться друг на друга. Поэтому, придется использовать псевдокласс :nth-child, а так же задавать вручную параметры времени, когда включать анимацию.

.rw-words span{
    -webkit-animation: rotateWordsSecond 18s linear infinite 0s;
    -moz-animation: rotateWordsSecond 18s linear infinite 0s;
    -o-animation: rotateWordsSecond 18s linear infinite 0s;
    -ms-animation: rotateWordsSecond 18s linear infinite 0s;
    animation: rotateWordsSecond 18s linear infinite 0s;
}

.rw-words span:nth-child(2) {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
}


А так же параметры анимации под все браузеры:

@-webkit-keyframes rotateWordsSecond {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWordsSecond {
    0% { opacity: 1; -moz-animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWordsSecond {
    0% { opacity: 1; -o-animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
    0% { opacity: 1; -ms-animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}





Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 2


DanIvDov 12 марта, 18:24 ответить #

Спасибо за материал!
Долго искал возможность замены текста средствами CSS.
А как остановить анимацию, чтобы остановиться на последнем <span>?

rimlin 13 марта, 14:00 ответить #

DanIvDov, как вариант, через nth-child последнему элементу задать большой промежуток для переключения анимации.

.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 9999s;
    -moz-animation-delay: 9999s;
    -o-animation-delay: 9999s;
    -ms-animation-delay: 9999s;
    animation-delay: 9999s;
}


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.