Parallax and Pin Elements

Asked

Viewed 51 times

0

I am looking for solution to realize a Parallax effect and fix some elements as I step by screen sessions.

The idea of this is to gather the parts of a shoe and assemble it as the scroll rolls.

Does anyone indicate any?

positioning parallax

  • http://answall.com/questions/23202/quais-s%C3%A3o-as-t%C3%A9cnicas-para-fazer-anima%C3%A7%C3%B5es-based-em-scroll

1 answer

0

download the jquery library from version 1.11.1 and use the code below in css: 

#parallaxBar{
     max-width: 100%;
     height:750px;
    background-color:#004c82;
    background: url('enderecolocaldoarq') no-repeat 50% 0 fixed;
    position: relative;   

      /* -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px); */
}

and this srcript below I prefer to put in html on the page where you want the effect: 

<script>
        $(document).ready(function(){
            $window = $(window);
            //Captura cada elemento section com o data-type "background"
            $('section[data-type="background"]').each(function(){
                var $scroll = $(this);   
                    //Captura o evento scroll do navegador e modifica o backgroundPosition de acordo com seu deslocamento.            
                    $(window).scroll(function() {
                        var yPos = -($window.scrollTop() / $scroll.data('speed')); 
                        var coords = '50% '+ yPos + 'px';
                        $scroll.css({ backgroundPosition: coords });    
                    });
           });  
        }); 
 </script>

Below is the section responsible for the built effect:

<section id="parallaxBar" data-speed="6" data-type="background">
        <!-- IMAGEM SOBRE O PARALLAX no CSS "parallaxBar" e etc-->      
</section>

Browser other questions tagged positioning parallax

You are not signed in. Login or sign up in order to post.