JSFiddle - React, Tailwind, and code Playground

by Bruno Serrano

HTML

<div id='fader' class="post">If you can see me, you don't need glasses!</div>
<div id='fade_test'>aqui</div>

CSS

body{
    height: 20000px;
}
.post {
    text-align: center;
    opacity: 0;
    position: relative;
    margin-top: 1500px;
}

#fade_test{
    margin-top:50px;
}

JavaScript

var posts;
window.addEvent('domready', function () {
    posts = $$('.post');
})

window.addEvent('scroll', function (e) {
    var altura = window.getScroll().y;
    posts.each(function (post) {
        if (post.getPosition().y > altura + 400) return;
        post.fade('in');

    });
});