fade in elements in view and fade out when out of view

Question

I am totally new to JavaScript, so I don't know anything about it. What I want is to fade the elements which are in view(center) and fade those in. When they are out of view, i want them to fade out again.

for example: So in the start you don't see anything. but if you start scrolling, textblock 1 fades in. when scrolling past this block, textblock 2 fades in under textblock 1. while textblock 2 is fading in, textblock 1 is fading out. When scrolling down further, textblock 1 is completely invisible. textblock 2 starts fading out and textblock 3 starts fading in under textblock 2.

Answer 1

hey you should look into this JQuery API.

Basically you will attach a sort of function to an element (i.e: div) in your Mark-Up (HTML). That when it comes into some sort of view of area of the page, you call the fade function form the JQuery Library.

The implementation of your function depends on your webpage and how it is setup.

Answer 2

jQuery is what you probably want to use for this case, please post your code so people can better help you but for a wild guess it would look something like this:

$('#txtblk1').fadeIn('slow', function() {
  //A function called after fadein is complete
 });

Prime explanation can be found on the jQuery API website as said above.