View on GitHub

jQuery.scrolling

Demo and Examples page

Download this project as a .zip file Download this project as a tar.gz file

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

The trigger will fire when the element top is inside the viewport scrolling area.

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:

Scroll-in and scroll-out this content to trigger each event.
This element will lose and gain opacity accordingly.

2. Show/Hide with offsets

Same as above with a negative offset of 200px. The trigger will fire when the element top is 200px inside the viewport scrolling area.

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:

Scroll-in and scroll-out this content to trigger each event.
This element will lose and gain opacity accordingly.

3. To-do

More to come!