Как сделать маску из массива дивов над изображением?

Question

[smartkrio]

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

Через некоторое время нашел решение сам: jsfiddle.net/Ld9jy/44 , кому не трудно дайте комментарии по коду.

Comments

[Юрий Лобанов]

Красиво получилось!

Answer 1

[Кирилл Арутюнов]

Как вариант: 1 большой див с фоновым изображением, а поверх absolute дивы.
А вообще, можно поискать что-нибудь аналогичное в направлении metro style - у них же как раз квадратики.

Comments

[smartkrio]

еще как бы волнует нагрузка на клиент, может вообще нужна иная реализация

Answer 2

[Сергей Протько]

ну тут либо canvas либо дивы. Если у вас на странице много таких вот картинок и как следствие очень много дивов (больше пары сотен), то стоит задуматься о том что бы сделать этот эффект по другому, через canvas или что-то в этом духе. Но перед этим стоит убедиться в необходимости оного потыкав на каком девайсе.

Для схемы с дивами смену прозрачности делать через css transition + css animation. Эффект рандомности можно реализовать через псевдоселектор nth-of-type, просто нужно формулу выборки элементов составить поинтереснее...

Answer 3

[Юрий Лобанов]

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

Comments

[smartkrio]

есть картинка 27 на 20 фоток, над ней нужно сделать сетку из дивов 27*20 и проявлять случайно по 1 диву пока все не откроются

[Кирилл Арутюнов]

@smartkrio может какие-то jQuery-плагины для мозаики стоит посмотреть? Ну или что-то аналогичное.