0
I saw this video (link below) and would like to build an element that only appears when the scroll reaches the "point that touches it". I think it should be javascript. If anyone knew would be very grateful :D I tried to link the files and add a div to my project but it just disappeared.
NOTE: It shows the effect at 3:46
1
Use the library scrollreveal together with the jQuery.
Just use:
sr.reveal('elemento', options);
Below is an example. (Just scroll the page slowly)
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>You can customize in several ways, just choose the options that will please you.
sr.reveal looks like a piece of dialogue from a Shakespearean piece: sir, reveal element! , with options!
@Jeffersonquesado is more for D&D and things like, who knows to reveal some evil element that is hidden :P
I put the link of the scripts and changed the elements but it didn’t work :( I wonder what is happening?
@Leonardohenrique you put the jquery and the scrollreveal in the respective order? Your script (where you define the elements), are you at the bottom of the page? You are adding the element correctly (#id, .class or tag) ? If possible edit your question and add how you are doing.
I put the script at the bottom of the page as recommended and it worked :D I didn’t know I had the right position for scripts, I always put it in the head. Thank you very much!
1
For these types of effects I recommend using jQuery, which already provides a range of facilities in front of the pure JS.
If you don’t have it, just include the library in your <head></head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I made a small script + CSS where the only thing you need to do is add the class .mostrar to the element you want reveal when scrolling the screen. Behold:
$(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>Browser other questions tagged javascript html css
You are not signed in. Login or sign up in order to post.
Check out these posts: https://answall.com/questions/43784 - https://answall.com/questions/26092 - https://answall.com/questions/177112
– Bacco