Создание эффекта мозаики / мозаичного изображения с помощью jquery

Question

Есть ли способ создать эффект , показанный здесь на msi.com основное изображение? Хотя сделано во флэш-памяти, я бы предпочел сделать это с помощью jquery. Я также пробовал использовать «генераторы мозаики», но не смог точно воспроизвести эффект, но использование генератора с js также было бы приемлемо.

[править] Я не упомянул, меня интересует только эмуляция мозаичного эффекта эффекта, а не анимация. Мне бы хотелось, чтобы большое изображение (например, 400 на 300 пикселей) было разделено пробелами (или настраиваемыми цветами границ) на 9 блоков или плиток одинакового размера.

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

Закругленные углы не важны или не нужны. [/ Править]

Answer 1

Было бы довольно интересно сделать это с помощью jquery. У вас будет таблица изображений, каждое из которых содержит событие при наведении курсора, которое включает анимацию при включении и выключении. Логика не слишком сложна; заставить изображения и анимацию выглядеть красиво было бы немного сложнее, но это не невозможно отменить. Это зависит от того, насколько близко вы хотите воспроизвести эффект. : D

редактировать: вы просто хотите мозаику изображений? Вы можете просто использовать таблицу, чтобы расположить все изображения, и использовать JS для событий. Что еще вы хотите или нуждаетесь в JS? : D

Answer 2

Вот идея. Загрузите большое изображение в DIV. Определитесь с размером ваших окон и создайте PNG с прозрачностью там, где вы хотите, чтобы окна были. (Непрозрачный на границах с толщиной, чтобы контролировать, насколько широко вы хотите пробелы.) Чтобы создать эффект, используйте три слоя. Изображение в нижнем слое (которое вы можете заменить при необходимости). Средний и верхний слои будут повторяться вдоль осей x и y и контролироваться индивидуально с помощью jQuery. Средний слой будет иметь PNG с прозрачностью, а сверху - только сплошной цвет (соответствующий фону вашей страницы, чтобы «казаться» невидимым?). Чтобы создать любые «симпатичные» эффекты, вы можете настроить непрозрачность или анимировать верхний слой отдельных блоков, чтобы показать / скрыть изображение на нижнем слое, которое будет видно через прозрачную область среднего слоя в PNG.

Надеюсь, мое объяснение было ясным. С помощью некоторого умного кодирования его можно упаковать и использовать повторно в любом месте.