jQuery Plugin To Add Cool Effects On Page Scroll - O-ppear

O-ppear is a highly customizable jQuery Plugin which adds cool CSS effects to DOM elements when they enter into view. The plugin detects when element enters into view and adds a smooth transition effect to it on vertical page scrolling. You're also allowed to add custom CSS effects using your own styles.

Basic usage:

1. First you need to include the jQuery O-ppear plugin after you've loaded jQuery library.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="O-ppear.js"></script>

2. Just call the function on the target elements you want to animate and yo're done.

$('.element').Oppear();

3. Customize the plugin with the following paramters.

$('.element').Oppear({

  // modify the height that will DOM content will appear
  offset : 0,

  // default transition time
  transition : '2s',

  // delay time
  delay : 0,

  // direction of appearance.
  // up,right,down,left
  direction : 'up',

  // change slide distance
  distance : '50px',

  // If Disappear is true, then content will disappear when DOM content isn't in window. 
  // And the DOM content is in window again, then it will appear again.
  disappear : false,

  // use default CSS effects
  defaultCSS : true,

  // If oppear contents are at window area when page is loaded, you can select whether the contents appear automatically without no scroll one of example is main title of this page.
  firstAppear : false,

  // If you want to appear at other condition, then you can set the condition. Left side download menu is one of example.
  appearCondition : function(OppPosition,options){
    if($(document).scrollTop() + $(window).height() + options.offset >= OppPosition
        && $(document).scrollTop() + options.offset <= OppPosition){
        return true;
    }else{
        return false;
    }
  }
  
});

4. Apply your own CSS effects to DOM elements.

$('.disappear-example').Oppear({
  // options here
},{
  'CSS_property' : 'value'
});

Change log:

2016-03-24

• transition for webkit engine is added

---

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