Qual efeito é esse? Alguém sabe como fazer?

[marcusvcribeiro]

Estava olhando o site da apple e me deparado com esse tipo de efeito.

https://www.apple.com/macos/catalina/

Tem alguns outros tambem, bem diferentes que achei do caralho.
Alguem tem alguma ideia de como fazer isso?

[felipefialho]

Não analisei o código, o texto abaixo é só um exercício imaginativo, hehe.

Provavelmente fixaram o conteúdo superior durante o scroll, fazendo com que a apenas a imagem reduza, imagino eu... usando scale().

Quando o a imagem alcança o tamanho desejado (por conta da posição do scroll), o resto do conteúdo é "liberado" seguindo o fluxo normal da página.

[marcusvcribeiro]

Eu pensei em algo usando scale também, porem fui dar uma inspecionada no código, muita coisa usando matrix.
Vou tentar esse final de semana reproduzir isso.
Porem achei foda.

[ghost]

Achei semelhante ao fadeInUp do animate.css
https://daneden.github.io/animate.css/

[ninetails]

Tem alguns exemplos aqui tb: https://www.awwwards.com/websites/scrolling/

Tem uma especificação rolando (não sabia que existia, precisa ativar flag no Chrome naughtly)

e esse cara

mas tb n sei o nome formal desse efeito.

[iaurg]

Provável que seja css matrix transform como você comentou

Aqui um site usando o mesmo estilo, porém nele todo: https://renderboxes.com/

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
https://tympanus.net/codrops/css_reference/matrix/

[eliseumds]

Eu não sei a opinião de vcs, mas acho essas animações do site da Apple exageradas demais. Eu uso um MBP 15" top de linha de 2016 e o site é lagado no último Safari, Chrome e Firefox.