CSS Efeito css de chuva de imagem

[brunovianarenega]

Alguém manja como é feito esse tipo de efeito do site: www.weebly.com.br

 

 

[DiF]

@brunovianarenega Olá.

 

Basicamente é um efeito simples de parallax.   Se você entrar no site, e inspecionar o elemento, vai notar que essa imagem é uma junção de 4 imagens onde tem o fundo com efeito em blur, outra imagem contendo alguns quadrados, outra contendo mais uns quadrados e outra também.  Dessa forma, é possível fazer o efeito de parallax.

 

Se ver no código css deles, vai notar que existe uma classe onde tem um efeito de transição 

com essa regra:

.home-apps__item {
    transition: .75s cubic-bezier(0.19, 1, 0.22, 1) 0.3s,1s cubic-bezier(0.19, 1, 0.22, 1);
   
}

 

e efeito de transformação com essa regra:

element.style {
    transform: translateX(0px) translateY(-0.172174vh) translateZ(0px) rotate(0deg);
}

 

Além disso, usaram o atributo z-index nas quatro imagens, para empilhar elas uma em cima da outra na seguinte ordem:

Bottom(a que tem os quadrados em blur), mid, top, feature(a imagem que fica por cima de todas).

 

Boa sorte.