Adicione efeito de ampliação em sua página da Web com jfMagnify

Existem muitas plugins de zoom gratuitos que funcionam incrivelmente bem. No entanto, a maioria deles é construído para imagens e eles especificam direções para conteúdo apenas de imagem.

E se você pudesse adicione um efeito de ampliação para cada parte da sua página web? Graças a jfMagnify, você pode.

É um plugin jQuery gratuito que suporta não apenas o zoom de imagem, mas também zoom de toda a página. É um dos poucos plugins que também permite escolha o nível de ampliação e suporta eventos de toque para usuários móveis.

Note que este plugin pode parecer um pouco pesado porque depende de duas dependências: jQuery regular e IU do jQuery. Ambos são necessários para que o jfMagnify funcione corretamente. Sem mencionar o script real do jfMagnify você precisará incluir em sua página.

A configuração é um pouco complicada porque você só pode segmentar elementos ampliados dentro de um contêiner. Se você quiser segmentar a página inteira, precisará incluir uma aula sobre todo o seu website.

Veja como o linha única de jQuery pareceria:

 $ (". magnify"). jfMagnify (); 

Isso tem como alvo todos os elementos dentro do .ampliar recipiente que geralmente é um div elemento.

Esses elementos internos podem ser imagens, mas também incluem letras pequenas, por exemplo, em termos de site ou páginas de política de privacidade. Toda a documentação é disponível no repositório do GitHub, então, depois de configurá-lo, todo o processo se torna muito mais fácil.

Além disso, este plugin é muito instável e vem com muitas regras de contêiner. Por exemplo, o elemento contêiner não pode ter uma posição CSS estática, por isso precisa ser relativo, absoluto ou fixo.

Você pode encontrar todas as regras de estilo padrão no repositório do GitHub, mas pode ser difícil personalizar se seu layout já estiver construído e em execução. Os benefícios do jfMagnify são, para mim, dignos do esforço. Realmente, depende das suas necessidades e se você gosta da interface.

Dê uma olhada nos documentos no GitHub para ver o que você pensa. E você também pode pré-visualize a interface no CodePen se você quiser ver a biblioteca em ação antes de instalá-la.