The parallax scrolling effect is a design technique that’s relatively new in development and web design. Over the past few years since it’s hit the scene though, it’s grown pretty popular in its own right, and with good reason, too.
Definição de Parallax Scrolling
Parallax scrolling is a technique wherein your web page’s background image scrolls at a slower rate compared to the foreground image. It gives the user a unique sense of depth and action while scrolling through a page when used on a website.
Without Parallax Scrolling
The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.
With Parallax Scrolling
The background image scrolls at a different rate as the rest of the elements in the page.
O Impacto do Parallax Scrolling no Usuário
A técnica não é exatamente nova, no entanto, e já era usada na animação tradicional desde a década de 1920. Também foi utilizada em muitos videogames clássicos, como Super Mario Bros.
No universo do web design, porém, a Nike costuma ser creditada como uma das primeiras a usar o parallax scrolling em 2011. Desde então, o termo “parallax scrolling” (às vezes chamado de “fundo/s em parallax”) tornou-se comum entre designers e desenvolvedores, crescendo constantemente em popularidade.
Parallax scrolling as used in a version of Super Mario Brothers. Notice how the hills in the background move
in slightly varying speeds, as compared to Mario and the other characters in the foreground.
O Que o Usuário Ganha com Isso
O melhor desse efeito é que ele incentiva os usuários a interagirem com o seu site, aumentando tanto o engajamento quanto a atratividade. E, quando feito da maneira correta, o parallax scrolling pode dar vida até mesmo aos sites mais simples. Ele pode até ser usado para criar narrativas impressionantes que prendem imediatamente a atenção de todos os visitantes do site.
Compartilhe Seu Trabalho Conosco!
E então, o que vocês acham? Vocês já usaram o mais novo recurso de fundo em parallax do PBS v4? Está funcionando bem para você? Sinta-se à vontade para compartilhar o link do seu trabalho ou deixar sugestões na seção de comentários abaixo.
Boa criação de sites!