Elementos da Web de posição fixa
O uso de elementos de posição fixa cresceu em popularidade e se tornou um elemento comum na web.
Essa técnica envolve a correção de algum elemento no navegador enquanto o resto da página rola. Na maioria das vezes, isso é feito nos elementos de cabeçalho, incluindo a navegação principal de um site. Essa também é uma abordagem popular em sites de página única, onde a navegação na página precisa estar sempre presente. Também encontramos vários elementos de páginas da Web travadas usando essas técnicas.
Existem muitas situações que podemos encontrar onde consertar um elemento na página é uma coisa boa, mas tudo volta para uma única finalidade. Em quase todas essas situações, o elemento fixo mantém uma parte crítica da página na frente dos usuários em todos os momentos.
A importância desses elementos varia, mas até certo ponto o objetivo fundamental é manter uma parte da página perpetuamente na porta de visualização.
Ao considerar o uso dessa técnica, eu recomendo que você considere cuidadosamente por que e como você faz isso. Tenha em mente que qualquer parte de sua página não se move automaticamente chamará muita atenção. Portanto, certifique-se de que você está colocando isso para funcionar. Vamos mergulhar!
Cabeçalhos fixos
Cabeçalhos fixos são de longe o elemento de posição fixa mais comum, tanto que na verdade eu tive que começar a adicionar a essa coleção para evitar muitas amostras. Na maioria das vezes, o cabeçalho é fixado para garantir que a navegação dos sites esteja sempre presente. Como mencionei antes, isso é especialmente verdadeiro quando se lida com um site de uma única página.
Existem muitas variações sutis em como você pode lidar com cabeçalhos fixos, então vamos revisar algumas amostras para várias idéias sobre essa abordagem.
Sardas e Bonito
Isso é o que eu consideraria um exemplo clássico dessa técnica. O cabeçalho é fixo no lugar enquanto você percorre o site. Isso inclui o logotipo e os principais elementos de navegação. Além disso, é um site de uma única página. Clicando na navegação principal você rola para a parte apropriada da página.
Nesse caso, como o cabeçalho pegajoso torna a navegação do site de uma única página para a frente. Ele também evita um dos aspectos mais irritantes de muitos sites de uma única página: quando a navegação está apenas no topo da página, mas ela rola por muito tempo. Dessa forma, o cabeçalho fixo não só é bonito e mantém a marca principal e central do site, mas também garante que o site seja fácil de usar.
Mapalong
Este exemplo usa um cabeçalho fixo, mas com sua própria torção secundária. Este site também é um layout de página única, mas não possui navegação na página. Neste caso, o cabeçalho fixo contém o logotipo principal e um botão de login, ambos elementos muito importantes. Mas, ainda melhor do que isso, quando você rola a página, a chamada principal para a ação se move para o cabeçalho à medida que ele sai da vista. Como resultado, o ponto de conversão principal do site está sempre visível. E, no entanto, ainda melhor do que isso, o ato da chamada à ação desaparecendo à vista chama a atenção do usuário para ela, enfatizando ainda mais o ponto de conversão no design! Na minha opinião, um uso brilhante da abordagem.
Kisko Labs
Outra abordagem inteligente para o cabeçalho da posição fixa é uma técnica que chamo de slide e stick. No site da Kisko Labs, apenas uma parte dos cabeçalhos ficava. Conforme você rola a página, a navegação principal também é rolada. Isso é até que ele atinge o topo da tela, então ele fica lá. Assim, a navegação desliza (ou rola) normalmente, então fica no topo.
Um detalhe extra que é realmente bom aqui é como a navegação destaca a parte da página que você está visualizando no momento. Como esse é um design de página única, é útil ter a parte atual da página identificada como você faria com o status normal de “página atual” de qualquer navegação.
Levantar o telhado
Uma extensão comum desse estilo é incorporar algum nível de transparência na camada adesiva. Em muitos dos exemplos que você encontrará aqui, isso é feito simplesmente por ter uma borda irregular no elemento pegajoso. Às vezes isso é feito com um elemento sobressaindo da barra fixa, outras vezes com uma borda irregular. No site Raise the Roof, foi realizado com uma borda muito orgânica e quase aleatória.
Nesta amostra, encontramos um resultado visual interessante. Através do uso de elementos sobrepostos, o site cria profundidade visual à medida que o conteúdo se desloca atrás do cabeçalho. Isto é enfatizado ainda mais pela lua no fundo que também é fixa. O resultado final é de três camadas visuais. Essa profundidade adiciona um grande nível de interesse visual e pode criar um design visualmente impressionante.
Bem-vindo à água
O site Welcome to the Water é uma criação bastante incomum. Muito pouco sobre este site se encaixa nas normas de layout e design da web. De particular interesse para o tópico deste artigo é o cabeçalho fixo. Neste site, esse elemento fixo serve como uma ferramenta de navegação para o site. Mas em muitos aspectos, tem mais de uma barra de ferramentas para sentir isso.
Amostras adicionais de cabeçalhos fixos
Aqui estão alguns exemplos adicionais de cabeçalhos fixos. Você encontrará uma grande variedade de estilos e variações sutis aqui.
Tam Cai
Marlon Messam
Big Eye Criativo
Grupo Criativo Balencic
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Faça Melhores Apps
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb Guitars
Trussystem
Rodapés fixos
Talvez o oposto mais óbvio ao cabeçalho fixo seja o rodapé fixo. Nesses casos, o rodapé da página fica preso na parte inferior da tela. Conforme o usuário rola, o elemento permanece no lugar.
Assim como qualquer outro elemento fixo, criar um ponto focal ainda é o objetivo principal. Curiosamente, embora com rodapés como esses, é mais comum em uma função secundária que ainda é um objetivo primário.
Grupo sem chumbo
O site do Grupo Unleaded é um excelente exemplo disso. Aqui, o rodapé fixo contém elementos que são orientados para a ação e atingem o objetivo central do site. Primeiro, observe que todos os itens desta barra são coisas que um usuário pode fazer: promovê-los nas mídias sociais, fazer uma ligação ou enviá-los por e-mail. Em segundo lugar, eles são os principais itens de ação que a agência provavelmente quer que você faça. Eles também querem que você os promova ou entre em contato. Estas são as principais razões para ter um site como este. Por isso, faz sentido fixá-los em um lugar onde eles receberão muita atenção.
Envato
O site Envato também tem um rodapé fixo. Aqui, a barra contém o logotipo primário do site, que, curiosamente, foi movido para cá a partir do topo esquerdo típico. Francamente, para uma marca como Envato, isso não é um problema. Além disso, você encontrará uma série de menus suspensos que o lançam em suas diversas propriedades da web. Esta função simples é o seu objetivo real. Na verdade, você pode dizer que essa página de perfil comercial não é exatamente o local onde deseja que as pessoas acabem. Como tal, o foco em levá-lo de volta aos seus sites de conteúdo é proeminente e inevitável.
Kiyuco
Para muitos sites, como este, seus programas de e-mail marketing são de importância crítica. Como tal, ter um rodapé fixo colocado que destaca de forma proeminente o formulário de inscrição pode percorrer um longo caminho para crescer essas listas de discussão. O marketing por e-mail pode ajudá-lo a promover seu site por um período mais longo e a buscar clientes de maneira mais eficaz? Se assim for, talvez um rodapé fixo como este seria uma ótima ferramenta.
Barras laterais de posição fixa
Bloquear elementos de uma página da Web no lugar não é algo limitado a cabeçalhos e rodapés, embora possam ser os mais populares. Parece que uma barra lateral de posição fixa é um segundo próximo.
As barras laterais de locais fixos geralmente contêm informações muito semelhantes ao que você encontraria em um cabeçalho. Isso inclui coisas como logotipos, navegação e ferramentas de mídia social. Aqui estão algumas amostras para considerar se você quiser usar essa abordagem.
Jorge Rigabert
Este lindo site é um exemplo perfeito do estilo de trabalho. Aqui, a barra lateral contém as principais opções de navegação e marca do site. Esse tipo de abordagem da barra lateral é excelente porque mantém a navegação visível enquanto a página rola, mas também porque ela não faz interseção com o conteúdo enquanto ele se move. Embora isso possa ser uma distinção sutil, isso contribui para uma interface incrivelmente suave. Sites como esse exibem uma elegância que parece simples, mas é incrivelmente difícil de montar.
Mais perigos mais heróis
Eu realmente amo o jeito que este site funciona. Os elementos fixos na barra lateral são as principais funções que os proprietários do site querem que você faça. Mais do que tudo, eles querem que você ouça a música! Como tal, o recurso proeminente e permanentemente na tela “play” está pronto e aguardando. Eu não posso imaginar um elemento mais crítico para o site, e tê-lo exibido de forma tão proeminente só faz sentido. E você tem que amar que não tenha sido apresentado de uma maneira desagradável; nem sequer reproduz automaticamente. Parabéns ao designer que controlou essa tentação.
Yowza
Às vezes é desejável criar um único elemento fixo que promova uma função específica. Vimos isso com vários serviços de feedback e suporte que você pode conectar ao seu site. Neste caso, um botão semelhante ao Facebook foi afixado ao lado do site. Ele permanece no lugar enquanto você rola a página. Isso, naturalmente, chama a atenção do usuário para o elemento e incentiva-o a usá-lo. Eu diria que isso mostra o poder e importância de referências sociais em um negócio baseado na web como este.
Como uma nota lateral, eu amo a mudança do site na borda 10px que se tornou tão popular. Aqui o elemento simplesmente rola por. Não é uma animação dramática, mas algo sobre isso é divertido e adiciona uma camada de interesse e vida ao site.
Coletivo Fat-Man
Este site segue todos os padrões que encontramos em nossas amostras anteriores. Mas destaca-se de uma maneira enorme devido a uma animação simples. Conforme você rola a página, o personagem na barra lateral anima e caminha. Este elemento, sozinho, eleva o site para uma categoria única e memorável. Como é que algo tão trivial pode ter um impacto tão grande? Leva este site simples e bombeia-o cheio de grandiosidade. Isso mostra que a agência por trás adora polir seu trabalho com os tipos de retoques que qualquer cliente vai morrer.
Mais elementos da barra lateral fixos
Aqui estão alguns exemplos adicionais de barras laterais fixas no trabalho.
Poemas Bobos
Colin McKinney
Informante
Esta é a Marcela
Janette D. Council
Apenas logótipo
Uma abordagem que não encontramos muitas vezes é um logotipo de posição fixa. Neste exemplo, o logotipo foi travado no lugar mesmo quando a página rola. Essa abordagem atípica mantém o nome do site na frente e no centro. Projetos como esse podem ser interessantes para serem considerados. É realmente difícil adivinhar por que eles poderiam ter feito isso, mas só podemos supor que a marca principal é de importância crítica. Talvez eles tenham muita concorrência semelhante? Talvez eles só queiram se lembrar do nome deles? Independentemente disso, é uma técnica interessante que vale lembrar se se aplica ao seu projeto.
"De volta ao topo"
Quando se trata de páginas muito longas, um bom recurso para adicionar é um link que leva você ao topo da página. E com elementos fixos, você pode criar um link que permaneça no mesmo lugar em que você rola a página. Isso é exatamente o que as amostras fornecidas aqui fizeram.
Mais frequentemente, esse elemento é colocado fora do layout. Desta forma, não interfere com mais nada no design enquanto percorre a página. Você também perceberá como esses elementos frequentemente têm uma seta apontando para cima - talvez um elemento óbvio a incluir, mas muito importante ter em mente, pois informa os usuários rapidamente quanto ao seu propósito.
Esta abordagem contrasta um pouco a noção de um cabeçalho colante. Neste caso, a navegação é na maioria das vezes apenas no topo da página. Então, retornar é importante, pois permite que as pessoas passem rapidamente pelo conteúdo dos sites. No caso de sites de uma única página, isso pode ser um passo extra irritante.
Sobreposições
Esse exemplo demonstra um toque extra interessante, pois não mostra o retorno ao elemento principal, a menos que você não esteja realmente no topo da página. Talvez um detalhe óbvio para incluir, mas como você vai descobrir, nem sempre é o caso. Parte do poder nessa abordagem é que o próprio ato de aparecer chama a atenção para garantir que o usuário esteja ciente disso.
Mais duas amostras
Os dois exemplos a seguir retornam aos botões superiores, embora sejam visíveis o tempo todo. É interessante para mim que esse elemento seja colocado com mais frequência no canto inferior direito da tela. Não é a parte mais proeminente do design, então talvez seja de natureza secundária é bom para um elemento menos importante. Você observará, é claro, que o elemento ainda está destacado ao quebrar as bordas e com cores fortes. Suponho que o moral da história é considerar sua importância para o uso do seu design. Se isso fizer toda a diferença, verifique se ela está visível.
Pensamento de Wildcard
Dusanka e David
Vários elementos fixos
Neste último exemplo, vamos dar uma olhada em um site que possui muitos elementos fixos na página. Em muitos aspectos, este site rompe com a maioria das normas de web design e layout. Exceto pelo logotipo no canto superior esquerdo, quase nada está em seu lugar habitual.
No entanto, encontramos alguns elementos com os quais estamos familiarizados com base neste artigo, como a barra lateral fixa. No entanto, você notará que os outros dois estão longe de serem típicos. Por exemplo, o rodapé fixo que contém alguns links de todo o site. Coisas como políticas de privacidade e termos e condições raramente garantem uma posição proeminente em uma página. No entanto, aqui você os encontra afixados na página com alguns outros links navais importantes.
Eu realmente gosto de como eles colocaram os links da conta de usuário no canto superior direito. Este é o lugar onde eles são freqüentemente colocados, embora raramente sejam corrigidos lá, independentemente da rolagem, como neste caso. Eu gosto disso porque garante que você sempre possa obter acesso rápido aos recursos do membro do site; algo que talvez alguns outros aplicativos e sites possam se beneficiar.
Em suma, este site está longe de ser normal, mas algo sobre ele funciona incrivelmente bem e é fácil de amar. Seu layout incomum não dificulta o uso e o resultado final é uma experiência distinta e prazerosa.
Recursos
Finalmente, com este round up, eu gostaria de incluir alguns jQuery plugins que abordam a necessidade de fixar elementos em um local específico em uma página. Eles oferecem recursos diferentes que se ajustam a várias necessidades que você pode ter, portanto, explore todos para encontrar o ajuste certo.
O melhor é que eles são todos plugins jQuery e são super simples de implementar. Se você quiser produzir esse estilo, eles, pelo menos, tornarão isso um trabalho fácil.
Meerkat
Meerkat é uma das minhas ferramentas favoritas para este trabalho em particular. Sua capacidade de ser ocultada a torna uma ótima ferramenta para exibir conteúdo promocional ou recursos importantes, como formulários de inscrição por e-mail.
Stickyscroll
Stickyscroll é um plugin que permite criar elementos que rolam com a página até que eles atinjam o topo, e então eles se encaixam. Esse plug-in também ajuda a garantir que os elementos não rolem para uma região de rodapé, fornecendo um limite inferior; um bom recurso extra, com certeza.
Waypoints
Waypoints permite disparar eventos jQuery quando um usuário rola para pontos específicos em uma página. Isso é útil se você quiser destacar ou alterar a navegação para corresponder à localização do usuário na página. Mas a diversão não termina aí, pois há inúmeras coisas que você poderia fazer em uma página ou design enquanto um usuário rola e interage com ela.
Conclusão
Elementos fixos agora são um elemento comum que os projetistas podem colocar em ação. Ferramentas para realizar esses recursos e suporte completo ao navegador não são mais um problema.
Como tal, é uma ótima técnica para manter seu cinto de ferramentas e retirar quando for a hora certa. Tais abordagens não são, obviamente, o tipo de coisa que você usa todos os dias, mas podem ser incrivelmente poderosas quando usadas de maneira eficaz.