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 натоварва процесора. По-добре е наведнъж да добавим много елементи, вместо множество пъти по един. Имайте предвид, все пак, че самата функционалност е достатъчно тежка. Така че тази оптимизация в момента е пренебрежимо малка, но е въпрос на добра практика. Затова си направих труда да напиша и две думи по този въпрос.

2 Отговори на “Partition – произход и подобрения”

  1. Здравей, това е интересен пост и затова реших да направя няколко теста и да споделя впечатленията си:
    Chrome 27 – works as intended (almost), оказва се че по-голямата част от кръговете получават цвят много близък до фона, на който се рисуват. Примерно при градиент от ляво на дясно зелене към червено, в ляво рисува повече зелени, а вдясно – червено. Като го комбинираш с факта че имаме blur или невидими граници, то тези обекти се сливат с фона и общият им брой намалява.
    Firefox 19 – резултат наподобяващ този от Chrome
    IE9 – градиента на фона никакъв го няма ( черен фон ), но затова пък имаме много по-добро разпределение на произволността на цветовете на обектите ( от 4те теста, най-приятният според мен резултат, все пак луд на шарено се радва )
    IE10 Mobile – тук фоновият градиент е наличен, но на 720р екрана (първите 3 теста са на 1080р) обектите изчертани са „леко претрупани“, както и част от тях са квадрати или кръгове в цветни квадрати…
    Това беше субективното мнение на програмист през нощта… Добра работа иначе за написването на урока. Поздрави

  2. Да – определено липсва compatibility за всички браузъри, но ако изключим blur филтъра (наличен само под Chrome) всичко останало работи правилно на последните версии на major браузъритъ: Firefox, Safari, Opera, IE (10 desktop).

    При IE9 единственият проблем е, че background linear-gradient изисква „-ms-“ префикс (трябва да правя проверка за user agent и версия на браузъра, за да го добавя, а ме мързи).

    За IE10 mobile – по обясненията разбирам, че box-shadow-а не върви съвсем правилно при наличен border-radius. На IE10 Metro не съм тествал дали е пак така, защото иска IE да ми е default browser-а, а не ми се разбутват настройки в момента.

    За останалото – който има мерак може лесно да промени бройката на елементите, както и да си hard-code-не трите цветови канала. След това малко refresh-ове и все ще си хареса нещо :).

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.