Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    parallax effect on div instead of the whole window

    Hi,
    I'm am trying to apply a bit of javascript (that i found online) into my website.
    It should give the parallax effect, and it works fine.
    Now my question is, how do i get the parallax effect to work just on a div called #homepage, instead of it working on the whole window?

    Thnx in advance,

    Code:
    <script>
    $(document).ready(function() {
    
        var $window = $(window);
        var $one = $('#one');
        var $two = $('#two');
        var $three = $('#three');
        var $four = $('#four');
        var cricket = $("#two .bg");
        
        var windowHeight = $window.height();
        
        $('#one, #two, #three, #four').bind('inview', function (event, visible) {
            if (visible == true) {
                $(this).addClass("inview");
                } else {
                $(this).removeClass("inview");
            }
        });
        
        function Navigation(){
            var windowHeight = $window.height(); 
            var navHeight = $('#navscroll').height() / 2;
            var windowCenter = (windowHeight / 2); 
            var newtop = windowCenter - navHeight;
            $('#navscroll').css({"top": newtop}); 
        }
        
        function movePos(x, windowHeight, pos, offset, speed){
            return x + "% " + (-((windowHeight + pos) - offset) * speed)  + "px";
        }
        
        function Parallax(){ 
            var pos = $window.scrollTop(); 
            if($one.hasClass("inview")){
                $one.css({'backgroundPosition': movePos(50, windowHeight, pos, 900, 0.3)}); 
            }
            if($two.hasClass("inview")){
                $two.css({'backgroundPosition': movePos(50, windowHeight, pos, 1250, 0.3)});
                cricket.css({'backgroundPosition': movePos(28, windowHeight, pos, 1800, 0.6)});
            }
            if($three.hasClass("inview")){
                $three.css({'backgroundPosition': movePos(50, windowHeight, pos, 2850, 0.3)});
            }
            
            if($four.hasClass("inview")){
                $four.css({'backgroundPosition': movePos(0, windowHeight, pos, 200, 0.9) + ", " + movePos(50, windowHeight, pos, 0, 0.7) + ", " + movePos(50, windowHeight, pos, 0, 0.5) + ", " + movePos(50, windowHeight, pos, 3700, 0.3)});
            }
            
        }
            
        Navigation(); 
        
        $window.resize(function(){ 
            Parallax(); 
            Navigation();
        });        
        
        $window.bind('scroll', function(){ 
            Parallax(); 
        });
        
    })(jQuery);
    </script>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Welcome to the forums jigga.
    And the HTML/CSS code is where?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •