• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как добавить прокручиваемый текст на CSS (Как сделать прокрутку знаков и текста на мою страницу?)
Как добавить прокручиваемый текст на CSS
Kosten
Дата: Вторник, 2019-07-09, 06:00 | Сообщение 1
Администраторы
Сообщений:23565
Награды: 56


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

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



Что такое прокрутка текста

Прокрутка текста - это текст, который перемещается на страницу веб-сайта, следуя заданному вами направлению. Он отображается динамически и имеет свойства, которые вы установили для этого.

Код
<marquee>Здесь текст</marquee>

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

ZorNet.Ru — сайт для вебмастера

Как пример!
Прикрепления: 8666915.png(22.8 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 2019-07-09, 06:05 | Сообщение 2
Администраторы
Сообщений:23565
Награды: 56


Типы прокрутки текста:

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

Прокрутка текста - довольно редко используемая функция, только для тех случаев, когда она приносит реальную пользу страницам сайта.

HTML

Код
<div class="example1">
<h3>ZorNet.Ru — сайт для вебмастера</h3>
</div>

CSS

Код
.example1 {
height: 50px;    
overflow: hidden;
position: relative;
}
.example1 h3 {
font-size: 3em;
color: blue;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);    
transform:translateX(100%);
/* Apply animation to this element */    
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0%   { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0%   { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0%   {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);   
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}



See the Pen
Прокрутка текста 1
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Вторник, 2019-07-09, 06:08 | Сообщение 3
Администраторы
Сообщений:23565
Награды: 56


Слайд-ин, где текст прокручивается на страницу до определенной точки, а затем остается на месте. Alternate, текст прокручивается на страницу в одном направлении, а затем возвращается в противоположное направление в другой итерации движения.

HTML

Код
<marquee behavior="alternate" BGCOLOR=Green>Интересные решения для вебмастера</marquee>



See the Pen
Прокрутка слов
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как добавить прокручиваемый текст на CSS (Как сделать прокрутку знаков и текста на мою страницу?)
  • Страница 1 из 1
  • 1
Поиск: