0

Vi esse vídeo (link abaixo) e gostaria de construir um elemento que somente aparecesse quando a rolagem atingir o "ponto que toque nele". Creio que deve ser javascript. Se alguém souber ficaria muito grato :D Tentei linkar os arquivos e add a div no meu projeto mas ela simplesmente sumiu.

OBS: Ele mostra o efeito em 3:46

https://www.youtube.com/watch?v=tdgDr_icGdo

1

2 Respostas 2

1

Utilize a biblioteca scrollreveal juntamente com o jQuery.

Basta usar:

sr.reveal('elemento', options);

Segue abaixo um exemplo. (Basta rolar a página devagar)

window.sr = ScrollReveal();
sr.reveal('button', {
  origin:'right',
  duration: 1500
});
sr.reveal('.t', {duration: 2500});
button {
  margin: 400px 0;
}

.t {
  margin: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

<div>
  <p>Text</p>
  <button>Ok</button>
  <p class="t">Texto 2</p>
</div>

Você pode customizar de várias maneiras, basta escolher as opções que vai lhe agrada.

5
  • 1
    sr.reveal parece um pedaço de diálogo duma peça shakespeareana: sir, revele elemento!, com opções! 31/01/2018 às 0:39
  • 1
    @JeffersonQuesado tá mais para D&D e coisas do tipo, quem sabe pra revelar algum elemento maléfico que está oculto :P
    – Largato
    31/01/2018 às 0:50
  • Coloquei o link dos scripts e alterei os elementos mas não funcionou :( O que será que está acontecendo? 31/01/2018 às 14:18
  • @LeonardoHenrique você colocou o jquery e o scrollreveal na respectiva ordem? O seu script (onde você define os elementos), está no final da página? Você está adicionando o elemento corretamente (#id, .class ou tag) ? Se possível edita tua pergunta e adiciona como você está fazendo. 31/01/2018 às 14:30
  • Coloquei o script no final da página como recomendou e funcionou :D Não sabia que tinha posição correta para scripts, sempre coloquei entre o head. Muito obrigado mesmo! 31/01/2018 às 14:35
1

Para esses tipos de efeitos eu recomendo usar jQuery, que já fornece uma gama de facilidades frente ao JS puro.

Se você não tem, basta incluir a biblioteca em sua <head></head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Fiz um pequeno script + CSS onde a única coisa que você precisa fazer é adicionar a classe .mostrar ao elemento que você quer revelar ao rolar a tela. Veja:

$(window).on("load scroll", function(){
   var threshold = 30; // porcentagem da altura visível do elemento que aparecer na tela para iniciar a animação
	$(".mostrar").each(function(){
		var el = $(this);
		var eleHeight = el.outerHeight(); // altura da div
		var eleTopo = el.offset().top; // distancia da div ao topo do documento
		var scrlTopo = $(window).scrollTop(); // quanto foi rolada a janela
		var distance = eleTopo-scrlTopo; // distancia da div ao topo da janela
		var altJanela = window.innerHeight; // altura da janela
		if(distance <= altJanela-(eleHeight/(threshold/10))) {
			el.animate({ 'opacity': 1 }, 1200); // 1200 = 1,2 segundo da animação. Quanto menor, mais rápido
		}
	});
});
.mostrar{
	opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Role a tela para baixo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum leo vel sem bibendum fringilla. Cras tempor dolor vitae metus dapibus, sit amet placerat nunc iaculis. In cursus velit sit amet orci placerat, a sagittis nisl accumsan. Ut dapibus turpis quis ante interdum euismod. Pellentesque posuere gravida porta. Duis pharetra, diam eu iaculis ornare, lacus sapien pharetra lorem, pulvinar tincidunt diam urna in tellus. Nulla facilisi. Cras in ante vel erat sollicitudin pretium eget in eros. Phasellus ut semper enim. Curabitur cursus mattis nibh ac posuere. Mauris sapien libero, malesuada sed vestibulum eu, ornare eu tortor. Phasellus nec eros a sapien interdum cursus. Sed in nibh feugiat, pellentesque nibh id, mattis mi. Vivamus pretium varius orci, vitae vehicula arcu fermentum id. Praesent non feugiat nibh.</p>
<div class="mostrar" style="display: block; width: 300px; float: left; margin: 20px; background: blue; height: 200px;">
	div 1
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum leo vel sem bibendum fringilla. Cras tempor dolor vitae metus dapibus, sit amet placerat nunc iaculis. In cursus velit sit amet orci placerat, a sagittis nisl accumsan. Ut dapibus turpis quis ante interdum euismod. Pellentesque posuere gravida porta. Duis pharetra, diam eu iaculis ornare, lacus sapien pharetra lorem, pulvinar tincidunt diam urna in tellus. Nulla facilisi. Cras in ante vel erat sollicitudin pretium eget in eros. Phasellus ut semper enim. Curabitur cursus mattis nibh ac posuere. Mauris sapien libero, malesuada sed vestibulum eu, ornare eu tortor. Phasellus nec eros a sapien interdum cursus. Sed in nibh feugiat, pellentesque nibh id, mattis mi. Vivamus pretium varius orci, vitae vehicula arcu fermentum id. Praesent non feugiat nibh.</p>
<div class="mostrar" style="display: block; width: 400px; float: left; margin: 20px; background: red; height: 200px;">
	div 2
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum leo vel sem bibendum fringilla. Cras tempor dolor vitae metus dapibus, sit amet placerat nunc iaculis. In cursus velit sit amet orci placerat, a sagittis nisl accumsan. Ut dapibus turpis quis ante interdum euismod. Pellentesque posuere gravida porta. Duis pharetra, diam eu iaculis ornare, lacus sapien pharetra lorem, pulvinar tincidunt diam urna in tellus. Nulla facilisi. Cras in ante vel erat sollicitudin pretium eget in eros. Phasellus ut semper enim. Curabitur cursus mattis nibh ac posuere. Mauris sapien libero, malesuada sed vestibulum eu, ornare eu tortor. Phasellus nec eros a sapien interdum cursus. Sed in nibh feugiat, pellentesque nibh id, mattis mi. Vivamus pretium varius orci, vitae vehicula arcu fermentum id. Praesent non feugiat nibh.</p>
<div class="mostrar" style="display: block; width: 200px; float: right; margin: 20px; background: yellow; height: 200px;">
	div 3
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum leo vel sem bibendum fringilla. Cras tempor dolor vitae metus dapibus, sit amet placerat nunc iaculis. In cursus velit sit amet orci placerat, a sagittis nisl accumsan. Ut dapibus turpis quis ante interdum euismod. Pellentesque posuere gravida porta. Duis pharetra, diam eu iaculis ornare, lacus sapien pharetra lorem, pulvinar tincidunt diam urna in tellus. Nulla facilisi. Cras in ante vel erat sollicitudin pretium eget in eros. Phasellus ut semper enim. Curabitur cursus mattis nibh ac posuere. Mauris sapien libero, malesuada sed vestibulum eu, ornare eu tortor. Phasellus nec eros a sapien interdum cursus. Sed in nibh feugiat, pellentesque nibh id, mattis mi. Vivamus pretium varius orci, vitae vehicula arcu fermentum id. Praesent non feugiat nibh.</p>
<div class="mostrar" style="display: block; width: 500px; float: left; margin: 20px; background: green; height: 200px;">
	div 4
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum leo vel sem bibendum fringilla. Cras tempor dolor vitae metus dapibus, sit amet placerat nunc iaculis. In cursus velit sit amet orci placerat, a sagittis nisl accumsan. Ut dapibus turpis quis ante interdum euismod. Pellentesque posuere gravida porta. Duis pharetra, diam eu iaculis ornare, lacus sapien pharetra lorem, pulvinar tincidunt diam urna in tellus. Nulla facilisi. Cras in ante vel erat sollicitudin pretium eget in eros. Phasellus ut semper enim. Curabitur cursus mattis nibh ac posuere. Mauris sapien libero, malesuada sed vestibulum eu, ornare eu tortor. Phasellus nec eros a sapien interdum cursus. Sed in nibh feugiat, pellentesque nibh id, mattis mi. Vivamus pretium varius orci, vitae vehicula arcu fermentum id. Praesent non feugiat nibh.</p>
<div class="mostrar" style="display: block; width: 100px; float: left; margin: 20px; background: gray; height: 200px;">
	div 5
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .