How to put scrolling dalay in a background? [duplicate]

Navigation
2

I would like the bg of my section to have a certain delay in the scroll speed to differentiate itself from the default scrolling of the page. Does anyone know how I can do it?

    
asked by anonymous 31.01.2018 / 20:42

1 answer

1

An example of parallax effect using jQuery. Just add the class .parallax to the section you want the effect: 

$(function(){
   $('.parallax').each(function(){
      var $sec = $(this);
      $(window).on('scroll',function() {
         var yPos = -($(window).scrollTop()/3);  // no lugar de "3", quanto maior o valor, mais lento o movimento do background
         $sec.css('background-position', '0 '+ yPos +'px');
      }); 
   });
});
/* CSS apenas para exemplo */
.parallax {
    color:#FFF;
    width: 100%;
    height: 400px;
}

#sec1{
   background: url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg);
}
#sec2{
   background: url(https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Integerinterdummolestielorem,eufacilisisipsumbibendumnec.Aliquamblanditaugueinmagnaefficiturtristique.Sedsempervelitodio,euismodlaciniafelistinciduntid.Sedsuscipithendreritpurus,nontempusvelitultricessitamet.Mauriscondimentumfacilisismassa,egetfermentumleoullamcorpersitamet.Vestibulumdictumutnuncasuscipit.Sedidipsumconsectetur,vestibulumeratvitae,ultriciesnulla.Quisquedignissimorcivelnisifermentumiaculissitametatvelit.Aliquamsagittisnullanulla,apellentesquejustomattisvitae.Proinlacinianisielit,nondapibusexvehiculavitae.</p><sectionid="sec1" class="parallax">
   <h3>Texto 1</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum molestie lorem, eu facilisis ipsum bibendum nec. Aliquam blandit augue in magna efficitur tristique. Sed semper velit odio, euismod lacinia felis tincidunt id. Sed suscipit hendrerit purus, non tempus velit ultrices sit amet. Mauris condimentum facilisis massa, eget fermentum leo ullamcorper sit amet. Vestibulum dictum ut nunc a suscipit. Sed id ipsum consectetur, vestibulum erat vitae, ultricies nulla. Quisque dignissim orci vel nisi fermentum iaculis sit amet at velit. Aliquam sagittis nulla nulla, a pellentesque justo mattis vitae. Proin lacinia nisi elit, non dapibus ex vehicula vitae.</p>   
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum molestie lorem, eu facilisis ipsum bibendum nec. Aliquam blandit augue in magna efficitur tristique. Sed semper velit odio, euismod lacinia felis tincidunt id. Sed suscipit hendrerit purus, non tempus velit ultrices sit amet. Mauris condimentum facilisis massa, eget fermentum leo ullamcorper sit amet. Vestibulum dictum ut nunc a suscipit. Sed id ipsum consectetur, vestibulum erat vitae, ultricies nulla. Quisque dignissim orci vel nisi fermentum iaculis sit amet at velit. Aliquam sagittis nulla nulla, a pellentesque justo mattis vitae. Proin lacinia nisi elit, non dapibus ex vehicula vitae.</p>
<section id="sec2" class="parallax">
   <h3>Texto 2</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum molestie lorem, eu facilisis ipsum bibendum nec. Aliquam blandit augue in magna efficitur tristique. Sed semper velit odio, euismod lacinia felis tincidunt id. Sed suscipit hendrerit purus, non tempus velit ultrices sit amet. Mauris condimentum facilisis massa, eget fermentum leo ullamcorper sit amet. Vestibulum dictum ut nunc a suscipit. Sed id ipsum consectetur, vestibulum erat vitae, ultricies nulla. Quisque dignissim orci vel nisi fermentum iaculis sit amet at velit. Aliquam sagittis nulla nulla, a pellentesque justo mattis vitae. Proin lacinia nisi elit, non dapibus ex vehicula vitae.</p>   
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum molestie lorem, eu facilisis ipsum bibendum nec. Aliquam blandit augue in magna efficitur tristique. Sed semper velit odio, euismod lacinia felis tincidunt id. Sed suscipit hendrerit purus, non tempus velit ultrices sit amet. Mauris condimentum facilisis massa, eget fermentum leo ullamcorper sit amet. Vestibulum dictum ut nunc a suscipit. Sed id ipsum consectetur, vestibulum erat vitae, ultricies nulla. Quisque dignissim orci vel nisi fermentum iaculis sit amet at velit. Aliquam sagittis nulla nulla, a pellentesque justo mattis vitae. Proin lacinia nisi elit, non dapibus ex vehicula vitae.</p>
    
31.01.2018 / 21:27
Error generating report in production - ReportViewer Version 11 HEAD detached at origin / master