web парақшасындағы графика. Информатика, 10 сынып, қосымша материал 1.
Pthnnte ;9vscs
Сонымен, таныс болыңыз! Сиқырлы тег — <marquee>. Бастапқыда бұл тег Internet Explorer браузері үшін әзірленген, бірақ уақыт өте келе басқа браузерлер оны қолдай бастады.
Жолды қозғайық. Ол үшін WordPress редакторында HTML режимінде төмендегілерді қойыңыз:
<marquee>Жүгіртпе жол</marquee> |
Керемет, сызық қозғала бастады. Енді стильдерді қосу арқылы желіні біразырақ байқайық.
1 | <marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
direction Атрибутты қолдану мәнімен бірге right қозғалыс сызығының бағыты өзгереді және ол оңнан солға жылжиды:
1 | <marquee direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
<marquee> Әдепкі тег атрибуты тағайындалады direction left мәні бойынша, сондықтан атрибуттарды қолданбай сызық солдан оңға қарай жылжиды.
Мәнін ауыстыру up атрибут үшін direction біз сызықты түбінен жоғарыға қарай жылжытамыз
:
1 | <marquee direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Значение down укажет строчке двигаться сверху вниз
1 | <marquee direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Мне кажется надо увеличить скорость прокрутки бегущей строки, для этого мы используем атрибут scrollamount. В кавычках указываем число от 1. Например:
1 | <marquee scrollamount="30" direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Енді біраз уақыт тоқтап, <marquee> тегінің қалай жұмыс істейтіндігін анықтаймыз.
Анимация әрдайым ақпараттың әрдайым орындалуына байланысты және оны жаңа жерде көрсету. <Marquee> атрибуты үшін мәндерді пайдалану арқылы, біз пикселдерде қашықтығы мен тігістің жаңа позициясы арасындағы қашықтықты орнатып, оның қозғалыс жылдамдығына және тегістігіне әсер етеміз.
Дыбыссыз, мән 6, бірақ мәнді 1 мәніне орнатсаңыз, ескі және жаңа сызық арасындағы қашықтық 1 пиксел болады, бұл жүгіртпе жолдың баяу және біркелкі жұмысын қамтамасыз етеді:
1 | <marquee scrollamount="1" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Атрибут behavior Көрсетілген блокта және әдепкі параметрлерде жылжу жолын анықтайды
scroll, бұл жүгіртпе жолды қараудан жасырып, қайтадан қозғалуды бастайды.
Бірақ егер біз құндылықты алмастыратын болсақ alternate, онда жол сызықтан жасырылмайды және блоктың шекарасына жету кері бағытта қозғала бастайды:
1 | <marquee behavior="alternate" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Мәнді slide атрибут behavior - ға блоктың шекарасына жету үшін жүгіріс сызығына бұйрық береді және тоқтайды:
1 | <marquee behavior="slide" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Атрибут height блоктын биіктігін көрсетеді. Әдепкі бойынша - 12 пиксель, бірақ оны өзгертіп, жүгіріс сызығының айналдыру жылдамдығына біраз қосыңыз:
1 | <marquee height="100" direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Атрибут width блоктың еніне жауапты. Атрибуты width и height қажетті блоктың шектеулерін орнату үшін Сіз бірге қолдана аласыз
Түсінікті болу үшін, стильдерге жақтауды қосамыз және айналдыру жылдамдығын аздап баяулатады:
1 | <marquee width="300" height="300" scrollamount="15" direction="up" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Енді сызық сызығының фонын орнатайық. Ол үшін bgcolor атрибутты қолданамыз, және оған сары түс түсі қойыңыз:
1 | <marquee bgcolor="#F5FF37" width="300" height="300" scrollamount="12"direction="down" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Енді жүгіртпе жолды әртүрлі бағытта жылжытып көрейік.
1 | <marquee width="49%" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee><marquee width="49%" direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Анимацияны пайдаланып, анимацияның кешігу уақытын scrolldelay арқылы орнатыңыз
, сандық мәндерді ауыстыру
. Әдепкі мәні - 80 миллисекунд:
1 | <marquee scrolldelay="30" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Атрибут scrolldelay — Бұл басқа айналдыру жылдамдығын реттей алатын құрал.
Сурет анимациясының қарапайым мысалы:
1 | <marquee direction="right"><img src="Путь до катринки" /></marquee> |
Әрине, суреттің өзі Photoshop-да анимацияланған, бірақ біз оны қозғалыстың әсерін жасайтын бетте айналдыра алдық.
Мұнда тағы бір қызықты мысал бар: marquee қарапайым жүгірткіні жасай аласыз:
1 | <marquee direction="right" scrollamount="10"><img src="Путь до картинки №1"/><img src="Путь до картинки №2" /><img src="Путь до картинки №3"/><img src="Путь до картинки №4"/><img src="Путь до картинки №5"/></marquee> |
Сілтемесі бар слайдердегі әр суретті жасай аласыз:
1 | <marquee scrollamount="10"><a href="URL статьи №1"><img src="Путь до изображения №1" /></a><a href="URL статьи №2"><img src="Путь до изображения №2" /></a><a href="URL статьи №3"><img src="Путь до изображения №3" /></a><a href="URL статьи №"4"><img src="Путь до изображения №4" /></a><a href="URL статьи №5"2"><img src="Путь до изображения №5" /></a></marquee> |
Қарап көріңіз 👇
Пайдалы сілтемелер:
» Туған күнге 99 тілектер жинағы: өз сөзімен, қысқаша, қарапайым туған күнге тілек
» Абай Құнанбаев барлық өлеңдер жинағын жүктеу, оқу
» Дастархан батасы: дастарханға бата беру, ас қайыру