Any ideas on how this is done?

 

http://kikk.be/

 

(the feathers)

<script type="[url=""]text/javascript[/url]">
	$(document).ready(function() {
		var iTop = $(window).scrollTop();

		$('.infinite-slider').iosSlider({
			snapToChildren: true,
			desktopClickDrag: true,
			infiniteSlider: true,
			keyboardControls: true,
			navPrevSelector: $("#bottom-slider-prev"),
			navNextSelector: $("#bottom-slider-next"),
			stageCSS: {
				overflow: 'hidden'
			}
		});

		$('.feather').each(function(index){
			var oFeather = $(this);
			var oPos = oFeather.position();
			var iFlag = iTop-oPos.top;

			oFeather.css('margin-top', -iFlag);

			$(window).scroll(function() {
				iTop = $(window).scrollTop();

				if(iTop > oPos.top - $(window).height()){
					iFlag = iTop-oPos.top;
					oFeather.css('margin-top', -iFlag);
				}else{
					oFeather.css('margin-top',0);
				};
			});
		});

		$('#bottom-slider .slider .item').mouseenter(function() {
			$(this).find('.cache').fadeOut();
		}).mouseleave(function() {
			$(this).find('.cache').fadeIn();
		});

		$('.ext-link').each(function(){
			var oElement = $(this);
			var sLink = oElement.attr('href');

			if(sLink){
				oElement.click(function(event){
					event.preventDefault();
					window.open(sLink);
				});
			};
		});

	}); 
</script>

 <div class="feather" id="feather-1"></div>
 <div class="feather" id="feather-2"></div>
 <div class="feather" id="feather-3"></div>
 <div class="feather" id="feather-4"></div>

 

thats what they have used, you just need to work it around your html css

Elite has given a far more thorough answer than I ever could, but if you're looking for more info look up 'parallax web design' or something similar on google.

Elite's answer is perfect Thanks