Demo and Examples

The following samples show the most common usages of the jquery.scrolling plugin.

For more information visit the plugin home page or the project archive on GitHub.

1. Basic Show/Hide

Code:

    
<script type="text/javascript">
	$(function() {
		$('#demo01').scrolling(); 
		
		$('#demo01').on('scrollin', function(event, $all_elements) {
		  $(this).animate({opacity: 1}, 600);
		});

		$('#demo01').on('scrollout', function(event, $all_elements) {
		  $(this).animate({opacity: 0}, 200);
		});
    });
</script>
<div id="demo01" class="example">
	Scroll-in and scroll-out this content to trigger each event.
	This element will lose and gain opacity accordingly.
</div>

Result:

2. Show/Hide with offsets

Code:

    
<script type="text/javascript">
	$(function() {
		$('#demo02').scrolling({ offsetTop: -200 }); 
		
		$('#demo02').on('scrollin', function(event, $all_elements) {
		  $(this).animate({opacity: 1}, 600);
		});

		$('#demo02').on('scrollout', function(event, $all_elements) {
		  $(this).animate({opacity: 0}, 200);
		});
    });
</script>
<div id="demo02" class="example">
	Scroll-in and scroll-out this content to trigger each event.
	This element will lose and gain opacity accordingly.
</div>

Result:

3. To-do