GAP Parallax

gap.js

function exGAP(){
    'use strict';
    $('.is__gap').each(function(){
        var t   = $(this),
            off = t.offset().top,
            step = t.data('step'),
            reverse = t.hasClass('__reverse') ? -1 : 1;
        if( screen() >= off - screen('height')) {
            t.css('background-position','50% '+ reverse * parseInt( ( screen() - off ) / (step || 4) , 10) + 'px');
        }
    });
}

$(window).scroll( exGAP );

gap.php

<?php if($flex['photos']) {
    echo '<div class="gap__wrap">';
    foreach($flex['photos'] as $img){
        echo '<div class="is__gap __reverse __gap100 __gap_fix" data-aload style="background-image: url(' . $img['url'] . ')"></div>';
    }
    echo '</div>';
} ?>

gap.scss

.is__gap {
    @include background-size(cover);
    background-repeat: no-repeat;
    background-position: 50% 0;
    position: relative;
    &.__gap100 {
        height: 100vh
    }
    &.__gap_fix {
        background-attachment: fixed
    }
}