Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to change css class on page scroll using JQUERY/Javascript

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #45226
    KP1
    Participant

    Hi friends,

    Please visit the link- http://www.google.com/green/bigpicture/

    Slow load of images on page scroll looks cool. is there any idea about this smooth effect.

    #137250

    I’m writing this without testing, because lazy.
    it should work, probably xD

    $(function(){

    var images = $(‘.yourClass’)
    scrolledDistance = $(document).scrollTop()
    windowHeight = $(window).height()
    inView = scrolldDistance + windowHeight

    $(images).each(function(){
    var position = $(‘this’).position()
    topOffset = position.top
    if (inView <= topOffset ){
    $(this).css({‘opacity’:’0′})
    }
    })

    $(window).scroll(function () {
    //update scrolled distance
    scrolledDistance = $(document).scrollTop()
    $(images).each(function(){
    var position = $(‘this’).position()
    topOffset = position.top
    if (inView <= topOffset ){
    $(this).animate({‘opacity’:’0′},500)
    }
    })
    })

    })

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.