Making Of “ В Pieces”: Проектирование Интерактивная выставка с CSS клип Пути

Веб-интерактивные опыт широко используется в современной эпохи для целого ряда причин, в первую очередь для рекламы премиум-класса высокой улице продуктов и услуг.После обнаружения малоизвестный clip-path собственностью CSS, я приступил к пятимесячного интерактивной производства путешествие самостоятельно с разной целью: повысить осведомленность о борьбе 30 аналогично малоизвестных исчезающих видов .

Эта статья исследует вдохновение для проекта и аспектам, как различные части были построены, и я буду погружаться в том, как вы можете использовать эту сильно недооцененный линию CSS для ваших собственных проектов .

In Pieces – 30 Species, 30 Pieces — In Pieces: 30 видов, 30 штук .

В Pieces __12 | | 1__11 является интерактивная выставка 30 самых разных, но, к сожалению, находящихся под угрозой исчезновения видов в мире.Опыт информационной напоминание о красоте, мы находимся в опасности потерять каждый день, но это также витрина эволюционного различия, потому что многие из видов эволюционировали таким образом, что делает их генетически особенное.Люди говорят рассказы и борьбу этих уникальных форм жизни, а также предлагается погрузиться в числовых данных, скачать обои и даже получить плакат, представляющий всю коллекцию — все полностью просматривать на мобильных устройствах .

Вдохновение: HTML Клип контуры и Animation

In Pieces началось как экспериментирования и мастерить в коде, не грандиозный план для интерактивный кусок, чтобы помочь сохранению, романтичная, как звучит это понятие.Я помню, как читал о polygon имущества CSS ‘clip-path в середине 2014 года и обучения ее удивительный потенциал.Через несколько месяцев прошло, и я был удивлен, чтобы не видеть это используется гораздо в Интернете, вероятно, затмила внимания к SVG, WebGL холст и.Я чувствовал, что clip-path дало возможность погрузиться во что-то нетронутой и исследовать то, что может быть сделано из нее.В то же время, создавая проект в чистом CSS чувствовал (а это ни парадоксально) передовые .

Если вы не знакомы с CSS ‘clip-path или его возможности полигон, Дирк Шульце имеет большой tutorial ².В качестве одного примера, превращая регулярное div в треугольник можно с фрагментом кода:

.polygon-div {
  -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}

Polygon output based on code above — Выход Полигон основан на коде выше .

Самое первое, что я хотел, чтобы увидеть, был ли в polygon собственность может иметь разговор с CSS переходов икак плавно их первое свидание пойдет.Я был счастлив видеть, что два были естественным объединением, особенно, когда кривая ослабления брошен, чтобы добавить текучесть:

.polygon-div {
  -webkit-clip-path: polygon(9.38% 59.35%, 13.4% 58.95%, 9.28% 61.08%);
  transition: .18s cubic-bezier(.7,.3,0,1);
    &:hover {
    -webkit-clip-path: polygon(20% 59.35%, 30% 58.95%, 40% 61.08%);
  }
}

Концепция и искусства Direction

Early sketches and brainstorming — Ранние эскизы и мозговой штурм .

При этом установлено, что я хотел, чтобы придумать способ, что бы сделать полигон эстетическое дело и стать своего рода визуальным сравнением — полигон животных казалось естественным визуальные области, чтобы исследовать.Во-первых, я хочу получить одну вещь прямо: Многоугольные виды не новая вещь в плане направления искусства.Сотни проектов используется полигоны для формирования животных, и они легко доступным для поиска на веб-сайтах, таких как Behance ( поиск “Полигон животных« ³).Этот момент очень важно, когда я говорю о “идеи”. Я видел некоторые действительно хорошие комментарии по проекту, а некоторые содержали ссылки на “оригами” или “многоугольник стиле”, но они промахиваются немного, чтоИдея не визуальный стиль, а о формировании вида через “кусков” и аналогии, что их существование находится “в части”, и, таким образом, они сами все “в куски.” Без этого аспекта, проект простостановится визуальная периферия .

Я думаю, что есть что-то очень романтично и интересно в увязке кусок новой технологии непосредственно с идеей и в проектировании и разработке его таким образом, что крючки в и работает непосредственно вокруг этой идеи.Это действительно попадает в основе того, что In Pieces о .

