O site DayTrip usa um efeito elegante no cabeçalho da página que distorce a imagem de fundo com uma textura granulada animada. O efeito é sutil, mas cria uma vibração retro e empoeirada.
O efeito é muito sutil. Você pode ver a diferença onde o efeito está em vigor à direita e desativado à esquerda:
Podemos criar o mesmo efeito rústico com uma única imagem e um pouco de CSS.
Etapa 1: Configurando as coisas
Primeiro, vamos configurar o cabeçalho da nossa página. Vamos usar um padrão comum em que uma imagem de fundo ocupa todo o espaço.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Aqui está um exemplo para nos ajudar a começar:
Veja a Pen RpLKdx de Geoff Graham (@geoffgraham) em CodePen.
Etapa 2: Seleção de uma textura
Em seguida, precisamos de uma imagem com uma textura granulada. Você pode criar isso sozinho. O Subtle Patterns também tem várias opções interessantes, incluindo esta que usaremos em nossa demonstração. Observe que a imagem não precisa ser grande. Algo na vizinhança da 400pxpraça resolverá o problema.
A ideia é sobrepor a textura granulada no topo do .page-header. Podemos usar o :afterpseudo-elemento ativado, .page-headerportanto, não há necessidade de criar outro elemento.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( /* content is required when using :after */ content: ""; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Observe que colocamos um heighte widthno pseudo-elemento, bem como um tope, de leftmodo que ele realmente exceda o limite do cabeçalho da página e esteja centralizado nele. Queremos fazer isso para que a camada de textura granulada tenha espaço para se mover sem expor a camada de cabeçalho da página abaixo. Isso significa que as camadas são organizadas mais assim:
Agora temos um belo cabeçalho de página grande com uma imagem granulada no topo:
Veja a caneta evGvKg de Geoff Graham (@geoffgraham) no CodePen.
Etapa 3: Animando a camada granulada
A última coisa que precisamos fazer é animar a camada granulada. Este é o efeito que buscamos e dá ao cabeçalho da página aquele apelo retro e analógico.
O site DayTrip usa o seguinte para definir os quadros-chave de animação:
@keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )É meio difícil visualizar o que esse código significa, mas basicamente move a camada granulada superior em um padrão de zigue-zague. Aqui está uma ilustração de como isso parece em uma escala menor:
Agora, tudo o que precisamos fazer é aplicar os quadros-chave .page-header:afterpara ver o efeito. Vamos definir a animação para reproduzir por 8 segundos e fazer um loop infinito:
.page-header:after ( /* content is required when using :after */ content: ""; /* The animation */ animation: grain 8s steps(10) infinite; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Juntando tudo
Aqui está o trecho completo com todas as peças no lugar. Observe que estamos assumindo o uso de Autoprefixer para todos os prefixos de fornecedores.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( animation: grain 8s steps(10) infinite; background-image: url("/path/to/grainy/image.jpg.webp"); content: ""; height: 300%; left: -50%; opacity: 0.3; position: fixed; top: -100%; width: 300%; ) @keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Veja o Pen Animated Granulado Effect de Geoff Graham (@geoffgraham) no CodePen.