2
I would like the bg of my Section to have a certain delay in the speed of scrolling to differentiate itself from the standard scrolling of the page. Does anyone know how I can do?
1 answer
1
An example of an 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>Browser other questions tagged javascript html css
You are not signed in. Login or sign up in order to post.
Clarify the question and include what you have tried to do.
– Sam
Maybe you’re asking about Parallax effect, nay?
– bio
That, I wavered here, could have said.
– Leonardo Henrique
In this case that question can help you...
– bio