Другие идеи быстро пришли после этого начального эксперимента, таких как открытие, что одно животное потребует около 30 штук, которые привели к решению создать 30 видов, и идея использовать многоугольные формы для создания визуализации данных видов »численноеистории и другие статистические данные.Давайте углубимся в некоторых конкретных частей и посмотреть, как они были достигнуты, и как вы можете использовать их для собственных интерактивных проектов .

Создание полигона Animals

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

Illustration

Возможно, простейший аспект проекта было то, как оригинальные иллюстрации были обработаны в Adobe Illustrator.Это было трудной задачей, чтобы создать все 30, но это было также наиболее простой частьюПроект, главным ограничением является количество полигонов.Второй рисунок показывает актив, который был произведен на этапе розыска .

Vectors of scimitar oryx in selected state — Векторы Scimitar Oryx в выбранном состоянии .

Transparent PNG image example – used to trace over in-browser — Прозрачный PNG изображений примером — используется для трассировки на в-browser

Here's an image of the Golden Poison Frog in Illustrator outlines mode so that I make the illustration process look cooler and more intelligent than it was. But do note the deliberate overlaps — Вот образ Золотой яд лягушки в режиме очертания Иллюстратора, что делает процесс иллюстрации выглядят холоднее и более взвешенной, чем это было.Но обратите внимание, сделать преднамеренные дублирования .

Tracing

Затем я использовал эти иллюстрации как плоских PNG-в браузере, чтобы проследить за — но с 30 иллюстрациями, чтобы скопировать к коду, я отчаянно нуждался в путь, чтобы ускорить процесс, который состоял в основном из размещения 30 полигонов по умолчаниюпозиции и затем по отдельности каждую точку перемещения, чтобы соответствовать PNG внизу.Некоторые интернет-ресурсы, такие как CSS завод Generator ⁴ и __25 Беннетт Фили в | Clippy ⁵, доступны для нас, чтобы наметить clip-path точек, но янужно что-то гораздо более — так, я создал его в виде функции JavaScript:

$('body').on('click', function (e){
  var mouseX = e.pageX;
  var mouseY = e.pageY;

  var shapesoffsetX = $('.polygon-wrap').offset().left;
  var shapesoffsetY = $('.polygon-wrap').offset().top;

  var polygonswidth=$('.polygon-wrap').width();
  var polygonsheight=$('.polygon-wrap').height();

  var shapesmouseX = mouseX - shapesoffsetX;
  var shapesmouseY = mouseY - shapesoffsetY;

  var mousepercentX = shapesmouseX / polygonswidth;
  var mousepercentY = shapesmouseY / polygonsheight;

  var finalmouseX = (mousepercentX) * 100 ;
  var finalmouseY = (mousepercentY) * 100 ;
  var normalisedX = parseFloat(finalmouseX).toFixed(3);
  var normalisedY = parseFloat(finalmouseY).toFixed(3);

  nodecount = nodecount+1;

  if (nodecount < 3) {
    nodescss = nodescss + normalisedX + '% ' + normalisedY + '% ,';
  } else  
  if (nodecount == 3) {
    nodescss = nodescss + normalisedX + '% ' + normalisedY + '% );';
    alert(nodescss);
    nodescss = '-webkit-clip-path: polygon( ';
    nodecount = 0;
  }   
});

Эта функция JavaScript является обстреляли мыши на body.Вы можете запустить запрос конкретного переменной переключателя, как я сделал, так что стреляет только тогда, когда вы отслеживания полигонов.Вот краткий обзор того, что дивы и переменные ссылок:

mouseX и mouseYЭто поднимает положение мыши в точку щелчком .
shapesoffsetЭто расстояние делений от левой верхней части окна браузера .
shapesmouseX и shapesmouseYЭто находит, где мышь в контексте polygon-wrap .
mousepercentX 34 ~ и |Это вычисляет процентное значение позиции мыши в контексте polygon-wrap .
finalmouse 37 ~ и |Эти значения оказываются эти проценты в десятичных используемых значений CSS .
nodecountЭто сколько раз пользователь нажал на экране, от 0 до 3, перед циклом на 0. Поскольку куски треугольники, три точкинеобходимы для каждого .

