2

How to make a web page like the StackOverflow About page? I basically want to know what web technology is used to animate the elements as the user scrolls down to that particular place in the page?

I think it uses Jquery, but I haven't found a good place to learn making such a thing?

Can Somebody please explain how this is done, and possibly suggest a place to learn that?

Thanks.

2
  • 3
    and now everybody's got a new badge... Jul 2, 2013 at 9:10
  • Well javascript :D. It uses similar techniques that are used for parallax scrolling (often this is called that way, even if parallax scrolling is more about the pseudo 3d effect when scrolling in 2d.)
    – t.niese
    Jul 2, 2013 at 9:12

1 Answer 1

4

You should take a look at the source code, you'll see that it's using a lot of JS script and JQUERY

When the user scroll down the page a code like this one is called :

window.onscroll = function() { 
  var scroll = window.pageYOffset; 
  var Y = 100;
  var parrotW = 138;
  if (scroll < Y){

  }
  if(scroll > Y && scroll <  Y + parrotW){

  }else if (scroll > $(window).height()){

  }
}

which will allow you to control CSS Class like that :

$('#parrot').removeClass('slide');    
$('#parrot').removeClass('def');
$('#parrot').addClass('stuck');
$('#parrot').css('bottom', 0);

You can take a look at Codeschool which is a very great way to learn code

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .