Как создать изображение логотипа из сотен маленьких кусочков на веб-странице - PullRequest
Новая
       35

Как создать изображение логотипа из сотен маленьких кусочков на веб-странице

1 голос
/ 13 декабря 2011

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

Я могу нарезать логотип в Photoshop, постепенно удалять фрагменты и сохранять его как серию изображений, которые запускаются как слайд-шоу. Но поскольку я говорю о большом количестве срезов, скажем, около 500, это займет время и может выглядеть не так хорошо, как другие методы.

Есть ли способ, используя, возможно, jQuery, построить изображение из множества маленьких HTML-элементов?

Или, может быть, есть еще лучший способ?

Буду рад любому совету.

Спасибо

Ник

Ответы [ 3 ]

3 голосов
/ 13 декабря 2011

Вот идея, которая, на мой взгляд, будет довольно простой, даже с «простым» JavaScript (но намного проще с jQuery):

  1. Включите полное изображение на страницу в стиле visibility : hiddenвнутри контейнера div такого же размера.
  2. Используйте jQuery, чтобы создать сетку из маленьких непрозрачных div, абсолютно расположенных внутри того же контейнера div, с z-index, который помещает их над изображением, т. е. закрываяобраз.При их создании сохраняйте ссылку на каждый элемент в массиве.
  3. Установите для изображения значение visibility : "visible"
  4. Произвольно отсортируйте вышеупомянутый массив и затем выполните цикл по нему с помощью setTimeout или setIntervalудаляя div на каждой итерации для постепенного раскрытия изображения.

Конечно, преимущество вышеизложенного состоит в том, что он будет работать с любым изображением без необходимости его нарезки, и учитывая, что вы упомянули 500срезами у вас не будет 500 http запросов для загрузки всех фрагментов изображения.Если вы хотите, чтобы каждое отдельное раскрытие фрагмента имело небольшой анимационный эффект, вы можете скрыть его с помощью jQuery .slideUp() или чего-то подобного.

С другой стороны, вам может понравиться, чтобы каждый фрагмент изображения появлялся с разных сторон.направления или что-то.Для этого вы все равно можете создать сетку элементов div, но установите для каждого фон (CSS) своего изображения с соответствующими значениями смещения, чтобы каждый из них составлял отдельный фрагмент «головоломки».

РЕДАКТИРОВАТЬ: Iзабыл упомянуть, что, вероятно, уже есть плагин jQuery (если не множество плагинов), который делает подобные вещи.Я не знаю о конкретном, но вы можете заняться поиском.Вышесказанное - это только первое, что пришло в голову как способ его кодирования с нуля ...

РЕДАКТИРОВАТЬ 2: Рабочая (вроде) демонстрационная версия: http://jsfiddle.net/sEE8R/1/(Это просто какой-то хитрый код, который я безболезненно сложил, основываясь на алгоритме выше. Вместо изображения я использовал красный div, который покрывается зелеными div, которые удаляются случайным образом.)

1 голос
/ 13 декабря 2011

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

В качестве альтернативы, загрузите ваше изображение, несколько раз используйте drawImage(), чтобы нарисовать его части на холсте HTML5, используйте toDataURL(), чтобы получить строку, и создайте new Image в JS с этим URL-адресом данных.

0 голосов
/ 28 июня 2013

Возможно, вы захотите проверить:

http://slicephotoshop.com

, чтобы легко «нарезать» ваш логотип, если ваш логотип сделан из слоев.

...