Scrolling Effect

3d

by techsin

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque facilis aperiam officia excepturi rem maxime tempore nam delectus voluptas iusto eveniet quis minima magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque facilis aperiam officia excepturi rem maxime tempore nam delectus voluptas iusto eveniet quis minima magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque facilis aperiam officia excepturi rem maxime tempore nam delectus voluptas iusto eveniet quis minima magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque facilis aperiam officia excepturi rem maxime tempore nam delectus voluptas iusto eveniet quis minima magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque facilis aperiam officia excepturi rem maxime tempore nam delectus voluptas iusto eveniet quis minima magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque facilis aperiam officia excepturi rem maxime tempore nam delectus voluptas iusto eveniet quis minima magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque facilis aperiam officia excepturi rem maxime tempore nam delectus voluptas iusto eveniet quis minima magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque facilis aperiam officia excepturi rem maxime tempore nam delectus voluptas iusto eveniet quis minima magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis culpa eligendi earum non repudiandae. Doloremque...

CSS

p {
    padding: 15px;
    line-height: 25px;
    background-color: rgb(20,200,180);
    font-family: "Helvetica";
    opacity: .2;
    -webkit-transition: opacity 1s;
}
p:nth-child(even) {
    background-color: rgb(200,200,100);
}

JavaScript

var p = $('p');


function ani() {
    p.each(function(){
        if(isScrolledIntoView($(this))) $(this).css('opacity',1);
        else $(this).css('opacity',.2);
    });
    requestAnimationFrame(ani);
}

ani();

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}