Перегородка происхождение и улучшения

Перегородка - происхождение и улучшения

3 недели назад я написал сообщение в блоге, в котором показываю демонстрацию эффекта разделения. В последнее время это было довольно популярно.

С тех пор я встретил его еще в 2-х местах, что подтверждает преобладание эффекта..

Сегодня я наконец-то даже нашел, откуда это. Я вспомнил, как впервые увидел его там. Эффект начинается с обложки по умолчанию в профиле Google+ (https://www.google.com/search?q=google%2B+default+cover+photohl=ensafe=offsource=lnmstbm=ischsa=Xei=6-NEUdehKIantAab44DQbivedU0Ao = 1304bih = 707).

На https://magadanski.com/demo/partition/ вы можете увидеть демонстрацию эффекта. Я только что загрузил обновленную версию. Если вы видели это раньше — возможно, вам будет интересно взглянуть на него по-новому. Помните, что при обновлении создается новое представление.

Сам JavaScript, который я написал, содержит интересные особенности. Поэтому я решил написать короткое объяснение, чтобы сопровождать его..

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

Пояснительные примечания

Комментарии ниже относятся к файлу func.js.

перемешать ()

Вы увидите Array.prototype …. Array — это имя класса для массивов в JavaScript. Используя прототип, мы можем редактировать методы этого класса. В нашем случае мы добавляем метод перемешивания, который по умолчанию отсутствует в JavaScript. Добавив метод с использованием прототипа, он будет действителен для любого экземпляра объекта в этом классе. Таким образом, мы сможем вызвать перемешивание для каждого массива в нашем коде.

Читать также:  Шоу прокрутки (часть 2 JavaScript)

Контролируемые случайные значения

Остальная часть нашего кода выполняется на готовой DOM.

В общем, код полагается на случайные значения, но мы по-прежнему применяем некоторый контроль, ограничивая их в определенных пределах..

Мы используем несколько переменных конфигурации (minItems, maxItems, minDimensions, maxDimensions), в которых мы записываем минимальное / максимальное количество кругов, а также минимальный / максимальный диаметр..

Цвета

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

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

Читать также:  Секундомер JavaScript Часть 1

Утилита getColor () использует новый метод перемешивания, который мы добавили для массивов. С его помощью мы смешиваем значения каналов. Затем мы возвращаем их в виде строки чисел, разделенных запятыми. Мы могли бы использовать этот формат позже с цветами rgb (r, g, b) в CSS..

На элементе body устанавливаем фон с градиентными цветами..

Создавать круги

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

Создаем пустой объект jQuery, в который позже добавим наши круги.

С помощью цикла добавляем itemsNum круги, для которых генерируем случайные шрамы. Однако какими бы случайными они ни были, мы в некоторой степени их контролируем..

Для размеров мы устанавливаем значение между minDimensions и maxDimensions..

Позиционирование и размытие Chrome

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

В circleColor мы пишем цвет, который будет использоваться для нескольких отметок на круге (так что он нам нужен в переменной).

Читать также:  Шоу прокрутки (Часть 1 HTML + CSS)

Обратите внимание, что в настоящее время размытие работает только в Chrome. С помощью этого фильтра мы можем добиться эффекта размытого фокуса. С помощью простой формулы мы убеждаемся, что элементы, которые не в фокусе, находятся «дальше» в пространстве. Это делается путем установки им меньшего z-индекса. Хотя слишком близкие элементы тоже будут не в фокусе. Для этого я имею право на личную интерпретацию.

Поместите все в DOM

Создав новый элемент, мы добавляем его к переменным items. Закончив цикл, мы добавляем элементы этой переменной в DOM страницы. Делаем это в конце, потому что в принципе работа с DOM нагружает процессор. Лучше добавлять сразу несколько элементов, а не несколько раз по одному. Однако имейте в виду, что сама по себе функциональность достаточно тяжелая. Таким образом, эта оптимизация в настоящее время незначительна, но это вопрос хорошей практики. Так что я потрудился написать два слова на эту тему.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?