Итак, что здесь происходит?По существу, эта функция позволяет нажать три раза по сравнению с плоской PNG найти процентных участки в контексте DIV вы заговоре.Как вы выберите, переменная строка последовательно составил до третьего щелчка выводит полную линию CSS внутри боевой готовности, готовые быть скопированы и вставлены .

Alert presents a copy-and-pasteable line upon tracing 3 points, ready to place into CSS — Предупреждение представляет копирования и pasteable линию на трассировку три очка, готов быть помещены в CSS .

Далее Processing

Если у вас есть код копируется, это легко вставить, но я также необходимо убедиться, что соответствующий осколок был быть цветным, а я сделал это.Копирование любой цвет из Adobe Illustrator, а затем вставить в Sublime казалось слишком длинный процесс, и есть приложение для этого.Я не могу рекомендовать Sip __14 | | 7__13 __17 ^| 6 достаточно, потому что это непосредственно копирует цвет вы выбрали в буфер обмена, готовый быть выведены с кодом:

Sip, a handy app which allows global color picking — Sip ⁷ ⁶ является удобное приложение, которое позволяет глобального цвет сбор .

&:nth-child(4) {
  .shard {
    -webkit-clip-path: polygon(23.45% 56.143%, 34.66% 57.3%, 22.45% 71.714%);
    background-color: #D7C5A4;
    }
  }

Мне удалось вывести код для всех 30 штук каждого животного, по одному, используя этот процесс трассировки.Но есть еще над чем работать — один из самых больших проблем в оказании этот стиль является сглаживание между двумя формами.Если вам подходит двух векторов совершенно рядом друг с другом, вы получите очень слабый, но заметный линию, проходящую через, так же, как вы делаете в Illustrator.Так, мне нужно очень незначительно перекрывают каждый вектор с помощью инспектора и, таким образом, требуется способ определить, какие полигоны были нарушителями.Это где других великих преимуществ CSS полигонов приходит в: Они автоматически маскировать фоновые изображения в форме.Итак, я создал повторять фоновые изображения всех 30 номеров для отслеживания полигонов, которые:

Repeating number images masked within polygons to indicate which shard to alter — Повторяя количество изображений в масках в полигонов указать, какие осколок изменить .

Для меня, полигон клип пути обеспечения что-то особенноес помощью маскировки, как это.Я использовал его, чтобы решить проблему (и позже использовать его для эффекта крови на “разбить”), но в конечном счете я думаю, что очень творческие вещи можно сделать с эффектом.Один удивительный потенциал заключается в том, что при перемещении многоугольника, изображения не следует полигон — Вы изменяя маску.Если смешать отличную производительность, что только один полигон уже при переходе с фоновым изображением, который может двигаться одновременно, то я думаю, что-то действительно здорово лежит за пределами.Может быть, это будет стебель для нового персонального проекта.Другая вещь, чтобы иметь в виду, что вы можете замаскировать элементы, а не только изображения.На самом деле, несколько абзацев вниз я иду в немного подробно на “мерцающий” эффект от вида, который делает именно это .

Я не мог найти способ лично, но я готов держать пари, с более копать вы также найдете способ сделать полигоны визуально “очертания” (как лягушки изображение несколько пунктов выше).Опять же, это может привести к переохлаждения научной взглядом.Это инструмент, с таким большим потенциалом, и я рад видеть новые вещи, сделанные с ним .

Как Виды Change

не

В шт сильно опирается на добавление, удаление и изменение имен классов и видов самих не отличаются.Изменение имени класса на одном одинокого родителя дел до соответствующих видов позволяет соответствующих изменений CSS к элементам внутри него.Виды хранятся в массиве, например, так:

var animalList = ['crow', 'vaquita', 'tamarin', 'frog', 'owl', 'turtle', 'oryx', 'iguana', 'seahorse', 'armadillo', 'sloth', 'kakapo', 'echidna', 'penguin', 'damselfly', 'bear', 'parrotfish', 'camel', 'butterfly', 'ostrich', 'panda', 'tapir', 'sifaka', 'lynx', 'rhino', 'peccary', 'okapi', 'loris', 'hirola', 'drill' ];

В любое время новый вид называется в игру, будь то следующий, предыдущий или один выбирается напрямую, я могу определить, что текущий статус вида с помощью этого кода:

prevAnimal = (animalList.indexOf($('#animalchanger').attr('class')));

