Partition — произход и подобрения

Преди 3 седмици написах blogpost, в който показвам demo на един partition ефект. Май в последно време е доста нашумял.

От тогава насам ми се случи да го срещна на още 2 места, което потвърждава разпространеността на ефекта.

Днес най-сетне даже намерих от къде идва. Спомних си, че за първи път съм го видял там. Ефектът тръгва от default cover картинката на профил в Google+ (https://www.google.com/search?q=google%2B+default+cover+photo&hl=en&safe=off&source=lnms&tbm=isch&sa=X&ei=6-NEUdehKIantAab44DQDA&ved=0CAoQ_AUoAQ&biw=1304&bih=707).

На https://magadanski.com/demo/partition/ можете да видите demo на ефекта. Преди малко качих обновена версия. Ако сте го виждали преди — може да ви е интересно да хвърлите нов поглед. Имайте едно на ум, че при refresh се генерира нов изглед.

Самият JavaScript, който съм написал съдържа интересни особености. Затова реших да напиша и кратко обяснение, което да го придружи.

Като за начало ето го и самия код (можете да го видите и на https://gist.github.com/magadanskiuchen/5177953):

Обяснителни записки

Коментарите по-долу се отнасят за func.js файла.

shuffle()

Още в самото начало ще видите Array.prototype.... Array е името на класа за масиви в JavaScript. Чрез prototype можем да редактираме методите на този клас. В нашия случай добавяме метод shuffle, който по подразбиране отсъства в JavaScript. Добавяйки метод посредством prototype той ще е валиден за всяка инстанция на обект от този клас. Така че ще можем да извикаме shuffle за всеки масив в кода ни.

Контролирани произволни стойности

Останалата част от кода ни се изпълнява на DOM ready.

Като цяло кодът разчита на произволни стойности, но все пак прилагаме известен контрол като ги ограничаваме в известни граници.

Използваме няколко конфигурационни променливи (minItems, maxItems, minDimensions, maxDimensions), в които записваме минималния/максималния брой кръгчета, както минимален/максимален диаметър.

Цветове

В променливата cc записваме стойност на 3 цветови канала, които ще използваме по-нататък. Идеята за 3 фиксирани цветови канала е, че според теорията на цветовете, ако два цвята съдържат разменени, но еднакви по стойност интензитети на трите канала (червено, зелено и синьо), то те биха си подхождали. С други думи — #336699 си подхожда с #663399, както и с #996633 и т.н.

В нашия случай в масивя cc въвеждаме три произволни стойности от 0 до 255 (в 16-тична бройна система / HEX това би било от 0 до FF).

Помощната функция getColor() използва новият метод shuffle, който добавихме за масивите. С нея разбъркваме стойностите на каналите. След това ги връщаме като string от числа, разделени със запетая. Този формат бихме могли да използваме в последствие с rgb(r, g, b) цветове в CSS.

На body елементът задаваме фон с преливащи цветове.

Генериране на кръгчета

След това в itemsNum генерираме произволно число между minItems и maxItems.

Създаваме празен jQuery обект, в който в последствие ще добавяме кръгчетата си.

С цикъл добавяме itemsNum кръгчета, за които генерираме произволни белези. Все пак, колкото и да са произволни, ги контролираме в определена степен.

За dimensions задаваме стойност между minDimensions и maxDimensions.

Позициониране и blur-ване на Chrome

За left и top задаваме стойност от 0 до широчината на страницата, като в цялата формула добавяме на два пъти размера на текущия елемент, за да добавим възможност той да започва малко по в ляво или по-горе от началото на екрана (да е частично изрязан).

В circleColor записваме цвят, който ще се използва за няколко белега на кръгчето (затова ни трябва в променлива).

Имайте предвид, че blur за момента работи само на Chrome. Чрез този филтър можем за постигнем ефект на размит фокус. С простичка формула се грижим и елементите, които не са на фокус, да са “по-далече” в пространството. Това става като им задаваме по-малък z-index. Въпреки, че и елементи, които са твърде близо също биха били да не са на фокус. За този ефект аз си имам право на лична интерпретация.

Вкарване на всичко в DOM-а

След като сме създали нов елемент го добавяме в променливата items. След като свършим с цикъла, добавяме елементите от тази променлива към DOM-а на страницата. Правим го накрая, защото по принцип работата с DOM натоварва процесора. По-добре е наведнъж да добавим много елементи, вместо множество пъти по един. Имайте предвид, все пак, че самата функционалност е достатъчно тежка. Така че тази оптимизация в момента е пренебрежимо малка, но е въпрос на добра практика. Затова си направих труда да напиша и две думи по този въпрос.