• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Движущийся текст на CSS (CSS анимация движущегося текста)
Движущийся текст на CSS
Angerfist
Воскресенье, 16 Октября 2016 | Сообщение 1
Оффлайн
Vip
Сообщений:767
Награды: 21
В принципе эта тема не особо интересна для вебмастеров которые выстраивают разметку сайта минималистично и как правило избегают всяких плюшек и фишек (что кстати правильно, и не раздражает посетителя). Но иногда замечаю что всё таки применяют бегущую строку, и как обычно было принято через тег 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 Октября 2016, 13:29
Страна: (RU)
Kosten
Воскресенье, 16 Октября 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Посмотреть как скрипт работает, можно на Демонстраций, что приложена к первому посту.

Прикрепления: 1303198.png (19.3 Kb)
Страна: (RU)
Angerfist
Воскресенье, 16 Октября 2016 | Сообщение 3
Оффлайн
Vip
Сообщений:767
Награды: 21
Kosten, Когда я тебя отучу, ну не принято обзывать CSS скриптом)

No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 16 Октября 2016, 17:37
Страна: (RU)
Kosten
Воскресенье, 16 Октября 2016 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Angerfist, но извиняй 09a
Страна: (RU)
Kosten
Воскресенье, 11 Декабря 2016 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Вообще стили нужно ставить в css, что раньше можно было сделать по другому. Поставить на один модуль и он там только работает. Может кто то что слышал, можно так или уже не актуально.

Код
<style> стиль </style>
Страна: (RU)
Alexandrhhh
Воскресенье, 11 Декабря 2016 | Сообщение 6
Оффлайн
Vip
Сообщений:83
Награды: 7
ЦитатаKosten ()
можно так или уже не актуально.

так всегда можно, это локальное использование. Актуально например для css оптимизации) чтобы в лишних местах не грузить страницу
Страна: (RU)
ArtClear
Воскресенье, 11 Декабря 2016 | Сообщение 7
Оффлайн
Vip
Сообщений:429
Награды: 1
ЦитатаAngerfist ()
ну не принято обзывать CSS скриптом)

А что это если не скрипт? Стиль что ли? 11a 09a


Закон и порядок бл*ть!

Сообщение отредактировал
ArtElect - Воскресенье, 11 Декабря 2016, 22:59
Страна: (RU)
Kosten
Воскресенье, 11 Декабря 2016 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
ЦитатаAlexandrhhh ()
так всегда можно, это локальное использование. Актуально например для css оптимизации) чтобы в лишних местах не грузить страницу

Спасибо, все понятно, то просто в CSS ставишь на весь сайт распространяется, а мне к примеру нужно сделать на форуме только.
Страна: (RU)
Angerfist
Понедельник, 12 Декабря 2016 | Сообщение 9
Оффлайн
Vip
Сообщений:767
Награды: 21
ArtElect, никогда не приходилось слышать фразу "всё на CSS3, без применения скриптов"?
Ну так вот чтобы поставить точку повторяюсь:
Цитата

Скрипт — это программа или программный файл сценарий, которые автоматизируют некоторую задачу, которую пользователь делал бы вручную, используя интерфейс программы. Скрипты пишутся на скриптовый языках, которые различаются по своему синтаксису, сферам применения и возможностям. Например: AngelScript, Perl, Python, PHP, JavaScript, JScript и другие.


Цитата

CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.


No regrets
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Движущийся текст на CSS (CSS анимация движущегося текста)
  • Страница 1 из 1
  • 1
Поиск: