Câine din scrollbar-uri
În anul 2008, noi, Pukka, am facut cadou unei agenţii de publicitate propria noastră viziune despre logo-ul ei. Suntem fără doar şi poate o agenţie web, aşa că le-am dat un logo realizat din scrollbar-uri. Unele sănătoase şi naturale, fără flash, png-uri, jpg-uri sau gif-uri. Aveam impresia atunci şi o avem şi acum că am realizat o premieră.
Fără alte adăugiri, iată rezultatul. Alte informaţii mai plictisitoare se pot consulta mai jos:
Scrollbar
Ca scurtă explicaţie, un scrollbar ajută la navigarea pe conţinut şi apare pe verticală sau pe orizontală atunci când conţinutul unui element este mai înalt, respectiv mai lat, decât ar putea cuprinde elementul în cauză. Drept exemplu stă orice pagină web al cărei conţinut e mai "înalt" decât ar încăpea în fereastră.
Un scrollbar este definit de 2 elemente: slider-ul cu care "navighezi" şi scrollbar-ul propriu-zis (pentru cei mai profani dintre noi, "şina" pe care te mişti cu slider-ul). Revenind la cazul nostru particular, să presupunem că scrollbar-urile ar apărea numai pe orizontală. În această situaţie, lungimea unui scrollbar ar fi egală cu lăţimea elementului pe care îl însoţeşte, iar cea a slider-ului ar fi invers proporţională cu lăţimea conţinutului.
Ţinând minte cele de mai sus şi cum nu puteam să generăm nişte scrollbar-uri pur şi simplu, am realizat contextul în care browser-ul le-ar introduce natural, singur, de capul lui.
Contextul
Am realizat câte un container pentru fiecare scrollbar. În interiorul fiecăruia am introdus un alt container, mai lat, cu rol de conţinut. Setând lăţimea containerului exterior, obţineam lungimea scrollbar-ului. Manipulând lăţimea containerului interior, obţineam un slider de orice mărime doream. Mulţumită proprietăţii scrollLeft, înţeleasă de orice browser de pe piaţă, l-am fi putut poziţiona oriunde pe scrollbar. Stabilind tuturor containerelor o înălţime egală cu cea universală a unui scrollbar (16 pixeli), aveam grijă ca utilizatorul să vadă numai şi numai scrollbar-urile şi nimic mai mult. Exact unde voiam să ajungem.
Toate elementele HTML au fost generate cu ajutorul Javascript. Aşa că, pentru fiecare scrollbar în parte, am putut realiza şi cate un array de date cu ajutorul cărora am animat logo-ul.
Un array
Acesta este array-ul primului scrollbar: [0, 50, 1000, 24.5, 1570, 80, 2, 20000, 30, 3000]. De la stanga la dreapta, valorile reprezintă: poziţia pe orizontală a containerului exterior, poziţia lui pe verticală, lăţimea lui (cele trei sunt, practic, setările scrollbar-ului), poziţia finală a slider-ului (aplicabilă ca procent la lăţimea containerului exterior), lăţimea finală a containerului interior, prima poziţie intermediară a slider-ului, a doua poziţie intermediară a lui, lăţimea intermediară a containerului interior, poziţia iniţială a sliderului şi lăţimea iniţială a containerului interior.
Etichete:
Comentarii
-
calciu aprobă şi dă o bere 2009-02-27 11:18:10
http://www.google.ro/search?hl=ro&q=array&btnG=Căutare+Google&meta=
-
florea aprobă şi dă o bere 2009-02-17 17:37:39
Ce inseamna array?
