Как сделать такой переход на другую страницу?

Question

[Lector]

Увидел такой классный эффект, но не на сайте, а на видео презентации, так бы открыл исходники. То есть при нажатии на картинку она как бы увеличивается смещаю другие объекты и сразу становится страницей. Прикрепил gif-ку .В общем толком не знаю как объяснить и даже загуглить не знаю как правильно. Может кто сталкивался? Спасибо!

Comments

[Сергей delphinpro]

Ну например как-то так pallada.portfolio.delphinpro.ru

[kolo2012]

Даже гифки с таким переходом лагают. Крайне не советую делать такое.

[Philipp]

kolo2012: зависит от производительности компьютера. На нормальных компах не лагает.

[kolo2012]

Philipp: у меня топ. комп - лагает

[developer007]

не у всех ведь топ компы. в большинство будет тормозить жестко. так себе понты

[GrimJack]

Philipp: много зависит от рукозадого разработчика

[Philipp]

kolo2012: у меня не топ комп, не лагает. Драйвера на видеокарту ставить не пробовали?

[kolo2012]

Philipp: стоят. Проблема скорее в интернете 10Mb/sec

Answer 1

[igumenov]

Гуглить Morphing modal overlay
https://codyhouse.co/demo/morphing-modal-window/in...

Answer 2

[Александр Решетняк]

barbajs.org/demos.html
git.blivesta.com/animsition
dan-silver.github.io/ElementTransitions
https://tympanus.net/Development/PageTransitions/
https://tympanus.net/Development/CardExpansion/ind...
thednp.github.io/kute.js/index.html

Answer 3

[Максим Тимофеев]

по клику текущая страница заменяется ее скрином (https://habrahabr.ru/post/138331/) с position fixed, под ней грузится новая, когда загрузилась, делаем ее скрин, скрины красиво убираем. Такую анимацию, проще на svg наверное сделать. Остается страница которая нужна.

Answer 4

[Алексей Голягин]

Я так понимаю вам нужна обычная якорная ссылка htmlbook.ru/samhtml/yakorya