S
An example of effect parallax using jQuery. Just add the class .parallax in section that 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>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="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>