JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.js"></script>
<section data-slide="2" id="acqua">
     <h1>Papel Interfolhado<div class="ball"><img class="papel" src="img/papel.png"/></div></h1>

    <div id="descricao">
        <p>O papel toalha Safira tem qualidade
            <br/>e maciez comprovada.</p>
        <p>O guardanapo de papel Safira
            <br/>é ultra-absorvente</p>
        <p>É macio e foi feito pensando
            <br/>na consciência ambiental e na
            <br/>preservação do meio ambiente</p>
        <p>O papel toalha Safira tem qualidade
            <br/>e maciez comprovada.</p>
        <p>O guardanapo de papel Safira
            <br/>é ultra-absorvente</p>
        <p>É macio e foi feito pensando
            <br/>na consciência ambiental e na
            <br/>preservação do meio ambiente</p>
        <p>O papel toalha Safira tem qualidade
            <br/>e maciez comprovada.</p>
        <p>O guardanapo de papel Safira
            <br/>é ultra-absorvente</p>
        <p>É macio e foi feito pensando
            <br/>na consciência ambiental e na
            <br/>preservação do meio ambiente</p>
    </div>
</section>

CSS

@mixin respond-to($media) {
     @if $media==phone {
         @media (max-width: 767px) {
             @content;
         }
     }
     @if $media==except-phone {
         @media (min-width: 768px) {
             @content;
         }
     }
     @if $media==tablet {
         @media (min-width: 768px) and (max-width: 979px) {
             @content;
         }
     }
     @if $media==desktop {
         @media (min-width: 1200px) {
             @content;
         }
     }
 }
 @mixin row() {
     margin-left: $gridGutterWidth * -1;
     @media (max-width: 767px) {
         margin-left: 0;
     }
     @media (min-width: 768px) and (max-width: 979px) {
         margin-left: $gridGutterWidth768 * -1;
     }
     @media (min-width: 1200px) {
         margin-left: $gridGutterWidth1200 * -1;
     }
     @include clearfix();
 }
 @mixin column($columns: 1, $offset: 0) {
     float: left;
     margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
     width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
     @media (max-width: 767px) {
         float: none;
         display: block;
         width: 100%;
         margin-left: 0;
         @include box-sizing(border-box);
     }
     @media (min-width: 768px) and (max-width: 979px) {
         margin-left: ($gridColumnWidth768 * $offset) + ($gridGutterWidth768 * ($offset - 1)) + ($gridGutterWidth768 * 2);
         width: ($gridColumnWidth768 * $columns) + ($gridGutterWidth768 * ($columns - 1));
     }
     @media (min-width: 1200px) {
         margin-left: ($gridColumnWidth1200 * $offset) + ($gridGutterWidth1200 * ($offset - 1)) + ($gridGutterWidth1200 * 2);
         width: ($gridColumnWidth1200 * $columns) + ($gridGutterWidth1200 * ($columns - 1));
     }
 }
 .menu {
     left: 15%;
     position: relative;
     top: 45px;
 }
 .menu li a {
     color:#104e79;
 }
 .logo {
     height: 122px;
     left: 100px;
     position: relative;
     top: 20px;
 }
...

JavaScript

$(document).ready(function ($) {
    var elementos = $('section div p');
    elementos = elementos.map(function () {
        return {
            el: this,
            pos: $(this).position().top
        };
    });
    $(document).scroll(function () {
        var posicaoScroll = $(document).scrollTop();
        elementos.each(function () {
            if (this.pos < posicaoScroll) $(this.el).animate({
                'opacity': 1
            }, 500);
        })
    })
});