Самое сложное здесь то, что внутри круга отображается уже другая страничка - урла меняется.
Но переход на другую страницу - такой вариант вообще не подходит, потому что внутри круга отображается уже другая страница. Поэтому придумал просто менять урлу вручную через js, а страницу открывать анимацией. Вопрос, как лучше организовать структуру и как реализовать такую вещь через css3 либо может js, или это должен быть svg. Любые идеи будут очень полезны
4 слоя уже загружены в виде "слоёного пирога".
передний - сетка из прямоугольных DIV
задние - черно-белые (фильтр CSS3 с эффектом) SVG clipping-круги, как бы описывающие эти прямоугольники
В момент выбора (клика):
1. фильтр снимается с выбранной подложки
2. z-позиция меняется, чтобы круг было видно
3. SVG clipping mask изменяется (анимируется) через JS, создавая эффект расходящегося круга.
1. Если вы обратите внимание, то другая страница начинает отрисовываться уже после того, как круг завершил анимацию (так что тут всего лишь картинка в круге, а не новая страница). Меню у них одинаковое, лежит слоем выше всего.
2. Далее можно взять что-то вроде: https://css-tricks.com/clipping-masking-css/ и сделать простую аницацию увеличения круга.
3. Вот и весь секрет, имхо.
Простой
