Как сделать подобную сетку?

Question

[Григорий Каляшов]

Подскажите, как сделать вот такую сетку - www.thibaud.be/#

Answer 1

[Kir]

Много квадратных div-ов с inline-block
Ширину и высоту рассчитываем исходя из $(windows).height() / .width()
По ховеру опасити вложенного в див блока растянутого внутри него. Анимация через transition

Comments

[Григорий Каляшов]

@angry_bender а как можно рассчитать необходимое количество div-ов? И можно ли как-то избежать их большого количества?

[Kir]

@kalyashov
// div_width вами заданная ширина одного блока
var count = $(windows).width()/div_width;
// count - число нецелое. приведем его к целому:
count = round(count);
// однако теперь все блоки не влезут целиком, откорректируем размер блока:
div_width = $(windows).width()/count

Примерно как то так.

Можно вообще без дивов - сделать все на canvas.

[Григорий Каляшов]

@angry_bender да, в принципе идея понятна, попробую, спасибо!

Answer 2

[weebr]

Сайт на флеше сделан.

Comments

[Григорий Каляшов]

@lebedevp да, это я понял. Меня интересует именно реализация подобной сетки, технологии не особо важны.

[weebr]

Тогда посмотрите pixelslave.com

Answer 3

[hjk]

Такую сетку можно быстро сварганить, пользуясь возможностями flexbox → тут хорошо написано