Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Движущийся текст на CSS (CSS анимация движущегося текста)
Движущийся текст на CSS
Angerfist
Дата: Воскресенье, 16.10.2016, 11:47 | Сообщение # 1
Vip
Сообщений:616
Награды: 18


В принципе эта тема не особо интересна для вебмастеров которые выстраивают разметку сайта минималистично и как правило избегают всяких плюшек и фишек (что кстати правильно, и не раздражает посетителя). Но иногда замечаю что всё таки применяют бегущую строку, и как обычно было принято через тег marquee. Решил немного отвлекусь и возможно подскажу кому то как делать это через CSS анимацию.
Сама конструкция проста:
Код

<h1 class="motion">
<span>
Zornet.ru - Сайт по теме как создать сайт uCoz с различными интересными
решением по его продвижению в сети, все ответы на ресурсе.
</span>
</h1>

<style>
@keyframes scroll {
0% {transform: translate(0,0);}
100% {transform: translate(-100%,0);}
}
.motion {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.motion span {
display: inline-block;
padding-left: 100%;
animation: scroll 20s infinite linear;
}
</style>


Оформлять не стал фон и сам текст, думаю это лишнее, тем более не знаю какой тег вы применять будете и уже задавать стилевые параметры...

Теперь поясню, h1 тег я думаю понятно для значимости (тег любой можно применить, хоть u-с подчёркиванием), задаём класс motion в котором будет любой ваш текст, тут всё ясно но добавлю что 20s время действия одного этапа анимации (20 секунд, чем больше текст, тем больше ставим значение временное, иначе текст будет бежать быстро, при минимальном же размере текста уменьшаем время прохождения). Infinite означает что анимация текста будет повторятся,
можно конечно сделать проход в определенное количество, вместо infinite ставим просто цифровое значение кол-ва.

Почему поставил linear, ну просто тогда анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. Можно сменить на любое другое значение, к примеру на ease и тогда анимация начинается медленно, разгоняется быстро и замедляется в конце.

Ну и коротко о правиле @keyframes — оно позволяет описать анимацию CSS свойств в виде перечня ключевых кадров.
Обычно пишут начало from и to, проценты как тут равнозначно этим значениям, from=0% и to=100%, если писать другую анимацию допустим передвижения блока, то в 0% задаём позиционирование начальное, в 25% куда блок будет двигаться, в 50% со второй точки перемещение, и допустим вернём блок на место - в 100% пишем первое значение блока...

Вообщем я отвлёкся, данный пост не считаю серьёзным) поэтому просто как вариант тегу marquee.


No regrets

Сообщение отредактировал Angerfist - Воскресенье, 16.10.2016, 13:29
Kosten
Дата: Воскресенье, 16.10.2016, 17:20 | Сообщение # 2
Администраторы
Сообщений:12664
Награды: 39


Посмотреть как скрипт работает, можно на Демонстраций, что приложена к первому посту.

Прикрепления: 1303198.png(19Kb)


Angerfist
Дата: Воскресенье, 16.10.2016, 17:36 | Сообщение # 3
Vip
Сообщений:616
Награды: 18


Kosten, Когда я тебя отучу, ну не принято обзывать CSS скриптом)

No regrets

Сообщение отредактировал Angerfist - Воскресенье, 16.10.2016, 17:37
Kosten
Дата: Воскресенье, 16.10.2016, 18:48 | Сообщение # 4
Администраторы
Сообщений:12664
Награды: 39


Angerfist, но извиняй 09a

Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Движущийся текст на CSS (CSS анимация движущегося текста)
Страница 1 из 11
Поиск: