Comment ils l'ont fait Crowdpilot

Ce que vous allez créer

La page de destination de Crowdpilot montre à quel point SVG est simple et génial, combiné à des animations JavaScript et CSS. Dans ce didacticiel, vous apprendrez à recréer le rideau de messages et le rideau en diagonale de Crowdpilot. De plus, nous parlerons un peu du design "plat" et de ce que signifie concevoir des éléments natifs sous forme numérique..

Respirer.

Crowdpilot est une application qui vous permet d'apporter les oreilles (et les opinions) de vos amis partout avec vous. Nous allons recréer une partie de ce que fait le site Web Crowdpilot, mais par souci de brièveté, ce didacticiel ignorera les discussions sur les questions sociales et la vie privée que l'application demanderait autrement..

Un coup de gueule rapide

Peut-être que vous avez entendu parler de la tendance à plat. Cela se fait rapidement - si vous êtes un concepteur Web, vous accepterez probablement ce changement sous une forme ou une autre..

Mais dans le but de rehausser notre discussion sur le design, "flat" ne rend pas justice au changement. Pour un aperçu plus complet des facteurs à l'origine de la "tendance à la baisse", jetez un coup d'œil à cet impressionnant article de Frank Chimero, "What Screens Want", de novembre 2013. Dans l'article, Chimero affirme que notre cerveau s'adapte Pour le paysage numérique, il nous fallait comprendre, par exemple, un dossier "supprimé" sur un ordinateur, une représentation de la corbeille que nous assimilons à notre représentation tangible de la mise au rebut; une poubelle d'aspect 3d. Mais à mesure que notre cerveau s'adapte à des représentations plus naturelles de la suppression numérique, nous n'aurons plus besoin de ces métaphores - ce que Chimero appelle "le rembourrage" (en référence au revêtement supplémentaire sur une pilule d'aspirine au-delà de l'ingrédient actif qui le rend facile à comprendre).. 

De la pièce:

Ainsi, alors que la taille d'une pilule d'aspirine est limitée par vos petits doigts trapus, votre cerveau peut normaliser les schémas d'une interface et faire place à des abstractions plus nuancées..

Cela dit, examinons un bon exemple d’élément de conception numérique natif utilisé par Crowdpilot..

Retour au tutoriel

La page relativement simple comporte un gros bouton de lecture et l'écran est divisé horizontalement par deux triangles colorés. En cliquant sur le bouton de lecture, une vidéo en plein écran apparaît derrière les triangles..

Nous allons recréer cet effet.

SVG: Faciliter les triangles depuis 2001

La sauce secrète de Crowdpilot est deux SVG très simples. Nous avons pris le code source d'un de ces SVG directement à partir de leur code:

Nous pouvons regarder cette pièce à la fois.

enable-background = "new 0 0 100 100"

Cette propriété est en grande partie non prise en charge et fait référence à la composition en arrière-plan, qui n'est pas réellement pertinente pour ce cas d'utilisation. Nous allons donc l'omettre de notre exemple..

hauteur largeur

Nous ignorerons également les attributs width et height du fichier SVG, car nous pouvons utiliser les propriétés CSS pour obtenir l'effet présenté dans l'exemple..

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

Cela permet à notre SVG de s’adapter à n’importe quel rapport. Nos valeurs de viewBox configurent un canevas pour notre SVG et sont principalement utilisées en référence à l'élément polygone enfant. Le canevas SVG (à ne pas confondre avec le Toile élément) dans ce cas est 100x100 unités arbitraires. (Une bonne supposition: quiconque a créé la page de démarrage Crowdpilot voulait utiliser un viewBox 100x100 pour faire référence à "100%".)

points polygonaux = "100,0 0,100 0,0"

Cela crée un polygone aux emplacements indiqués comme coordonnées x / y, ce qui produit: x = 100, y = 0 (en haut à droite) x = 0 y = 100 (en bas à gauche) x = 0, y = 0 (en haut à gauche)

Cette combinaison de polygones avec notre viewbox carré dans le svg balise parent est ce qui crée notre triangle.

Construire notre rideau révèle

Une version simplifiée de notre SVG ressemblera à ceci:

Aussi étrange que cela puisse paraître, nous pouvons placer cela directement dans notre balise body.

Pour notre exemple, nous allons placer un logo au centre et révéler une image d'arrière-plan lorsque vous cliquez sur le logo, puis fermez le rideau en cliquant à nouveau sur le logo. Pour cela, nous allons simplement ajouter une balise d'ancrage et la positionner absolument au centre de l'écran..

.envato-logo width: 120px; hauteur: 120px; position: absolue; en haut: 50%; à gauche: 50%; background-image: url (envato-logo.png); taille du fond: couverture; marge gauche: -60px; marge supérieure: -60px; 

