Parallax and Pin elements

Question

Parallax and Pin elements

Navigation

#1 by (0 votes)

0

I'm looking for a solution to perform a parallax effect and fix some elements as I go through screen sessions.

The idea of this is to join the parts of a shoe and mount it as the scroll scrolls.

Does anyone indicate any?

posicionamento parallax

asked by anonymous 17.08.2015 / 04:28

1 answer

Load SSL DLL - Delphi Jquery - Loop a function

score 0 · Answer 1

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 below script I prefer to put in the 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, 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>