Hoe ze het deden Crowdpilot

Wat je gaat creëren

De landingspagina van Crowdpilot laat zien hoe eenvoudig en geweldig SVG is in combinatie met JavaScript- en CSS-animaties. In deze tutorial leer je hoe je Crowdpilot's diagonale berichtrotator en gordijn kunt recreëren, plus praten we wat over "plat" ontwerp en wat het betekent om native elementen te ontwerpen.

Haal adem.

Crowdpilot is een app waarmee je de oren (en meningen) van je vrienden overal kunt meenemen. We zullen een deel van wat de Crowdpilot-website doet herscheppen, maar kortheidshalve zal deze tutorial de sociale discussies en privacydiscussies negeren die de app anders zou vragen.

Een snelle Rant

Misschien heb je gehoord van de vlakke trend. Het gaat snel rond - als je een webdesigner bent, zul je deze verschuiving waarschijnlijk op een of andere manier omarmen.

Maar omwille van het verheffen van onze ontwerpdiscussie, doet 'flat' niet recht aan de verschuiving. Voor een vollediger perspectief op de drijvende factoren achter de 'platte trend', bekijk eens dit geweldige stuk van Frank Chimero, 'What Screens Want', vanaf november 2013. In het stuk maakt Chimero het argument dat onze hersenen zich aanpassen naar het digitale landschap, en dat wat we eens nodig hadden om bijvoorbeeld een "verwijderde" map op een computer te begrijpen, een weergave was van afval dat we gelijkstellen aan onze tastbare weergave van teruggooi; een 3d-lijkende vuilnisbak. Maar omdat onze hersenen zich aanpassen aan de meer oorspronkelijke voorstellingen van digitale verwijdering, hebben we deze metaforen niet langer nodig - wat Chimero 'padding' noemt (in verwijzing naar de extra coating op een aspirinepil buiten het actieve ingrediënt waardoor het gemakkelijk te begrijpen is). 

Van het stuk:

Dus terwijl de grootte van een aspirinepil wordt beperkt door je stompe kleine vingers, kunnen je hersenen de patronen van een interface normaliseren en ruimte maken voor genuanceerde abstracties.

Met dat gezegd, laten we eens kijken naar een goed voorbeeld van een eigen digitaal ontwerpelement in dienst van Crowdpilot.

Terug naar de tutorial

De relatief eenvoudige pagina heeft een grote afspeelknop en het scherm wordt horizontaal gedeeld door twee gekleurde driehoeken. Als u op de knop Afspelen klikt, wordt een video op volledig scherm weergegeven achter de driehoeken.

We gaan dit effect recreëren.

SVG: Triangles Easy maken sinds 2001

Crowdpilot's geheime saus is twee zeer eenvoudige SVG's. We hebben de broncode van een van deze SVG's rechtstreeks overgenomen uit hun code:

We kunnen dit stuk tegelijk bekijken.

enable-achtergrond = "nieuw 0 0 100 100"

Deze eigenschap wordt grotendeels niet ondersteund en verwijst naar de achtergrondsamenstelling, die niet echt relevant is voor dit gebruik, dus we zullen het weglaten uit ons voorbeeld.

hoogte breedte

We zullen ook de kenmerken width en height van de SVG negeren, omdat we CSS-eigenschappen kunnen gebruiken om het effect te bereiken dat in het voorbeeld wordt gezien.

preserveAspectRatio = "none", viewBox = "0 0 100 100"

Hierdoor kan onze SVG schalen naar elke gewenste verhouding. Onze viewBox-waarden stellen een canvas in voor onze SVG en worden meestal gebruikt met verwijzing naar het onderliggende polygoonelement. Het SVG-canvas (niet te verwarren met de canvas element) is in dit geval 100x100 willekeurige eenheden. (Een goede inschatting: wie de Crowdpilot splash-pagina heeft gemaakt, wilde een 100x100 viewBox gebruiken om naar "100 procent" te verwijzen.)

veelhoekpunten = "100,0 0,100 0,0"

Hiermee wordt een polygoon gemaakt op de locaties die worden weergegeven als x / y-coördinaten, die het volgende produceert: x = 100, y = 0 (rechtsboven) x = 0 y = 100 (linksonder) x = 0, y = 0 (linksboven)

Deze veelhoekcombinatie met onze vierkante viewBox in de svg bovenliggende tag is wat onze driehoek maakt.

Bouw ons gordijn onthullen

Een vereenvoudigde versie van onze SVG ziet er ongeveer zo uit:

Hoe raar het ook lijkt, we kunnen dit direct in onze body-tag plaatsen.

Voor ons voorbeeld plaatsen we een logo in het midden en onthullen we een achtergrondafbeelding wanneer u op het logo klikt. Sluit vervolgens het gordijn door nogmaals op het logo te klikken. Hiervoor voegen we gewoon een ankertag toe en positioneren we deze absoluut in het midden van het scherm.

.envato-logo width: 120px; hoogte: 120 px; positie: absoluut; top: 50%; links: 50%; background-image: url (envato-logo.png); achtergrondformaat: omslag; marge links: -60px; margin-top: -60px; 

Voor onze onthullende animatie kunnen we een beetje JavaScript gebruiken om naar een klik op het ankerelement te luisteren en een klasse op de lichaam.

