I watched this video (link below) and would like to build an element that only appears when the scroll reaches the "touch point". I believe it should be javascript. If anyone knew I would be very grateful: D I tried to link the files and add the div in my project but it just disappeared.
NOTE: It shows effect at 3:46
Use the scrollreveal library along with jQuery .
Just use:
sr.reveal('elemento', options);
Here 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><scriptsrc="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 a number of ways, just choose the options that will pleases.
For these types of effects I recommend using jQuery, which already provides a range of features versus pure JS.
If you do not 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>ImadealittleCSS+scriptwheretheonlythingyouneedtodoisaddthe.mostrarclasstotheelementyouwanttorevealwhenscrollingthescreen.See:
$(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>Roleatelaparabaixo</h2><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Vestibulumcondimentumleovelsembibendumfringilla.Crastempordolorvitaemetusdapibus,sitametplaceratnunciaculis.Incursusvelitsitametorciplacerat,asagittisnislaccumsan.Utdapibusturpisquisanteinterdumeuismod.Pellentesqueposueregravidaporta.Duispharetra,diameuiaculisornare,lacussapienpharetralorem,pulvinartinciduntdiamurnaintellus.Nullafacilisi.Crasinanteveleratsollicitudinpretiumegetineros.Phasellusutsemperenim.Curabiturcursusmattisnibhacposuere.Maurissapienlibero,malesuadasedvestibulumeu,ornareeutortor.Phasellusnecerosasapieninterdumcursus.Sedinnibhfeugiat,pellentesquenibhid,mattismi.Vivamuspretiumvariusorci,vitaevehiculaarcufermentumid.Praesentnonfeugiatnibh.</p><divclass="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>