Multimedia page on website

I have an idea for a team website that uses emerging and disappearing photos like this story of the NY: [login to view URL] It should replace our team page: [login to view URL] This is the idea: The first picture (of the inside page width) with the first name centered in the bottom quartile of the picture. When the user scrolls down the name moves up through the picture and changes the picture three times (we have a total of four photos per person, one for each quarter of the picture height) by fading out the old and fading in the new. When the user scrolls below the picture (and the name floats outside the picture on the top at the same time), a text (resumé) on white background follows (use current texts from team page) and the fourth picture floats upwards. Below first resumé, the first picture of the second person arrives. Same procedure: scrolling down changes the picture of that person four times, then below the picture the résumé text. There are ten resumés eventually, each with four pictures. For the name, use h2 heading code. For the text, use paragraph code, formatting as in current CSS. To insure fast page loading, first load all the text, then the first picture. Display text and first. Confirm first page load to browser. Then in the background, load the pictures that people can see on the screen. Only start loading pictures further below if they start scrolling down. Load pictures as they scroll down the page. This gives us a good page load rating at Google which is a factor for our Google page rank.