Как да постигнем страхотен ефект с поставяне на движещ се текст, изображения или връзки

Предимството да поназнайваш как се редактира HTML код, когато имаш сайт, е че можеш да разчиташ на себе си както за отстраняване на грешки в него, така и за използването на точно това, което искаш, там където го искаш, но и за още нещо - да се възползваш от прости и лесни техники за постигане на иначе впечатляващи окото ефекти, които правят изгледа на сайта една доза по-професионален, а и по-функционален.

Една такава техника е използването на оператора за движещ се текст <marquee> (произнася се "маакий"). Да, езикът за редакция на хипертекст (HTML - Hyper Text Markup Language) позволява лесно да анимирате текст в своята страница и да го карате да се движи по желан от вас начин. Marquee е команда с определени параметри, която браузърът (Explorer, Mozilla...) изпълнява. Затова и единствена причина анимираният текст да не се визуализира правилно може да се търси само в браузъра, с който гледате съответния сайт.

І. Как да анимираме текст или какво можем с Marquee!

По-долу можете да видите примери за употребата на оператора marquee заедно със съответния код, който лесно можете да копирате и с който да постигнете желаните ефекти и във вашия сайт. В него ще трябва единствено да замените "ТЕКСТ" с желания от вас израз.

1. Преминаващ текст

Един много популярен модел, който позволява да поставите ефектен акцент върху желана от вас информация в сайта си или просто да спестите място. Анимираният текст се появява отляво или отдясно (според указаното от вас в direction="...") и преминава по ширина през страницата или елемента, в който е поставен кода, отново и отново.

Преминаващ отляво-надясно текст


2. Появяващ се текст

Искате анимирания текст, след като се появи на екрана да спре? Ето появяващ се отляво текст, който достигайки границата на елемента, в който е поставен, спира и остава там (за да видите отново ефекта, трябва да презаредите страницата).

Движещ се текст, който спира!


3. Отскачащ от границите текст

Да, става дума за комбинация от горните два модела на движение на текста.

Отскачащ от границите движещ се текст




4. Вертикално движещ се текст

Движението на текста може да бъде не само хоризонтално, но и вертикално, като все така свободно можем да определим и границите на неговото движение.


Преминаващ нагоре текст


ІІ. Атрибути на оператора Marquee или как управляваме движението на текста

Както разбрахте, указанията как точно да се движи текста се задават като свойство на оператора marquee с помощта на т. нар. атрибути (behaviour, direction и др.), на които можем да дадем различни стойности. Няма да се спирам подробно на всички тях - сигурен съм, че бързо ще се ориентирате за възможностите (стойностите са все английски думи, които ще откриете лесно). За по-запалените, освен това, в Интернет има достатъчно ресурси по темата (на английски). Затова ще обърна внимание само на още един от тях:

Скорост на движение

Атрибутът, който отговаря за това с каква скорост ще се движи текста, е scrollamount="...", чиято стойност по подразбиране е "6". С негова помощ вече придобивате пълен контрол над движещия се в сайта ви текст.

Бавно движещ се текст - скорост = 1
Бързо движещ се текст - скорост = 10
Бясно движещ се текст - скорост = 20



Е, как ви се струва всичко дотук - нямате търпение да го изпробвате в своя сайт, нали! А ако ви кажа, че това съвсем не е всичко, което можем да постигнем с оператора за движещ се текст marquee? Можете да видите "какво" в Тайните на marquee.


Ако информацията ви е била интересна или полезна, моля подкрепете ме!

Вижте още:
Програми и сайтове за лесно създаване на анимирани изображения
Направи си сайт - въпроси и трикове
Споделете тази статия от "Направи си сайт!" в още мрежи и/или гласувайте за нея!

10 коментара:

gepard каза...

Мдаа, това е поредния урок който си заслужава вниманието ни. Много са тези като мен, които са просто ползватели и не са наясно с компютрите. За мен е удоволствие да се възползвам от съветите в този сайт - лесни са за изпълнение, ефектни са и най-важното действат :)

lilito866 каза...

Моля някой да ми помогне,надписа ми е на български,но не излиза излизат въпросителни,а на английски няма проблем.Кажете моля от къде идва този проблем.

xSEOn каза...

До lilito886
За решаване на проблема е нужно да имаш достъп до редакция на HTML кода на основната страница на сайта. В неговото начало (между операторите <head>... </head> постави или промени кодовата таблица, която се ползва от сайта:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
Важното тук е това, което пише след "charset=" и то би трябвало да е "UTF-8".

Antonio каза...

Благодарности за полезните съвети,някои от тях ми влязоха в употреба.

Интер Реклама каза...

Поздравления!

Изключително полезна статия... Благодарение на Вас разкрасихме сайта ни и си спестихме не малко рекламна площ.

Желаем да поставим ваш линков текст или банер при нас.

Ако решите да се свържете с нас - ще се радваме да ви отговорим.

Очакваме Ви на e-mail:
email@inter-reklama.com

Поздрави и успех!

Анонимен каза...

Ефекта е добър, но според мен ако някой разбира малко от photoshop , а дори и да не рабзира, а отдели няколко часа ще може да направи gif банер с впечатляващи резултати.

Стоян Стоянов
http://fastdietplanreview.com/

Анонимен каза...

И аз искам Митко да ми помогне.. В сайта си като поставя кода, натисна запази и директно ми се изтрива . И да речем текста е само удебелен, центриран и др. Не знам дали е от това, че.. цитирам от сайта: Някои html тагове (script, embed, frame, iframe, form, input, object, textarea) не са разрешени.

xSEOn каза...

Анонимен от 23.08, не сте посочили адреса на сайта си, нито къде виждате това съобщение и дали използвате готова платформа. Но да, много вероятно е случаят ви да е точно този.

Анонимен каза...

Tova e Qko

Martin Milev каза...

Здравейте !
Как мога да променя шрифта на движещия се текст ?
Благодаря !

Публикуване на коментар

Моля, имайте предвид, че коментарът ви ще бъде одобрен само ако пишете на кирилица. Можете да използвате някои HTML оператори, например <b>, <i>, <a>.
Благодаря ви!