Полезные виджеты для сайта

Бегущая строка на страницах сайта

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

Теги бегущей строки это <marquee> </marquee>, всё что будет заключено меду этими тегами, будет двигаться по строке. Движения можно сделать разными: слева на прав, справа на лева, сверху вниз, снизу вверх, возвратно-поступательные движения и т.д. Рассмотрим самую простую бегущую строку. Для этого заключим какой-то текст межу выше написанными тегами:

Пример простой бегущей строки

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

Атрибуты тега MARQUEE.

 

direction=" " - атрибут устанавливающий направление скроллинга:      Значения: left - движение справа налево (по умолчанию) right - движение слева направо up - движение снизу верх down - движение сверху вниз	behavior=" " - атрибут устанавливающий тип скроллинга:      Значения: scroll - скроллинг в одном из заданных направлений (по умолчанию) slide - одноразовый скроллинг с остановом контента alternate - возвратно-поступательный скроллинг
width=" " - устанавливает ширину блока для строки height=" " - устанавливает высоту блока hspace=" " - отступа в пикселях от вертикальных границ блока vspace=" " - отступ в пикселях от горизонтальных границ блока	bgcolor=" " - атрибут устаналивающий параметр цвета фона скроллинга style=" " - атрибут указывает стиль форматирования блока и контента class=" " - атрибут внедрение стиля форматирования блока и контента
loop=" " - определяет количество циклов перемещения "-1" или "infinite" - безконечное перемещение наполнения в блоке "N" - целое число, задающее количество показов в блоке	bgcolor=" " - атрибут устаналивающий параметр цвета фона скроллинга

 

Атрибут     scrollAmount    - устанавливает скорость движения строки.

Теперь сделаем бегущую строку в небольшом окошке, а для наглядности я окрашу это окошко в какой-нибудь цвет. Для создания бегущей строки в окошке нужно к тегам приставить атрибуты Widht и Height.

<marquee width="300" height="50" bgcolor=#87CEFA> Строка в окошке </marquee>

Строка в окошке

Для того чтобы строка двигалась с лева на право, необходимо добавить атрибут right

<marquee direction="right">движение слева направо</marquee>

движение слева направо
При добавлении атрибута alternate, движение строки будет от края до края

<marquee behavior="alternate"  width="300px" height="50px"bgcolor="#87CEFA" >постоянное движение</marquee>
постоянное движение
Теперь с помощью атрибута scrollamount изменим скорость движения строки. Принцип такой - чем меньше цифра, тем медленнее движется строка

<marquee scrollamount="1"  width="300px" height="50px"bgcolor="#87CEFA" >Замедляем движение</marquee>
Замедляем движение<marquee width="150" height="200" scrollamount="2" direction="up" bgcolor="#87CEFA"> Движется снизу вверх <br> вверх со скоростью 2 </marquee>
Движется снизу вверх
вверх со скоростью 2

Заменив direction="up" на direction="down" движение строки будет сверху вниз.

Для удобства пользователей можно сделать чтобы бегущая строка останавливалась при наведении курсора. Для этого к тегу необходимо добавить следующую конструкцию
onmouseover="this.stop()" onmouseout="this.start()"  
<marquee onmouseover="this.stop()" onmouseout="this.start()" width="150" height="200" scrollamount="2" direction="down" Bgcolor="#87CEFA"> останавливается при наведении курсора </marquee>
останавливается при наведении курсора

Рассмотрим еще движение картинки. Можно таким способом сделать прокрутку рекламных баннеров,  кнопок и т.д. В общую конструкцию необходимо вставить адрес картинки, баннера, кнопки...

<marquee direction="right" scrollamount="4"  width="500px" height="100px">
<img src="http://mehelps.ru/wp-content/uploads/2016/09/koleso.giff" alt="бегущая строка с изображением"></marquee>

 Можете сами пофантазировать и сделать что-то необычное. Удачи!!!

Заработок на собственном сайте?

Многие начинающие web-разработчики пытаются заработать на своем сайте, имея 50-100 посетителей в сутки! Но это абсолютно ошибочный подход, который ни к чему хорошему не приведет. Добейтесь трафика величиной более 1 000 человек, для начала, и только после этого приступайте к заточке своего сайта под партнерские программы и тому подобное. Для увеличения трафика на сайте, вам будет нужно создать как можно больше страниц. Но если вы планируете зарабатывать на продаже товаров или услуг на своем сайте — подключайте прием платежей на сайте c помощью сервиса Fondy.