Ir ao conteúdo
  • Cadastre-se
fspjonny

HTML RESOLVIDO Efeito no background da página com imagem estática

Recommended Posts

Boa tarde!

Já ví em alguns sites esse efeito, mas não entendi a mecânica dele, o topo da página contém um navbar que some assim que começa a rolar página e o texto segue até um certo ponto, onde uma imagem aparece na rolagem, depois ela fica fixa no meio da tela e o restante do texto passa por cima e segue pela página rolando até que some a imagem e o texto continua.

 

veja o exemplo nesse link: https://www.tecmundo.com.br/produto/134531-intel-anuncia-novo-ssd-905p-optane.htm?f&utm_source=facebook.com&utm_medium=referral&utm_campaign=thumb

 

Não sei o nome dessa técnica e não sei como fazer ela, alguém tem uma dica de estudo desse exemplo do link?

Grato a todos!😉

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se não me engano se chama Sticky.

 

https://www.w3schools.com/howto/howto_css_image_sticky.asp

adicionado 9 minutos depois

Basicamente é assim:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 200px;
    display: block;
}

#texto {
    position: absolute;
}
</style>
<img class="sticky" src="#" alt="#">

<h2>Scroll Down</h2>
<h2>Scroll Down</h2>
<h2>Scroll Down</h2>
<h2>Scroll Down</h2>
<p>Some example text..</p>

<div id="texto">TEXTO GRANDE </div>
</body>
</html>

 

  • Curtir 3

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fspjonny Pelo que eu vi no site que mencionastes, me parece ser o efeito "parallax" Eu fiz algo similar a isso em um dos meus projetos.

 

Basta inspecionar o elemento que você descobre!

ahVqbow.png

 

Pela imagem, indica que o efeito é realmente o parallax.  

Este efeito tem variações, mas este de subir e descer e dar a impressão que os textos cobrem ela é o mais comum.

Se usar o Wordpress, tem plugins que fazem isso de forma automática só precisando configurar... Se não usar wordpress, vai ter que fazer na unha.  Eu faço na unha.. é um efeito bastante simples de fazer.

 

Aí tu combina o parallax com o Sticky  que o @Niê mencionou!

 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu fiz a inspeção, mas não achei que fosse esse nome article-parallax, aliás achei até que fosse mesmo o nome de uma classe CSS que algum desenvolvedor deu para uma classe criada para a estrutura da página sem relação com esse controle.

 

Bom saber disso que vou estudar como montar ela na unha mesmo, nada contra mas pessoalmente odeio Wordpress! Mas é gosto pessoal Ok galera desculpem!😉

 

Obrigado @Niê e Obrigado @DiF 👍

adicionado 7 minutos depois

Acabo de encontrar o que eu queria após a ajuda dos colegas acima e o melhor de tudo usando com Bootstrap!👏

 

Deixo o link para quem quiser estudar sobre o Parallax: https://blog.vilourenco.com.br/criando-um-elemento-com-efeito-parallax-em-seu-projeto-com-bootstrap/

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites
18 minutos atrás, fspjonny disse:

nada contra mas pessoalmente odeio Wordpress! Mas é gosto pessoal Ok galera desculpem!😉

Sem problemas!  Eu sinto o mesmo! Também não gosto e não uso wordpress.

Isso vai muito do gosto de cada desenvolvedor. Eu particularmente gosto de fazer as coisas do zero, sem usar CMS. No máximo usar um framework como o bootstrap.

 

Que bom que conseguiu encontrar o que você queria! 

Boa sorte!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×