Главная » Bootstrap » Бегущая строка в bootstrap3

Бегущая строка в bootstrap3

2016-09-14 / Вр:15:01 / просмотров: 6525

Сегодня расскажу, как сделать бегущую строку в bootstrap3.
В чем же фишка? Строка движется как в обычном HTML, но при наведении на строку, она останавливается. Естественно, нужно будет дописать немного своих CSS стилей, но эффект красивый.

Статья будет не большой, так что много времени вашего я не заберу.

Итак, вставьте в ваш файл между тегами <body></body> вот такой код:

<div class="marquee"><span>Бегущая строка для bootatrap3 - BlogGood.ru. Для остановки наведите на текст</span></div>

Теперь добавьте вот этот CSS стиль перед тегом </head>:

<style>
@-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0)
}
}

@keyframes scroll {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0)
}
}

.marquee {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
}

.marquee * {
display: inline-block;
padding-left: 100%;
-webkit-animation: scroll 21s infinite linear;
animation: scroll 21s infinite linear;
}
.marquee *:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>

Вот и все! Проверяйте. Текст должен быть анимированный и, при наведении на него курсора мыши, должен остановиться.