$ (". envato-logo"). on ("klik", functie (e) e.preventDefault (); $ ("body"). toggleClass ("curtain-open"););

We willen er dan voor zorgen dat onze polygonen een CSS-transformatie en -overgang hebben toegepast. Omdat we weten dat we later ook de kleur willen animeren, gebruiken we het allemaal waarde voor de eigenschap die moet worden geanimeerd.

.gordijn open polygoon: eerste kind transform: translate3d (0, -100%, 0);  .schaduwopen polygoon: laatste kind transform: translate3d (0, 100%, 0);  polygoon positie: relatief; overgang: alle 0.4s; 

Merk op dat deze regels ook goed moeten worden voorafgegaan door een browser. 

hint: probeer iets als Prefix Free uit om uw prefix-ellende op te lossen.

Een belangrijk punt om te begrijpen is dat al onze animatiekracht wordt bereikt met CSS. Dit maakt ons JavaScript erg licht en onze presentatie flexibel.

Fietsen Kleuren

Om door verschillende kleuren voor de driehoek linksboven te lopen, zullen we een interval instellen om door een reeks informatie te bladeren. In het voorbeeld van Crowdpilot zien we linksboven een roterende achtergrondkleur van de bovenste driehoek en roterende tekst. Hier is een korte uitleg over hoe dit te bereiken.

Eerst stellen we een reeks objecten in met elk een achtergrondkleur en tekst.

 // berichtgegevens var cycle_array = [color: "# c479b7", tekst: "Hier is wat tekst en wat dan ook." , color: "# c4a179", tekst: "SVG is verbazingwekkend krachtig." , color: "# 222", tekst: "Diagonalen zijn in." ]

Vervolgens stellen we een interval in om elke twee seconden door de kleuren en berichten te bladeren.

var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). first (); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = cycle_array [i]; $ ("svg polygon"). first (). css (fill: nextObj.color); $ ( ".message"). html (nextObj.text); i ++;, 2000);

We gebruiken een slimme truc in de tweede regel van de setInterval functie. We hebben opgezet ik om te herhalen tot het laatste item en we stellen het terug op 0 met behulp van de modulus-operator %, die de rest van een divisie retourneert. Met andere woorden, op de derde iteratie, ik zal gelijk zijn aan 3; 3/3 heeft geen rest, dus ik wordt teruggezet naar 0.

De rest van deze code is relatief eenvoudig; we nemen aan dat er een element is met de klasse van bericht. Het is je misschien ook opgevallen dat we de CSS-eigenschap instellen (en niet de jQuery-animatiefunctie gebruiken); dit komt omdat we al overgangen in onze CSS hebben ingesteld.

Bonus: willekeurige kleurwijzigingen

Natuurlijk wil je waarschijnlijk kleuren waar je tekst goed uitziet. Maar als u een willekeurige kleur wilt, laten we dan een coole truc gebruiken die te vinden is op het blog van Paul Irish om een ​​willekeurig hexagram te genereren. Het eerder gebruikte JavaScript zou hier veranderen:

var i = 0, messageHolder = $ (". message"), poly = $ ("svg polygon"). first (); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = cycle_array [i]; $ ("svg-polygoon"). first (). css (fill: '#' + Math.floor ( Math.random () * 16777215) .toString (16)); $ (". Message"). Html (nextObj.text); i ++;, 2000);

Tweede bonus: jQuery-less

Als u niet elke browser hoeft te ondersteunen en wilt afvallen door jQuery-less te gebruiken, kunt u dat doen met deze code.

// jQuery-less version (function () // loginklik, polygoon verplaats var envatoLogo = document.querySelector (". envato-logo"); envatoLogo.onclick = function () document.querySelector ("body"). classList.toggle ("gordijn-open"); // berichtgegevens var cycle_array = [color: "# c479b7", tekst: "Hier is wat tekst en wat dan ook.", color: "# c4a179", tekst: "SVG is ongelooflijk krachtig.", Color: "# 222", tekst: "Diagonals are in."] // berichtintervallen var i = 0, messageHolder = document.querySelector (". Message"), poly = document.querySelector ("polygoon"); var interval = setInterval (function () i = i% cycle_array.length; var nextObj = cycle_array [i]; poly.style.fill = nextObj.color; document.querySelector (". message "). innerHTML = nextObj.text; i ++;, 3000); ());

We hebben veel van de jQuery-gebaseerde oproepen vervangen door gewoon JavaScript, dankzij de zich ontwikkelende native selectie en DOM-manipulatie-API's.

Conclusie

De eenvoud van native digitale interfaces in combinatie met de flexibiliteit en kracht van SVG- en CSS3-animaties geeft ons de mogelijkheid om ervaringen op te bouwen, zoals die op Crowdpilot, met minimale inspanning. 

Het is belangrijk om enigszins op de hoogte te blijven van evoluerende API's en technologieën; om hetzelfde effect te bereiken als wat we in ongeveer 100 regels code hebben gemaakt, hadden we moeten vertrouwen op veel moeilijkere, inefficiënte manieren om relatief eenvoudige vormen te creëren. Naarmate het web evolueert, veranderen ook de tools die we gebruiken om het te bouwen; dit voorbeeld laat zien hoe krachtig deze tools zijn geworden.