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

25 de setembro de 2018

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!

Niê · 25 de setembro de 2018

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>

DiF · 25 de setembro de 2018

@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!

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!

25 de setembro de 2018

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/

DiF · 25 de setembro de 2018

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!