CSS Blend Mode Change

o que torna este efeito de fundo tão fixe é que o elemento fixo no topo parece mudar de cor à medida que o utilizador se desloca. O uso de CSSmix-blend-mode propriedade permite a mudança de tom, que depende do conteúdo do fundo.

animação rolante

reminiscente de jogos de vídeo do passado, esta técnica apresenta duas imagens distintas-cada uma rolando na direção oposta. É feito com a ajuda de CSS transform e alguns JS.

fundos inclinados

fundos inclinados são uma das tendências mais quentes no design web. É um efeito que foi incrivelmente fácil de implementar no design de impressão e uma dor a fazer na web – até agora. Esta solução pura HTML / CSS faz com que seja canja.

imagens em movimento

usando um bit bastante simples de CSS, este fundo permite uma transição suave entre várias imagens. Ele faz com que um slider muito mais leve do que o JavaScript tradicional.

gradiente animado

Se não for feito com cuidado, um fundo animado pode distrair de qualquer conteúdo sentado em cima dele. Este exemplo de gradiente animado é bom porque é um efeito mais sutil. Usando JavaScript, você pode definir cores gradientes para corresponder à sua paleta.

borrão no pergaminho

esta técnica pode ser bastante útil para momentos em que você realmente quer que os visitantes se concentrem na imagem de fundo (como o cabeçalho de um artigo de notícias) e, em seguida, permitir a leitura fácil do texto por cima. A little bit of jQuery changes thebackground-size property upon scroll to create the effect.

Fade-in Hero Image with Overlay

Existem algumas coisas acontecendo com este exemplo. Primeiro, uma imagem de herói de largura completa tem uma sobreposição de cores adicionada no topo para criar uma tonalidade diferente. Em seguida, uma animação de desvanecimento é implementada para introduzir a imagem de uma forma visualmente suave. Por último, um efeito de rolagem em estilo paralaxe é adicionado à mistura. O resultado é um olhar muito moderno que usa relativamente pouco código (e nenhum JS).

Zoom de fundo e Pan

Aqui está um efeito que estamos vendo bastante ultimamente. À medida que o utilizador passa por cima de um painel, a imagem de fundo amplia e amplia, juntamente com quaisquer movimentos do cursor. É uma maneira fácil de adicionar alguma interatividade e manter o interesse do Usuário.

revelar ao passar

este exemplo mostra um ecrã dividido onde o fundo é revelado com base na posição do rato do utilizador. Ótimo para comparações, como “antes” e “depois” shots.

mudança de cor no pergaminho

às vezes esquecemos o quão poderoso o uso de cores sólidas simples pode ser. Aqui, vemos o impacto que ele pode fazer como as cores de fundo mudam com base na posição do pergaminho. Esta solução leve pode ser visualmente tão eficaz quanto imagens pesadas.

fundos na vanguarda

fundos não são mais apenas um meio de enquadrar o conteúdo-eles agora são muitas vezes parte do conteúdo em si. Com tantas maneiras interessantes de usá-los, vale a pena experimentar com várias técnicas de fundo e ver como eles podem melhorar a experiência do usuário de seu próximo projeto.