Grow your CSS skills. Land your dream job.

Image Scrolling Not Smooth

  • # December 15, 2012 at 5:46 pm

    I am trying to create a very simple parallax scrolling effect just jQuery, CSS and an image but the problem is that it is not very smooth and very jerky.

    My object is to have a image move from the top right of the page to the bottom left as the user scrolls down the page.

    I need some help in achieving and more polished page, but either fixing my existing js or if you know how to implement a parallax plugin thats even better.

    I am able to send over all the required files if nessessary.

    Here is my current code:

    Javascript:

    $(document).scroll(function () {
    var ratio = window.pageYOffset / ( $(document).height() – $(window).height()) ;
    console.log( “scroll: ” + window.pageYOffset + “, ratio: ” + ratio );

    $( ‘#slash-1′ ).css( ‘top’, -160 + ( 4500 * ratio ) + ‘px’ );
    $( ‘#slash-1′ ).css( ‘left’, 960 – ( 960 * ( ratio ) ) + ‘px’ );

    $( ‘#slash-2′ ).css( ‘top’, -300 + ( 4500 * ratio ) + ‘px’ );
    $( ‘#slash-2′ ).css( ‘left’, 960 – ( 960 * ( ratio ) ) + ‘px’ );
    });

    HTML
    `

    `

    CSS
    `#slash-1 {
    position: absolute;
    top: 300px;
    left: 960px;
    }`

    # December 15, 2012 at 10:07 pm

    You should use `$(window)`. To get the scroll distance, just use `$(window).scrollTop()`:

    $(window).scroll(function() {
    var distance = $(this).scrollTop();
    $('#slash-1').css({
    'top': (distance*2) + 'px',
    'left': '-' + distance + 'px'
    });
    });

    See the demo here ⇒ http://jsfiddle.net/tovic/43eG7/58/

    I think you can develop the rest themselves :)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".