Cum au făcut-o Crowdpilot

Ce veți crea

Pagina de destinație a lui Crowdpilot arată cât de simplu și minunat este SVG în combinație cu animațiile JavaScript și CSS. În acest tutorial, veți învăța cum să recreați rotatorul mesajului Crowdpilot și perdea, plus vom vorbi puțin despre designul "plat" și ce înseamnă să proiectați elemente native digitale.

Ia o pauza.

Crowdpilot este o aplicație care vă permite să vă aduceți urechile (și opiniile) prietenilor dvs. oriunde. Vom recrea câteva din ceea ce face site-ul Crowdpilot, dar din motive de coerență acest tutorial va ignora discuțiile sociale și de confidențialitate pe care aplicația ar solicita altfel.

Un Rant Rapid

Poate că ați auzit de trendul plat. Faceți-vă drumul rapid - dacă sunteți un web designer, probabil veți îmbrățișa această schimbare într-o formă sau alta.

Dar, de dragul ridicării discuției noastre despre design, "plat" nu face schimbarea justiției. Pentru o perspectivă mai completă asupra factorilor de conducere care se află în spatele "tendinței plane", aruncăm o privire la această piesă minunată a lui Frank Chimero, "What Screens Want", din noiembrie 2013. În piesă, Chimero face argumentul că creierul nostru se adaptează la peisajul digital și că ceea ce odată a fost necesar ca noi să înțelegem, de exemplu, un dosar "șters" pe un computer, a fost o reprezentare a coșurilor de gunoi pe care le echivalăm cu reprezentarea noastră tangibilă a aruncării în aruncare; un coș de gunoi cu aspect 3D. Dar, pe măsură ce creierele noastre se adaptează la reprezentările mai natale ale ștergerii digitale, nu vom mai avea nevoie de aceste metafore - ceea ce Chimero numește "umplutură" (referindu-se la stratul suplimentar pe o pilulă de aspirină dincolo de ingredientul activ care face ușor de înțeles). 

Din piesă:

Deci, în timp ce mărimea unei pastile de aspirină este constrânsă de degetele mici, creierul poate să normalizeze tiparele unei interfețe și să facă loc unor abstracții mai nuante.

Cu aceasta a spus, să aruncăm o privire la un bun exemplu de element de design digital nativ angajat de Crowdpilot.

Înapoi la Tutorial

Pagina relativ simplă are un buton de redare mare și ecranul este împărțit orizontal cu două triunghiuri colorate. Dând clic pe butonul de redare, se afișează un film pe ecran complet în spatele triunghiurilor.

Vom recrea acest efect.

SVG: Triunghiuri ușoare din 2001

Sosul secret al lui Crowdpilot este de două SVG-uri foarte simple. Am luat codul sursă al unuia dintre aceste SVG-uri direct din codul lor:

Ne putem uita la această singură bucată la un moment dat.

enable-background = "new 0 0 100 100"

Această proprietate este în mare măsură nesuportată și se referă la compoziția de fundal, care nu este relevantă pentru acest caz de utilizare, așa că o vom omite din exemplul nostru.

Înălțime lățime

De asemenea, vom ignora atributele de lățime și înălțime ale SVG, deoarece putem folosi proprietățile CSS pentru a realiza efectul văzut în exemplul.

preserveAspectRatio = "niciuna", viewBox = "0 0 100 100"

Aceasta permite SVG-ul nostru să scadă la orice raport. Valorile noastre viewBox au creat o pânză pentru SVG-ul nostru și sunt utilizate în cea mai mare parte pentru referire la elementul poligon copil. Panza SVG (nu trebuie confundată cu pânză element) în acest caz este o unitate arbitrară de 100x100. (O presupunere bună: Oricine a creat pagina de spargere Crowdpilot a vrut să folosească o cutie de vizualizare de 100x100 pentru a atrage atenția asupra a 100%.)

puncte de poligon = "100,0 0,100 0,0"

Acest lucru creează un poligon în locațiile enumerate ca coordonate x / y, care produce: x = 100, y = 0 (dreapta sus) x = 0 y = 100 (stânga jos) x = 0, y = 0

Această combinație poligon cu pătrarea noastră pătratică în svg tag-ul părinte este ceea ce creează triunghiul nostru.

Construirea Cortinei noastre Reveal

O versiune simplificată a SVG va arăta astfel:

Atât de ciudat cum pare, putem plasa acest lucru direct în eticheta noastră corporală.

Pentru exemplul nostru, vom plasa un logo în centru și vom dezvălui o imagine de fundal când faceți clic pe siglă, apoi închideți peronul făcând din nou clic pe logo. Pentru aceasta, vom adăuga o etichetă de ancorare și o vom poziționa absolut în centrul ecranului.

.envato-logo lățime: 120px; înălțime: 120px; poziția: absolută; top: 50%; stânga: 50%; fundal-imagine: url (envato-logo.png); dimensiunea fundalului: capac; margin-stânga: -60px; margin-top: -60px; 

Pentru animația noastră de dezvăluire, putem folosi un pic de JavaScript pentru a asculta pentru un clic pe elementul de ancorare și pentru a comuta o clasă pe corp.

$ (".cnvato-logo") pe ("faceți clic", funcția (e) e.preventDefault (); $ ("corp").

Apoi dorim să ne asigurăm că poligoanele noastre au o transformare CSS și tranziție aplicată. Din moment ce știm că vrem să animăm și culoarea mai târziu, să folosim toate valoare pentru proprietatea de animat.

.cortină deschisă poligon: primul-copil transform: translate3d (0, -100%, 0);  un poligon curat-deschis: ultimul-copil transform: translate3d (0, 100%, 0);  poligon poziție: relativă; tranziție: toate 0,4s; 

Rețineți că aceste reguli vor trebui să fie prefixate corect în browser. 

Aluzie: încercați ceva de genul Prefix gratuit pentru a vă rezolva problemele de prefix.

Un lucru important pentru a înțelege aici este faptul că toată puterea noastră de animație este realizată cu CSS. Acest lucru face ca JavaScript-ul nostru să fie foarte ușor și prezentarea noastră să fie flexibilă.

Ciclism Culori

Pentru a parcurge diferite culori pentru triunghiul stânga sus, vom seta un interval de buclă prin intermediul unei serii de informații. În exemplul din Crowdpilot, vedem o culoare de fundal rotativă a triunghiului superior, precum și textul rotativ din partea stângă sus. Iată o explicație rapidă a modului în care puteți realiza acest lucru.

În primul rând, vom seta o serie de obiecte fiecare cu o culoare de fundal și un text.

 // date de mesaj var cycle_array = [culoare: "# c479b7", text: "Iată câteva texte și ce nu." , color: "# c4a179", text: "SVG este uimitor de puternic." , color: "# 222", text: "Sunt în diagonali." ]

Apoi, vom seta un interval pentru a trece prin culori și mesaje la fiecare două secunde.

var i = 0, messageHolder = $ ("mesaj"), poly = $ ("svg polygon"). var interval = setInterval (functie () i = i% ciclu_array.length; var urmatorulObj = ciclu_array [i]; $ ("svg poligon"). ".message"); html (nextObj.text); i ++;, 2000);

Folosim un truc inteligent în a doua linie a lui setInterval funcţie. Ne-am înființat eu pentru a itera până la ultimul element și îl setăm înapoi la 0 utilizând operatorul modulului %, care returnează restul unei diviziuni. Cu alte cuvinte, în cea de-a treia iterație, eu va fi egal cu 3; 3/3 nu are un rest, deci eu va fi readus la 0.

Restul acestui cod este relativ simplu; presupunem că există un element cu clasa lui mesaj. S-ar putea să fi observat că setăm proprietatea CSS (și nu folosim funcția jQuery animate); acest lucru se datorează faptului că am stabilit deja tranziții în CSS.

Bonus: Modificări de culoare aleatorii

Sigur, probabil că doriți culori pe care textul dvs. să le arate bine. Dar dacă doriți o culoare aleatorie, hai să folosim un truc răcoros găsit pe blogul lui Paul Irish pentru a genera un șablon hexazecimal. JavaScript folosit anterior s-ar schimba la aceasta:

var i = 0, messageHolder = $ ("mesaj"), poly = $ ("svg polygon"). var interval = setInterval (functie () i = i% ciclu_array.length; var urmatorObj = ciclu_array [i]; $ ("svg poligon"). Math.random () * 16777215). La String (16)); $ (". Mesaj"); html (nextObj.text); i ++;, 2000);

Al doilea bonus: jQuery-less

Dacă nu aveți nevoie să sprijiniți fiecare browser și doriți să pierdeți o greutate jQuery-less, puteți face acest lucru cu acest cod.

// jQuery-less version (funcția () // click pe logo, mutarea poligonului var envatoLogo = document.querySelector (".envato-logo"); envatoLogo.onclick = function () document.querySelector ("body"). classList.toggle ("curtain-open"); // date de mesaj var cycle_array = [color: "# c479b7", text: "Iată câteva texte și ce nu.", color: "# c4a179" "SVG este incredibil de puternică", color: "# 222", text: "Diagonalele se află în."]] // intervalele mesajelor var i = 0, messageHolder = document.querySelector (" document.querySelector ("poligon"); var interval = setInterval (funcția () i = i% cycle_array.length; var nextObj = ciclul_array [i]; poly.style.fill = nextObj.color; document.querySelector (" mesajul ") innerHTML = nextObj.text; i ++;, 3000); ());

Am înlocuit o mulțime de apeluri bazate pe jQuery cu JavaScript simplu, datorită selecției native în evoluție și API-urilor de manipulare DOM.

Concluzie

Simplitatea interfețelor digitale native, combinată cu flexibilitatea și puterea animațiilor SVG și CSS3, ne oferă puterea de a construi experiențe, cum ar fi cea observată pe Crowdpilot, cu un efort minim. 

Este important să păstrați oarecum informația despre API-urile și tehnologiile în evoluție; pentru a realiza același efect ca și ceea ce am creat în aproximativ 100 de linii de cod, ar fi trebuit să ne bazăm pe modalități mult mai dificile și ineficiente de a crea forme relativ simple. Pe măsură ce web-ul evoluează, la fel și instrumentele pe care le folosim pentru ao construi; acest exemplu arată cât de puternice au devenit aceste instrumente.