Display specific elements sequentially on scroll

$(document).ready(function(){
 var window_y = 0;
  $(window).scroll(function(){
  window_y = $(window).scrollTop();
  var lis = $('#content .gallery li'); //replace here with your specific id and/or class
  var i = 0;
    if(window_y >= 250)
			{
      (function displayImages() {  
      lis.eq(i++).fadeIn(120, displayImages);  
      })();  
      }
  }).trigger('scroll');
});

And the basic CSS

#content .gallery li {display: none;}

Feature tours plugin

Create jQuery Feature Tours in a Breeze with Joyride: read more

Trigger a slide out section

First, we need a trigger somewhere in the page with the id “trigger”:

<div id="trigger">some content goes here</div>

Then, the code for the slide out section (the link with the class “close” will give the user the option to close the box and it will not appear again.)

<div id="slidebox">
	<a class="close">X</a>
	specific section content goes here
</div>

Some CSS

#slidebox{
    width:400px;
    height:100px;
    padding:10px;
    background-color:#fff;
    border-top:3px solid #E28409;
    position:fixed;
    bottom:0px;
    right:-430px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
}

And the magic

<script type="text/javascript">
$(function() {
	$(window).scroll(function(){
		var distanceTop = $('#trigger').offset().top - $(window).height();
		if  ($(window).scrollTop() > distanceTop)
			$('#slidebox').animate({'right':'0px'},300);
		else
			$('#slidebox').stop(true).animate({'right':'-430px'},100);
	});
	$('#slidebox .close').bind('click',function(){
		$(this).parent().remove();
	});
});
</script>