Share
Ce que vous allez créerLes nouveaux efforts de conception de Google sont vastes et justifient une conversation considérable. Mais au lieu de parler de la théorie de la conception matérielle et des implications des efforts les plus récents de Google, nous allons nous concentrer sur une technique intéressante que Google a utilisée pour leur page de renvoi Design..
Lorsque l'utilisateur clique sur l'un des blocs, un cercle SVG se développe à partir du point du clic de l'utilisateur pour remplir la majeure partie de la zone. Google se réfère à cela comme l'ondulation tactile. Nous allons recréer cet effet en utilisant quelques lignes de jQuery, du HTML simple et du CSS.
Commençons!
Avant de commencer, nous devons mettre en place une grille de base. Nous allons construire les éléments de la grille sans utiliser de cadre, mais cette technique fonctionnerait avec un cadre parfaitement fin.
Les classes de colonne correspondent aux fractions, de sorte que "col-1-3" signifie 1/3 de la largeur de l'élément conteneur.
Ensuite, nous allons configurer nos classes de colonnes. Nous utilisons LESS, ce qui nous permet d'imbriquer des règles et d'utiliser le Etopérateur. Nous n'entrerons pas dans les détails de LESS, mais dans l'intérêt de ce tutoriel, nous expliquerons comment Et opérateur fonctionne. Mais d'abord, voici le MOINS pour les colonnes.
.col position: relative; bloc de visualisation; float: gauche; marge: 1,25%; couleur de fond: # 444; couleur: #fff; rembourrage: 100px; taille de la boîte: boîte-frontière; & .orange background-color: # EF8130; & .blue background-color: # 00ADE2; & .gray background-color: # 444; & .green background-color: # 76CE51; & -1- & 2 width: 47.5%; & 3 width: 30.8333%; & 4 largeur: 22,5%;
Remarquez le Et règles. le Et l'opérateur ajoute la chaîne qui la suit à l'élément parent. En d'autres termes, ceci MOINS:
.col & -1 & -3 color: #fff;
Cela donnerait ce CSS:
.col-1-3 color: #fff;
Et ce MOINS:
& .col & .orange background-color: # EF8130;
Cela donnerait ce CSS:
.col.orange background-color: # EF8130;
Si vous souhaitez en savoir plus sur LESS, consultez ces tutoriels ici sur Tuts +:
Ensuite, planifions comment le clic fonctionnera et comment le SVG sera placé dans chacune des cases..
Lorsque l'utilisateur clique sur l'une des cases, nous calculons le décalage de la position de la souris à partir du coin de cette case. Nous utiliserons ensuite ces coordonnées pour placer le cercle. Nous allons aussi absolument positionner l'élément SVG à l'intérieur des cases, et les cases elles-mêmes seront positionnées par rapport. Nous utiliserons le natif de SVG
Tout d'abord, configurons le CSS pour les éléments SVG.
svg position: absolute; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; cercle remplissage: rgba (255,255,255,0.1);
Le remplissage utilise du RGBa, qui remplit l’élément circulaire de blanc à 10%..
Tout d'abord, nous allons configurer un écouteur de clic sur le .col éléments, et saisissez la position de la souris par rapport au document (sans tenir compte de la position de défilement).
La position est relative à la boîte elle-même; le coin supérieur gauche de la boîte est récupéré à l'aide de $ (this) .offset ().
Accentsconagua
$ (".col"). sur ("click", fonction (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (this) .offset (). top; var clickX = x - $ (this) .offset (). left; var box = this; //…);Remarque: nous utilisons jQuery pour cet exemple.
Ensuite, nous allons convertir le clickX et clickY variables à des entiers, comme ils apparaissent comme des flottants dans certains navigateurs. Cela permet d'éviter tout problème de rendu résultant d'un alias de sous-pixels. Notez cependant que cela ne serait pas nécessairement nécessaire pour que l'effet fonctionne.
var setX = parseInt (clickX); var setY = parseInt (clickY);
Ensuite, nous allons supprimer tous les éléments SVG existants de notre boîte de dialogue. Si vous envisagez d’ajouter un fichier SVG au contenu de la boîte, assurez-vous d’utiliser quelque chose comme jQuery.ne pas() en combinaison avec une classe pour éviter de supprimer votre contenu.
$ (this) .find ("svg"). remove ();Ensuite, nous annexons notre SVG, que nous créons en passant du texte à la fonction jQuery.
$ (this) .append ('');le setX et setY positionner le centre du cercle au point du clic que nous avons dérivé plus tôt.
Ensuite, nous animons le r propriété (qui définit le rayon) en utilisant jQuery animer une fonction. La fonction animate ne supporte pas les propriétés d’animation, nous utilisons donc le étape option, appelée après chaque étape de l'animation elle-même.
var c = $ (box) .find ("cercle"); c.animate ("r": $ (box) .outerWidth (), easing: "FACILITATION", durée: 400, étape: function (val) c.attr ("r", val); )Rappelez-vous que boîte est défini plus tôt comme étant la boîte sur laquelle vous avez cliqué. Nous utilisons également jquery.easing, ce qui nous permet de définir "easEutOutQuad" pour la propriété d'accélération..
Le code JavaScript final ressemblera à ceci:
$ (".col"). sur ("click", fonction (e) var x = e.pageX; var y = e.pageY; var clickY = y - $ (this) .offset (). top; var clickX = x - $ (this) .offset (). left; var box = ceci; var setX = parseInt (clickX); var setY = parseInt (clickY); $ (ceci) .find ("svg"). remove ( ); $ (this) .append (''); var c = $ (box) .find ("cercle"); c.animate ("r": $ (box) .outerWidth (), easing: "FACILITE", durée: 400, étape: function (val) c.attr ("r", val); ) );Cet effet simple peut être utilisé de différentes manières au-delà de notre exemple. Imaginez, par exemple, identifier l'emplacement d'une personne sur laquelle une personne a cliqué, créer un popover pour commenter cette partie de l'image, puis enregistrer les coordonnées. Quelles utilisations pouvez-vous trouver pour cet effet?
