Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Simple Parallax Effect with smooth scrolling Jquery

    • 0
    • 2
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 443
    Comment on it

    Hello reader's,
    Below is the example for Simple Parallax Effect with smooth scrolling Jquery
    If you having trouble with such issues, the use the below code.

    Here is the HTML of Scroll trigger

    <div class="carousel-indicators">
            <a href="#home" title="Home"><img src="http://www.kidzjet.com/wp-content/themes/kidzetnew/images/home.png"></a>
            <a href="#video" title="What is KidzJet?"></a>
            <a href="#Why-us" title="Why us?"></a>
            <a href="#KID" title="Kids Transportation"></a>
            <a href="#institutions" title="Institution"></a>
            <a href="#Parent" title="Parent Groups"></a>
            <a href="#adve" title="KidzJet Adventures"></a>
            <a href="#bottom" title="Footer"><img src="http://www.kidzjet.com/wp-content/themes/kidzetnew/images/file-sharing.png"></a>
        </div>
    

    Here is the HTML of Parallax background

    <div id="institutions">
        <div id="tosca">
           <div class="section section-image extra-padding more-text-block">
            <div style="background-image: url(&quot;http://www.kidzjet.com/wp-content/themes/kidzetnew/images/institutions.png&quot;); background-position: 50% 33px;" class="bg-row">
            </div>
          </div>
        </div>
    </div>
    


    Here is the CSS

    .bg-row {
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: 0;
        left: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
    }
    .section-image.extra-padding {
        padding-top: 350px;
    }
    .no-touch .section-image .bg-row {
        background-attachment: fixed;
    }
    .section-image {
        padding-top: 180px;
    }
    .section {
        padding: 30px 0;
        position: relative;
    }
    .more-text-block {
        color: #fff;
        overflow: hidden;
    }

    Here is the Js

    Scroll trigger

       $('a[href*="#"]').click(function(e) {
          var $href = $(this).attr('href');
          if ( $href !== '#' ) {
            var $id = $href.split('#').pop();
            var $el = $('#' + $id);
            if ( $el.length > 0 ) {
              e.preventDefault();
              animateOffset( $el, 500, 'linear' );
            }
          }
        });
    


    Here is the Parallax Background Code

    Parallax background

     if ( !isMobile ) {
        var $window             = $(window),
        e                   = 'scroll orientationchange resize',
        paralaxElements     = $('.section-image').find('.bg-row'),
        scrollTop           = $window.scrollTop(),
        windowHeight        = $window.height(),
        parallaxing         = function(){
          var $this = $(this),
            elementPosition = $this.offset().top,
            elementHeight = $this.outerHeight();
    
          if ( elementPosition + elementHeight < scrollTop || scrollTop + windowHeight < elementPosition ) {return;}
          $this.css('background-position', '50% ' + Math.floor(elementPosition - scrollTop)*0.25 + 'px');
        },
    
        initParalax = function(){
          paralaxElements.each(parallaxing);
        };
    
        initParalax();
        $window.on(e, function(){
          scrollTop = $window.scrollTop();
          initParalax();
        });
      }
    })();
    

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: