JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div ng-app="myApp" slideup-root>
    <section>
        <div class="module" slideup-element></div>
        <div class="module" slideup-element></div>
    </section>
</div>

CSS

.come-in {
    transform: translateY(150px);
    animation: come-in 0.8s ease forwards;
}

@keyframes come-in {
    to {
        transform: translateY(0);
    }
}

section {
    background: #eee;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
}

.module {
    width: 48%;
    min-height: 200px;
    background: white;
    position: relative;
    float: left;
    padding: 20px;
    margin-right: 4%;
    margin-bottom: 4%;
    &:nth-child(even) {
        margin-right: 0;
    }
    box-shadow: 0 1px 3px rgba(black, 0.2);
}

JavaScript

console.log('jddj');
app = angular.module('myApp', []);

app.controller("slideupRootController", ["$window", "$rootScope", function($window, $rootScope) {
    debugger;

    function visible(partial, element) {
        var $t = $(element),
            $w = $(window),
            viewTop = $w.scrollTop(),
            viewBottom = viewTop + $w.height(),
            _top = $t.offset().top,
            _bottom = _top + $t.height(),
            compareTop = partial === true ? _bottom : _top,
            compareBottom = partial === true ? _top : _bottom;

        return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
    }

    angular.element($window).bind("scroll", function() {
        var justShown = [];

        $rootScope.slideup.forEach(function(element) {
            if (visible(true, element)) {
                element[0].classList.add("come-in");
                justShown.push(element);
            }
        });

        justShown.forEach(function(element) {
            $rootScope.slideup.splice($rootScope.slideup.indexOf(element), 1);
        });

    });
}]);

app.directive("slideupRoot", function($window, $rootScope) {
    return {
        restrict: "A",
        scope: false,
        controller: "slideupRootController"
    };
});

app.directive("slideupElement", function($rootScope) {
    return {
        require: "slideupRoot",
        restrict: "A",
        scope: false,
        link: function(scope, element, attrs, slideupRootController) {
            debugger;
            $rootScope.slideup = $rootScope.slideup || [];
            $rootScope.slideup.push(element);
        }
    };
});