Almost in view 1.0

by moob

HTML

<div class="almost-in-view">
    <h1>Animates elements that are about to enter the viewport.</h1>
<p>By default the plugin applies this method to items with the class .almost-in-view but you can initialise it in the standard jQuery way on any element you like.</p>
<xmp>$('.custom').almostInView({            
    speed: 1000,
    outOfViewClassName: 'out-of-view', 
    inViewClassName: 'in-view', 
    far: 200, 
    near: 80
});</xmp>
<p>
Basic animation is baked-in using jQuery.animate but you can use custom CSS animations should you wish:<br />
Set <code>speed:0</code> to disable the built-in animation. The plugin then applies the appropriate classnames as the target elements come into view.
</p>
</div>
<div class="almost-in-view">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, temporibus.</p>
    <p>Illo ea, est autem maiores. Sequi hic, reiciendis voluptatibus adipisci.</p>
    <p>Enim, reprehenderit, beatae. Hic, eaque, quod. Tenetur deserunt esse quo.</p>
    <p>Officiis consectetur eius, quo neque. In ea repellendus expedita. Dolorem.</p>
    <p>Debitis numquam aliquid, minima facere quaerat, eaque distinctio modi? Tenetur.</p>
</div>
<div class="almost-in-view">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, perferendis.</p>
    <p>Saepe voluptates fugiat similique soluta cumque vero sint iusto, accusantium!</p>
    <p>Ut quaerat nam nostrum dolorum nisi atque, sapiente. Error, nobis?</p>
    <p>Expedita excepturi sunt quas tempore non labore, sequi. Pariatur, libero.</p>
    <p>Quis quisquam dolorum optio nam provident voluptas quam autem dignissimos!</p>
</div>
<div class="almost-in-view">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, pariatur.</p>
    <p>Saepe, eligendi nihil totam dolorum reprehenderit! Repellat omnis neque quasi.</p>
    <p>Eos cumque voluptatum placeat eius nisi facere neque nesciunt praesentium.</p>
    <p>Eos qui consectetur voluptatem eum, labore...

CSS

html, body {
    margin:0;
}
.almost-in-view, .not-me {
    padding:20px;
    border:1px solid #aaa;
    margin:20px;
}
.not-me {
    color:red;
}
/* 
Basic animation is baked-in. To use custom animations you should set settings.speed:0
then create css animations yourself. These are the default classnames but they can be changed
*/
 .out-of-view {
    margin-top:200px;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}
.in-view {
    margin-top:20px!important;
    -webkit-transition: all 1000ms;
    -moz-transition: all 1000ms;
    -o-transition: all 1000ms;
    transition: all 1000ms;
}

JavaScript

/*! almostInView 1.0
 * ========================== 
 */  
(function ($) {

    var vph=0;
    function getViewportDimensions(){
        vph = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        //console.log(vph);
    }
    getViewportDimensions();
    
    //on resize/scroll
    $(window).on('resize orientationChanged', function(){
        getViewportDimensions();
    });
    
    
    
    $.fn.almostInView = function (options) {
        // default settings
        var settings = $.extend({            
            speed: 600, //ms (set to zero to use custom css animation)*
            outOfViewClassName: 'out-of-view', //default classname for if custom css animations are used
            inViewClassName: 'in-view', //default classname for if custom css animations are used
            far: 200, //how far the out-of-view item is pushed away (in px)
            near: 80, //the point at which the item is deemed to be 'almost' in view (in px)
        }, options);
        
        
        
        return this.each(function () {
            var el = $(this);
                        
            //on resize/scroll
            $(window).on('resize orientationChanged scroll', function(){
                checkInView();
            });
            
            var firstrun=true;
            function checkInView(){
                var rect = el[0].getBoundingClientRect(),
                    mt = (firstrun)?parseInt(el.css('margin-top')) : el.data('mt'),                    
                    animate = (settings.speed>0),
                    f = (!firstrun)?settings.far:0;
                    t = (rect.top - (f - settings.near));
                               
                if(!el.done){   
                    el.data('mt', 0+mt);
                    if(firstrun && t>vph){
                        if(animate){
                            el.css("margin-top",settings.far+"px");
                        } else {
                           ...