Adaugare scrolling

Scris de Teodor Dum Mai 10, 2020 4:01 pm

Adaugare scrolling

Bun gasit, La revedere

In acest tutorial va vom explica cum puteti adauga un efect de scrolling pe forumul dumneavoastra. Cu ajutorul acestui scrolling puteti adauga orice doriti (text, imagini, tabele etc.) si face ca aceste obiecte sa se miste dintr-o directie in alta cum doriti. Codurile sunt in format HTML si deci pot fi folosite in Generalitati, Anunturi, pagini HTML, widget-uri personalizate, template-uri si altele.

Numele pentru tag-ul de scroll: marquee

Atribuţiile acestui tag:
id ~> identificatorul tag-ului;
scrolldelay ~> timp im milisecunde intre fiecare mişcare;
scrollamount ~> distanta in pixeli intre fiecare mişcare;
height ~> înălţimea in pixeli a ferestrei cu scroll;
width ~> latimea in pixeli a ferestrei cu scroll;
direction ~> direcţia scrolling-ului (up - de jos in sus; down - de sus in jos; left - de la dreapta la stanga; right - de la stanga la dreapta);
behavior ~> comportamentul scroll-ului (alternate - in alternanta; scroll - normal; slide - dintr-o parte in alta);
loop ~> număr de scroll-uri (daca nu este specificat - numarul este infinit).

Varianta 1 - Scrolling implicit:

Un text simplu de scroll:

Cod:: <marquee>Textul dumneavoastra aici</marquee>

Un scrolling simplu cu poze (afisate orizontal):

Cod:: <marquee><img src="Link imagine 1"> <img src="Link imagine 2"> <img src="Link imagine 3"></marquee>

Un scrolling simplu cu poze (afisate vertical):

Cod:: <marquee><img src="Link imagine 1"> <img src="Link imagine 2"> <img src="Link imagine 3"></marquee>

Scrolling poze cu link-uri:

Cod:: <marquee><a href="Link redirectionare 1"><img src="Link imagine 1"></a> <a href="Link redirectionare 2"><img src="Link imagine 2"></a> <a href="Link redirectionare 3"><img src="Link imagine 3"></a></marquee>

Varianta 2 - Scrolling-ul se opreste cand cursorul este adus deasupra continutului:

Un text simplu de scroll:

Cod:: <marquee id="id1">Textul dumneavoastra aici</marquee>

Un scrolling simplu cu poze (afisate orizontal):

Cod:: <marquee id="id1"><img src="Link imagine 1" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"> <img src="Link imagine 2" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"> <img src="Link imagine 3" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></marquee>

Scrolling poze cu link-uri:

Cod:: <marquee id="id1"><a href="Link redirectionare 1"><img src="Link imagine 1" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></a> <a href="Link redirectionare 2"><img src="Link imagine 2" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></a> <a href="Link redirectionare 3"><img src="Link imagine 3" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></a></marquee>

Varianta 3 - Scrolling-ul se efectueaza din partea dreapta spre stanga:

Un text simplu de scroll:

Cod:: <marquee direction="left">Textul dumneavoastra aici</marquee>

Un scrolling simplu cu poze (afisate orizontal):

Cod:: <marquee direction="left"><img src="Link imagine 1"> <img src="Link imagine 2"> <img src="Link imagine 3"></marquee>

Un scrolling simplu cu poze (afisate vertical):

Cod:: <marquee direction="left"><img src="Link imagine 1"> <img src="Link imagine 2"> <img src="Link imagine 3"></marquee>

Scrolling poze cu link-uri:

Cod:: <marquee direction="left"><a href="Link redirectionare 1"><img src="Link imagine 1"></a> <a href="Link redirectionare 2"><img src="Link imagine 2"></a> <a href="Link redirectionare 3"><img src="Link imagine 3"></a></marquee>

Puteti personaliza casuta si textul dupa bunul plac folosind urmatorul cod:

Cod:: style="proprietate: valoare;"

Acest atribut se adauga in interiorul balizei marquee.

Atribute ale stilului:
height: Xpx; ~> inaltimea casutei de scrolling;
width: Xpx; ~> latimea casutei de scrolling;
background-color: #culoare; ~> pentru modificarea culorii de fundal a casutei;
background-image: url(Link imagine); ~> pentru adaugarea unei imagini de fundal;
color: #culoare; ~> pentru schimbarea culorii textului;
font-size: Xpx; ~> pentru schimbarea dimensiunii textului;
text-align: pozitionare; ~> pentru pozitionarea textului (left - stanga; center - centru; right - dreapta).

Pentru mai multe coduri CSS, va invitam sa cititi acest tutorial:
https://help.forumgratuit.ro/t43419-css-ce-este-si-cum-functioneaza