Executing Functions As You Scroll To Elements - jQuery showup

File Size: 7.55 KB
Views Total: 617
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Executing Functions As You Scroll To Elements - jQuery showup

showup is a jQuery plugin which triggers a function whenever an element is partially scrolled into view. With this plugin, you're able to apply fancy CSS animations to your elements when they become visible in the screen.

How to use it:

1. Include the showup plugin's scrip after you've loaded the latest jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.showup.js"></script>

2. Execute a function when the element is scrolled into view. It works on window resize event.

$('#element').showup(function(){
  // do something
});

3. A complete example:

<div id="black-box">Foo</div>
<div id="orange-box">Hello World!</div>
<div id="green-box">You've reached me finally!</div>
$(document).ready(function(){

  $('#orange-box').showup(function(){
      $('#black-box').html('Bar');
  });

  $('#green-box').showup(function(){
      $('#black-box').html('Foobar');
  });

});

This awesome jQuery plugin is developed by acostcc. For more Advanced Usages, please check the demo page or visit the official website.