Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Пресъздаване на Ripple Effect част от Google Design

by
Difficulty:IntermediateLength:ShortLanguages:

Bulgarian (Български) translation by Mihail Petrov (you can also view the original English article)

Final product image
What You'll Be Creating

Основна тема на разговорите последно време е новият подход на Google към дизайна. Но вместо да говорим за теорията зад концепцията Material Design, ще се съсредоточим върху някой интересни техники които компанията е имплементирала в дизайна на началната страница на технологията, която ни представиха.

Когато потребителите натиснат някой от блоковете пред тях, се наблюдава изпълване на пространството посредством векторен кръг. Google нарича този ефект touch ripple, а ние ще се опитаме да го пресъздадем с помощта на JQuery, HTML и CSS.

Скелет на приложението

Преди да започнем работа ни е необходимо да създадем прост скелет, под формата на мрежа без помощта на никакви външни библиотеки.

В имената на класовете, с тире са отразени дробните размери на колоните на мрежата ( 1-3 => 1/3 ).

Основни стилове

Следващата стъпка е да напишем кода за класовете на колоните. За целта ще ползваме LESS, който ни дава възможност да влагаме стиловете един в друг, както и да използваме оператора &. Няма да навлизаме в подробности касаещи LESS, но въпреки това че обясним значението на оператора &. Преди това вижте кода за класовете на колоните.

Оператора &, долепя името на родителският елемент към името на вложеният елемент. Следващият пример илюстрира действието на оператора.

Ще бъде компилиран до следният код:

Както и този код

Ще доведе до следният резултат

Ако искате да научите повече за технологията LESS, можете да почерпите повече информация от следните уроци.

Как работи векторната графика (SVG)

Нека сега обясним по какъв начин ще създадем ефекта със запълване на блока при натискане на бутона на мишката. Въпроса е да разберем как да създадем векторен кръг в рамките на натиснатият блок.

Когато потребителя натисне блока, е необходимо да изчислим разстоянието от курсора до краищата на блока, в който се намираме. След това ще ползваме намерените координати за да изчертаем кръг. Векторният елемент ще бъде позициониран с абсолютни координати в рамките на блока, докато той самият ще бъде позициониран релативно спрямо елемента. За целта ще ползваме SVG елемента #, както и няколко jQuery функции които ще ни помогнат с анимацията.

Първата ни работа е да създадем стилови правила за векторните елементи.

За запълване на кръга, използваме алфа канала(прозрачност), даден ни от свойството RGBa, като дефинираме стойност на прозрачност в рамките на 10%.

JavaScript кода

Ще дефинираме слушател за събитието, щракване с мишката върху елемент с клас .col . След това ще вземем релативната позиция на елемент спрямо документа.

Улавяне позицията на мишката

Позицията на мишката е относителна спрямо блока. За да вземем координатите на горният ляв ъгъл използваме метода $(this).offset().

Забележка: В рамките на примерите ползваме библиотеката jQuery.

Конвертираме стойностите на променливите clickX и clickY, в целочислени стойности, като така избягваме несъответствия при визуализирането на ефекта в различни браузъри.

Премахване на съществуващите векторни елементи.

Налага се да премахнем всички съществуващи SVG елементи които съществуват в рамките на блока върху който щракаме. Ако смятате да добавяте векторно съдържание в рамките на блока, е добре да ползвате метод като jQuery's.not(), в комбинация с някакъв клас, като по този начин гарантирате, че няма да премахнете точно този специфичен елемент.

Добавяне на новият векторен елемент

Следва да добавим векторният елемент, като подадем текстово съдържание на функцията:

Полетата setX и setY, определят центъра на векторният кръг, точно там където активираме щракването с мишката.

Анимация

Остава да анимираме, радиуса на кръга с помощта на jQuery функцията animate. На всяка стъпка се налага да извикаме метод, които ще се погрижи за промяна на радиуса на елемента.

Не забравяйте че елемента box, беше дефиниран по рано. В рамките на този код, използваме изинга(""easeOutQuad"") на jQuery .

Завършеният код

Завършеният вид на кода изглежда така:

Заключение

Ефекта, който ви показах може да намери множество приложения различни от демонстрираното. Например можете да идентифицирате позицията, върху която е щракнал потребителя в рамките на произволно изображение, което от своя страна може да създаде ефект на изскачащ прозорец за коментари. Приложенията са наистина много, помислете какви бихте предложили вие.

Няколко примера

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.