Download.zip View on Github

O-ppear

V 1.1.2

What is O-ppear?

O-ppear is animator detecting window scroll. You can check what is O-ppear clearly seeing below example. It is quiet easy to use.

NPM install

You can download using npm. 

npm install oppear

Quick Start

Import jQuery and O-ppear. 

<script src='jQuery.js'></script>
<script src='O-ppear.js'></script>

And just register class at the DOM selector. 

<div class='example1'>this is exmaple</div>
<script src='jQuery.js'>
    $('.example1').Oppear();
</script>
this is example

New Feature in 1.1

First Appear

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.

Parameter Data Type Default
firstAppear boolean false

Loader

If loading is quite long due to internet speed, page size or whatever, Oppear content looks quite weird while loading. So! here loader comes. When first Oppear contents loaded, loader will disappear. 

<script src='jQuery.js'>
    $('.loader').OppearLoader();
</script>

Disappear Function

you can make function that set the remove effect of loader.

Parameter Data Type Default
disAppear function please see below 
function($this){
    $this.fadeOut();
}

First parameter is selector that OppearLoader method is binded.

Multiple Assignment

You don't need to make several same code. just make one line, and type that DOM. Please below example. 

<div class='example1'>this is example.</div>
<div class='example1'>this is other example.</div>
<script src='jQuery.js'>
    $('.example1').Oppear();
</script>
this is example.
this is other example.

Offset

You can make to appear DOM content not at the end of window, you can modify the height that will DOM content will appear.

Parameter Data Type Default
offset Int 0 
<script src='jQuery.js'>
    $('.example2').Oppear({
        offset : 150,
    });
</script>
this is normal example.
this is '150 offset setted' example.

Appearance Direction

You can set direction of appearance.

Parameter Data Type Default Usage
direction String Up up,right,down,left 
<script src='jQuery.js'>
    $('.up-example').Oppear({
        direction : 'up'
    });
    $('.right-example').Oppear({
        direction : 'right'
    });
    $('.down-example').Oppear({
        direction : 'down'
    });
    $('.left-example').Oppear({
        direction : 'left'
    });
</script>
up
right
down
left

Slide Distance

And also you can change slide distance.

Parameter Data Type Default Usage
distance String 50px 10px,100px 
<script src='jQuery.js'>
    $('.distance-example').Oppear({
        distance : '100px',
    });
</script>
Normal
100px distance

Transition

You don't want a speed that DOM appear? Then change it!

Parameter Data Type Default Usage
transition String 2s 1s,500ms 
<script src='jQuery.js'>
    $('.transition-example').Oppear({
        transition : '0.5s',
    });
</script>
Normal
0.5s transition

Delay

If you want to let appear later, then set the delay.

Parameter Data Type Default Usage
delay Int 0 100,5000 
<script src='jQuery.js'>
    $('.delay-example').Oppear({
        delay : 500,
    });
</script>
Normal
500 delay

Disappearance

If Disappear is true, then content will disappear when DOM content isn't in window. The very first main title is one of example. And the DOM content is in window again, then it will appear again.

Parameter Data Type Default Usage
disappear boolean false true,false 
<script src='jQuery.js'>
    $('.disappear-example').Oppear({
        disappear : true
    });
</script>
Normal
Disappear

turn off Default effect

you can turn off default effect those are transform, and opacity by setting defaultCSS as false. One of example is at the left download menu.

Parameter Data Type Default
defaultCSS boolean true

Appearance Condition

If you want to appear at other condition, then you can set the condition. Left side download menu is one of example.

Parameter Data Type Default
appearCondition function Please see below

Default function 

function(OppPosition,options){
    if($(document).scrollTop() + $(window).height() + options.offset >= OppPosition
        && $(document).scrollTop() + options.offset <= OppPosition){
        return true;
    }else{
        return false;
}

If you return true, then content will appear and return false, content will disappear. OppPosition parameter is position of dom content, and options is parameter that you set at Oppear method.

Add other CSS

If you want other CSS effect, then you can add easily by adding your dictionary data at second parameter. 

<script src='jQuery.js'>
    $('.disappear-example').Oppear({
    },{
        'CSS_property' : 'value'
    });
</script>
color changed.