Для справки, #animalchanger это родитель DIV, который управляет видов, который установлен в строковой переменной из массива animalList.Эта линия определяет индекс (т.е. целое число) для имени текущего вида в массиве.Это используется для создания переменной newAnimal | __18 имя нового вида, в зависимости от кнопки пользователь нажал.В качестве примера, кнопка “Следующая видов” будет так:

newAnimal = prevAnimal + 1;

Конечно, целый ряд других вещей происходит одновременно с этим, но с индексом нового животного установлено, это то толкнул в классе DIV в:

$('#animalchanger').attr('class',animalList[newAnimal]);

Polygon переходов и SASS для Loops

Теперь вы знаете, как полигоны создаются и изменение полигонов видов »обрабатывается с помощью изменения класса в родительском дел.Теперь, чтобы копаться в позабавимся, анимации!Как уже упоминалось, все основано на CSS, а движение не отличается;Широкий выбор настроек базы переходного периода используются для адаптации движение к соответствующему действий происходит.Прежде чем мы начнем с CSS, я должен отметить, что в последнем примере кодирования, другое дело, рассчитывается: Направление пользователь собирается в (слева направо или справа налево) .

if (prevAnimal > newAnimal) {
  $('.wrap').addClass('right-to-left');
  $('.wrap.left-to-right').removeClass('left-to-right');
} else {
  $('.wrap').addClass('left-to-right');
  $('.wrap.right-to-left').removeClass('right-to-left');
}

Это присвоение “направлением”класс ведет к видам, протекающих в направлении, которое вы просматриваете и делается с помощью двух SASS for петли, в зависимости от того, какие два класса в игре .

$fluidpolygons: .7,.3,0,1;

.left-to-right {
  @for $i from 1 through 30 {

    $s: ($i*0.04+0.3s);
    $t: ($i*0.02s+0.2s);
    $ct: ($i*0.02s);

    :nth-child(#{$i}) {
      transition: 
        -webkit-clip-path $s $t cubic-bezier($fluidpolygons), 
        background-color $s $ct;
    }
  }
}

.right-to-left  {
  @for $i from 1 through 30 {

    $s: ((31-$i)*0.04+0.3s);
    $t: ((31-$i)*0.025s+0.2s);
    $ct: ((31-$i)*0.02s);

    :nth-child(#{$i}) {
      transition: 
        -webkit-clip-path $s $t cubic-bezier($fluidpolygons), 
        background-color $s $ct;
    }
  }
}

Как вы можете видеть, есть разнообразие скоростей и задержек для различных свойств.Сасс “for петля используется для изменения как продолжительность перехода и задержки перехода, в зависимости от которых индекс многоугольника.Например, в движении слева-направо, 10 многоугольник будет переход с длительностью 0,7 секунды и задержкой 0,4 секунд.Обратное направление определяется путем изменения порядка — вычитания индекс многоугольника с 31 вместо .

Виды Animation

Вопреки впечатлению некоторых, виды не перемещаются с CSS анимации.Поэтому я травить от CSS анимации, что я не люблю видно “вырезать”, если анимация мешала полпути.Вместо этого, я скорректированы два класса, которые петлю через два государства: первичной и вторичной движения .

function animalStates(e) {
  setInterval(function(){
    e.removeClass('state-four');
    setTimeout(function(){
      e.addClass('state-two');
    }, 1000);
    setTimeout(function(){
      e.removeClass('state-two');
      e.addClass('state-three');
    }, 2000);
    setTimeout(function(){
    e.removeClass('state-three');
    e.addClass('state-four');
    }, 3000);
  },4000);
}

function animalStatesSecondLevel(e) {
  setInterval(function(){
    setTimeout(function(){
      e.addClass('two-state-two');
    }, 1000);
    setTimeout(function(){
      e.removeClass('two-state-two');
    }, 1100);
    setTimeout(function(){
      e.addClass('two-state-two');
    }, 1400);
    setTimeout(function(){
      e.removeClass('two-state-two');
    }, 1500);
  },3000);
}

Существует новый CSS для каждого государства, и полигоны просто переместить на новое место, изменение цвета или иным образом изменять в качестве замещающего.Важно отметить, что, как только “анимация” фазовых ударов (после видов з� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 02.06.2015 by coding.smashingmagazine.com