Pour notre animation de révélation, nous pouvons utiliser un peu de JavaScript pour écouter un clic sur l'élément d'ancrage, et basculer d'une classe à l'autre. corps.

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

Nous voulons ensuite nous assurer que nos polygones ont une transformation CSS et une transition appliquée. Puisque nous savons que nous voulons aussi animer la couleur plus tard, utilisons les tout valeur pour la propriété à animer.

.polygone ouvert par le rideau: premier-enfant transformer: translate3d (0, -100%, 0);  .Curtain-open polygone: last-child transform: translate3d (0, 100%, 0);  polygone position: relative; transition: tous les 0.4s; 

Notez que ces règles devront également être correctement préfixées par le navigateur.. 

Allusion: essayez quelque chose comme Prefix Free pour résoudre vos problèmes de préfixe.

Une chose importante à comprendre ici est que tout notre pouvoir d’animation est réalisé avec CSS. Cela rend notre JavaScript très léger et notre présentation flexible.

Couleurs Vélo

Pour parcourir les différentes couleurs du triangle en haut à gauche, nous allons définir un intervalle permettant de parcourir en boucle un tableau d'informations. Dans l'exemple de Crowdpilot, nous voyons une couleur d'arrière-plan en rotation du triangle supérieur ainsi qu'un texte en rotation en haut à gauche. Voici une explication rapide sur la façon d'accomplir ceci.

Tout d'abord, nous allons configurer un tableau d'objets, chacun avec une couleur d'arrière-plan et un texte..

 // données de message var cycle_array = [color: "# c479b7", text: "voici du texte et tout le reste". , color: "# c4a179", text: "SVG est incroyablement puissant." , color: "# 222", text: "Les diagonales sont présentes." ]

Ensuite, nous allons définir un intervalle pour parcourir les couleurs et les messages toutes les deux secondes..

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

Nous utilisons une astuce dans la deuxième ligne de la setInterval une fonction. Nous mettons en place je itérer jusqu'au dernier élément, et nous le remettons à 0 à l'aide de l'opérateur de module %, qui retourne le reste d'une division. En d'autres termes, à la troisième itération, je sera égal à 3; 3/3 n'a pas de reste, donc je sera remis à 0.

Le reste de ce code est relativement simple. nous supposons qu'il existe un élément avec la classe de message. Vous avez peut-être aussi remarqué que nous définissons la propriété CSS (sans utiliser la fonction animer jQuery); c'est parce que nous avons déjà mis en place des transitions dans notre CSS.

Bonus: Changements de couleur aléatoires

Bien sûr, vous voulez probablement des couleurs sur lesquelles votre texte a fière allure. Mais si vous voulez une couleur aléatoire, utilisons un truc cool trouvé sur le blog de Paul Irish pour générer un hexagone aléatoire. Le JavaScript précédemment utilisé changerait à ceci:

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

Deuxième bonus: moins de jQuery

Si vous n'avez pas besoin de supporter tous les navigateurs et que vous voulez perdre du poids en utilisant jQuery-less, vous pouvez le faire avec ce code.

// jQuery-less version (function () // logo clic, déplacement de polygone var envatoLogo = document.querySelector (". envato-logo"); envatoLogo.onclick = function () document.querySelector ("corps"). classList.toggle ("curtain-open"); // données de message var cycle_array = [color: "# c479b7", text: "Voici du texte et tout le reste.", color: "# c4a179", text: "SVG est incroyablement puissant.", Color: "# 222", text: "Les diagonales sont bien".] // intervalles de messages var i = 0, messageHolder = document.querySelector (". Message"), poly = document.querySelector ("polygone"); var interval = setInterval (fonction () i = i% cycle_array.length; var nextObj = cycle_array [i]; poly.style.fill = nextObj.color; document.querySelector (". message "). innerHTML = nextObj.text; i ++;, 3000); ());

Nous avons remplacé de nombreux appels basés sur jQuery par du code JavaScript simple, grâce à la sélection évolutive d'API et aux API de manipulation DOM..

Conclusion

La simplicité des interfaces numériques natives, associée à la flexibilité et à la puissance des animations SVG et CSS3, nous permet de créer des expériences, comme celle vue sur Crowdpilot, avec un minimum d'effort.. 

Il est important de rester un peu informé de l'évolution des API et des technologies. pour obtenir le même effet que ce que nous avons créé en environ 100 lignes de code, nous aurions dû nous appuyer sur des méthodes beaucoup plus difficiles et inefficaces pour créer des formes relativement simples. Au fur et à mesure que le Web évolue, les outils que nous utilisons pour le développer évoluent également. cet exemple montre à quel point ces outils sont devenus puissants.