Rolagem de paralaxe facilitada com StickyStack.js

Efeitos de paralaxe agarra a atenção rapidamente. Esses efeitos manter certos fundos em vista enquanto percorre a página. Você encontrará rolagem de paralaxe em muitos sites e temas WordPress e eles são uma grande parte do design moderno da web.

Você também pode construir um estilo exclusivo de paralaxe usando o StickyStack.js plugar. Está construído em jQuery e mantém cada seção da página principal colada ao topo enquanto você rola para baixo.

Isso cria o ilusão de um site em camadas onde cada página “pilhas” em cima do outro. É muito legal e fácil de configurar sozinho.

Embora seja muito fácil de configurar, é necessário algum entendimento do desenvolvimento frontend.

Você precisa primeiro criar seções de páginas individuais dentro do recipiente principal. Desta forma você terá tudo dentro do HTML, para que você possa segmentar tudo com a função jQuery do StickyStack.

Ele também vem com algumas opções onde você pode personalizar o contêiner pai, a elementos que devem empilhar, e um possível Sombra da caixa se você gosta desse efeito.

Aqui está um amostra de código da página do GitHub:

 $ ('. main-content-wrapper'). stickyStack (contentElement: '.main-content-wrapper', stackingElement: 'seção', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0,25)' ); 

Enquanto isso não foi atualizado em cerca de dois anos, ainda é um plugin muito confiável. isto trabalhei em todos os navegadores que testei (Chrome, Safari e Firefox) com suporte para todas as versões do jQuery.

Além disso, o arquivo minificado é apenas 2 KB que é um tamanho decente para um plugin.

Para saber mais, visite o repositório principal e veja o que o StickyStack pode oferecer. Eu acho que funciona melhor sites de uma única página ou landing pages com grandes fundos fullscreen.

Você também pode verificar um demonstração ao vivo na CodePen se você quiser ver como isso fica em um site ao vivo.