richarddewit/check-visible.css

## check-visible.css
.check-visible {
  opacity: 0;
  transform: translateY(30px);
  transition-duration: .3s;
  transition-timing-function: ease;
  transition-property: opacity, transform;
}

.check-visible.is-visible {
  opacity: 1;
  transform: translateY(0);
}

## check-visible.js
jQuery(function($) {
    var $window = $(window);

    // jQuery extension
    // -----------------
    $.fn.visible = function(partial, topOnly) {
        var $this = $(this);
        var $window = $(window);
        var viewTop = $window.scrollTop();
        var viewBottom = viewTop + $window.height();
        var scrollOffset = 40;
        var top = $this.offset().top;
        var bottom = top + $this.height();
        var compareTop = partial === true ? bottom + scrollOffset : top;
        var compareBottom = partial === true ? top + scrollOffset : bottom;

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

    // Scroll handling
    // ----------------------
    var scrolling = false;
    $window.on('scroll', function() {
        if (!scrolling) {
            scrolling = true;

            if (!window.requestAnimationFrame) {
                setTimeout(onScroll, 250);
            } else {
                requestAnimationFrame(onScroll);
            }
        }
    });

    function onScroll() {
        checkVisibility();
        scrolling = false;
    }

    // The function
    // ---------
    function checkVisibility() {
        $('.check-visible').each(function(i, el) {
            var $el = $(el);
            if ($el.visible(true, true)) {
                $el.addClass("is-visible");
            }
        });
    }


    // Check on load
    $(checkVisibility);
});

## index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fade in on visible</title>
    <link rel="stylesheet" href="/check-visible">
</head>
<body>
<noscript>
    <style type="text/css">
        /*
         * If there's no JS, do the animation anyway but all at the same time
         * instead of checking whether it's visible first (which you can't
         * without JS)
         */
        .check-visible {
            transition-delay: 100ms;
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    </style>
</noscript>

<main style="width: 600px; max-width: 98%; margin: 20px auto;">
    <h1>Fade in on visible</h1>

    <section class="check-visible">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit enim idem caecus, debilis. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illa videamus, quae a te de amicitia dicta sunt. </p>

        <p>Equidem, sed audistine modo de Carneade? Ostendit pedes et pectus. Duo Reges: constructio interrete. </p>

        <p>Erat enim Polemonis. Respondeat totidem verbis. Atqui reperies, inquit, in hoc quidem pertinacem; Eam tum adesse, cum dolor omnis absit; Nosti, credo, illud: Nemo pius est, qui pietatem-; Sed residamus, inquit, si placet. Cui Tubuli nomen odio non est? Tollenda est atque extrahenda radicitus. </p>

        <p>Nunc de hominis summo bono quaeritur; Collatio igitur ista te nihil iuvat. Sed tamen intellego quid velit. <b>Et nemo nimium beatus est;</b> Graece donan, Latine voluptatem vocant. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. <i>An haec ab eo non dicuntur?</i> </p>

        <ul>
            <li>Deque his rebus satis multa in nostris de re publica libris sunt dicta a Laelio.</li>
            <li>Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere.</li>
            <li>Sapiens autem semper beatus est et est aliquando in dolore;</li>
        </ul>

        <p>Itaque hic ipse iam pridem est reiectus; Memini me adesse P. <b>Si longus, levis dictata sunt.</b> Pugnant Stoici cum Peripateticis. </p>
    </section>

    <section class="check-visible">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque his sapiens semper vacabit. <b>Deprehensus omnem poenam contemnet.</b> Eiuro, inquit adridens, iniquum, hac quidem de re; Bonum incolumis acies: misera caecitas. <b>Sed ego in hoc resisto;</b> Est, ut dicis, inquam. Nulla erit controversia. </p>

        <ul>
            <li>Idem iste, inquam, de voluptate quid sentit?</li>
            <li>His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent.</li>
            <li>At iam decimum annum in spelunca iacet.</li>
            <li>Si verbum sequimur, primum longius verbum praepositum quam bonum.</li>
            <li>Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit?</li>
        </ul>

        <p>Duo Reges: constructio interrete. Nulla erit controversia. Quare ad ea primum, si videtur; Quare conare, quaeso. </p>

        <p>Dici enim nihil potest verius. Sed ad bona praeterita redeamus. Animum autem reliquis rebus ita perfecit, ut corpus; Quae contraria sunt his, malane? Quae est igitur causa istarum angustiarum? Graece donan, Latine voluptatem vocant. </p>

        <p>Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Sin aliud quid voles, postea. <a href='http://loripsum.net/' target='_blank'>At hoc in eo M.</a> Recte, inquit, intellegis. <a href='http://loripsum.net/' target='_blank'>Ratio enim nostra consentit, pugnat oratio.</a> Hic ambiguo ludimur. </p>

        <p>Quid, de quo nulla dissensio est? Contineo me ab exemplis. Inde igitur, inquit, ordiendum est. Idemque diviserunt naturam hominis in animum et corpus. Sed fac ista esse non inportuna; </p>
    </section>

    <section class="check-visible">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Sed hoc sane concedamus. Primum in nostrane potestate est, quid meminerimus? Si quidem, inquit, tollerem, sed relinquo. Quis enim redargueret? </p>

        <p><i>Bestiarum vero nullum iudicium puto.</i> Hoc simile tandem est? Tibi hoc incredibile, quod beatissimum. <mark>Bonum integritas corporis: misera debilitas.</mark> Audeo dicere, inquit. </p>

        <p><b>Omnis enim est natura diligens sui.</b> <a href='http://loripsum.net/' target='_blank'>Ratio quidem vestra sic cogit.</a> Age, inquies, ista parva sunt. </p>

        <ul>
            <li>Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim.</li>
            <li>Sed plane dicit quod intellegit.</li>
            <li>Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim.</li>
            <li>Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere.</li>
            <li>Graece donan, Latine voluptatem vocant.</li>
            <li>Hoc est non modo cor non habere, sed ne palatum quidem.</li>
        </ul>

        <p>Negare non possum. <i>Duo Reges: constructio interrete.</i> Et ille ridens: Video, inquit, quid agas; An hoc usque quaque, aliter in vita? </p>

        <p><i>Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse;</i> Idem iste, inquam, de voluptate quid sentit? At certe gravius. Quid sequatur, quid repugnet, vident. </p>
    </section>

    <section class="check-visible">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis non odit sordidos, vanos, leves, futtiles? <b>Igitur ne dolorem quidem.</b> Nunc vides, quid faciat. </p>

        <p><i>Sed ad bona praeterita redeamus.</i> <i>Cur, nisi quod turpis oratio est?</i> Utilitatis causa amicitia est quaesita. Non quam nostram quidem, inquit Pomponius iocans; <i>Quae ista amicitia est?</i> Omnis enim est natura diligens sui. Odium autem et invidiam facile vitabis. Bonum integritas corporis: misera debilitas. </p>

        <p>Satis est ad hoc responsum. Et nemo nimium beatus est; Sed residamus, inquit, si placet. Satis est ad hoc responsum. Bonum incolumis acies: misera caecitas. </p>

        <p>Duo Reges: constructio interrete. Quod autem principium officii quaerunt, melius quam Pyrrho; Sed mehercule pergrata mihi oratio tua. Idem adhuc; Satis est ad hoc responsum. <a href='http://loripsum.net/' target='_blank'>Et harum quidem rerum facilis est et expedita distinctio.</a> </p>

        <p>Quod quidem iam fit etiam in Academia. ALIO MODO. Quid est enim aliud esse versutum? </p>
    </section>

    <section class="check-visible">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Satis est ad hoc responsum. Quae diligentissime contra Aristonem dicuntur a Chryippo. </p>

        <p><b>Duo Reges: constructio interrete.</b> <i>Quo studio Aristophanem putamus aetatem in litteris duxisse?</i> <a href='http://loripsum.net/' target='_blank'>Sic consequentibus vestris sublatis prima tolluntur.</a> Nam Pyrrho, Aristo, Erillus iam diu abiecti. At coluit ipse amicitias. Respondeat totidem verbis. </p>

        <ul>
            <li>Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P.</li>
            <li>Inde igitur, inquit, ordiendum est.</li>
            <li>Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines.</li>
            <li>Totum autem id externum est, et quod externum, id in casu est.</li>
        </ul>

        <p>Is es profecto tu. Quod autem in homine praestantissimum atque optimum est, id deseruit. Idemne, quod iucunde? Tu vero, inquam, ducas licet, si sequetur; </p>

        <p><i>Quae diligentissime contra Aristonem dicuntur a Chryippo.</i> <i>Profectus in exilium Tubulus statim nec respondere ausus;</i> Bonum patria: miserum exilium. Sed fortuna fortis; <a href='http://loripsum.net/' target='_blank'>Istam voluptatem perpetuam quis potest praestare sapienti?</a> <b>Eam stabilem appellas.</b> </p>

        <p>Omnes enim iucundum motum, quo sensus hilaretur. Quid turpius quam sapientis vitam ex insipientium sermone pendere? </p>
    </section>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/check-visible.js"></script>
</body>
</html>
	.check-visible {
	opacity: 0;
	transform: translateY(30px);
	transition-duration: .3s;
	transition-timing-function: ease;
	transition-property: opacity, transform;
	}

	.check-visible.is-visible {
	opacity: 1;
	transform: translateY(0);
	}
	jQuery(function($) {
	var $window = $(window);

	// jQuery extension
	// -----------------
	$.fn.visible = function(partial, topOnly) {
	var $this = $(this);
	var $window = $(window);
	var viewTop = $window.scrollTop();
	var viewBottom = viewTop + $window.height();
	var scrollOffset = 40;
	var top = $this.offset().top;
	var bottom = top + $this.height();
	var compareTop = partial === true ? bottom + scrollOffset : top;
	var compareBottom = partial === true ? top + scrollOffset : bottom;

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

	// Scroll handling
	// ----------------------
	var scrolling = false;
	$window.on('scroll', function() {
	if (!scrolling) {
	scrolling = true;

	if (!window.requestAnimationFrame) {
	setTimeout(onScroll, 250);
	} else {
	requestAnimationFrame(onScroll);
	}
	}
	});

	function onScroll() {
	checkVisibility();
	scrolling = false;
	}

	// The function
	// ---------
	function checkVisibility() {
	$('.check-visible').each(function(i, el) {
	var $el = $(el);
	if ($el.visible(true, true)) {
	$el.addClass("is-visible");
	}
	});
	}



	// Check on load
	$(checkVisibility);
	});
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Fade in on visible</title>
	<link rel="stylesheet" href="/check-visible">
	</head>
	<body>
	<noscript>
	<style type="text/css">
	/*
	* If there's no JS, do the animation anyway but all at the same time
	* instead of checking whether it's visible first (which you can't
	* without JS)
	*/
	.check-visible {
	transition-delay: 100ms;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	</style>
	</noscript>

	<main style="width: 600px; max-width: 98%; margin: 20px auto;">
	<h1>Fade in on visible</h1>

	<section class="check-visible">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit enim idem caecus, debilis. Quo plebiscito decreta a senatu est consuli quaestio Cn. Illa videamus, quae a te de amicitia dicta sunt. </p>

	<p>Equidem, sed audistine modo de Carneade? Ostendit pedes et pectus. Duo Reges: constructio interrete. </p>

	<p>Erat enim Polemonis. Respondeat totidem verbis. Atqui reperies, inquit, in hoc quidem pertinacem; Eam tum adesse, cum dolor omnis absit; Nosti, credo, illud: Nemo pius est, qui pietatem-; Sed residamus, inquit, si placet. Cui Tubuli nomen odio non est? Tollenda est atque extrahenda radicitus. </p>

	<p>Nunc de hominis summo bono quaeritur; Collatio igitur ista te nihil iuvat. Sed tamen intellego quid velit. <b>Et nemo nimium beatus est;</b> Graece donan, Latine voluptatem vocant. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. <i>An haec ab eo non dicuntur?</i> </p>

	<ul>
	<li>Deque his rebus satis multa in nostris de re publica libris sunt dicta a Laelio.</li>
	<li>Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere.</li>
	<li>Sapiens autem semper beatus est et est aliquando in dolore;</li>
	</ul>

	<p>Itaque hic ipse iam pridem est reiectus; Memini me adesse P. <b>Si longus, levis dictata sunt.</b> Pugnant Stoici cum Peripateticis. </p>
	</section>

	<section class="check-visible">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque his sapiens semper vacabit. <b>Deprehensus omnem poenam contemnet.</b> Eiuro, inquit adridens, iniquum, hac quidem de re; Bonum incolumis acies: misera caecitas. <b>Sed ego in hoc resisto;</b> Est, ut dicis, inquam. Nulla erit controversia. </p>

	<ul>
	<li>Idem iste, inquam, de voluptate quid sentit?</li>
	<li>His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent.</li>
	<li>At iam decimum annum in spelunca iacet.</li>
	<li>Si verbum sequimur, primum longius verbum praepositum quam bonum.</li>
	<li>Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit?</li>
	</ul>

	<p>Duo Reges: constructio interrete. Nulla erit controversia. Quare ad ea primum, si videtur; Quare conare, quaeso. </p>

	<p>Dici enim nihil potest verius. Sed ad bona praeterita redeamus. Animum autem reliquis rebus ita perfecit, ut corpus; Quae contraria sunt his, malane? Quae est igitur causa istarum angustiarum? Graece donan, Latine voluptatem vocant. </p>

	<p>Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Sin aliud quid voles, postea. <a href='http://loripsum.net/' target='_blank'>At hoc in eo M.</a> Recte, inquit, intellegis. <a href='http://loripsum.net/' target='_blank'>Ratio enim nostra consentit, pugnat oratio.</a> Hic ambiguo ludimur. </p>

	<p>Quid, de quo nulla dissensio est? Contineo me ab exemplis. Inde igitur, inquit, ordiendum est. Idemque diviserunt naturam hominis in animum et corpus. Sed fac ista esse non inportuna; </p>
	</section>

	<section class="check-visible">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Sed hoc sane concedamus. Primum in nostrane potestate est, quid meminerimus? Si quidem, inquit, tollerem, sed relinquo. Quis enim redargueret? </p>

	<p><i>Bestiarum vero nullum iudicium puto.</i> Hoc simile tandem est? Tibi hoc incredibile, quod beatissimum. <mark>Bonum integritas corporis: misera debilitas.</mark> Audeo dicere, inquit. </p>

	<p><b>Omnis enim est natura diligens sui.</b> <a href='http://loripsum.net/' target='_blank'>Ratio quidem vestra sic cogit.</a> Age, inquies, ista parva sunt. </p>

	<ul>
	<li>Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim.</li>
	<li>Sed plane dicit quod intellegit.</li>
	<li>Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim.</li>
	<li>Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere.</li>
	<li>Graece donan, Latine voluptatem vocant.</li>
	<li>Hoc est non modo cor non habere, sed ne palatum quidem.</li>
	</ul>

	<p>Negare non possum. <i>Duo Reges: constructio interrete.</i> Et ille ridens: Video, inquit, quid agas; An hoc usque quaque, aliter in vita? </p>

	<p><i>Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse;</i> Idem iste, inquam, de voluptate quid sentit? At certe gravius. Quid sequatur, quid repugnet, vident. </p>
	</section>

	<section class="check-visible">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis non odit sordidos, vanos, leves, futtiles? <b>Igitur ne dolorem quidem.</b> Nunc vides, quid faciat. </p>

	<p><i>Sed ad bona praeterita redeamus.</i> <i>Cur, nisi quod turpis oratio est?</i> Utilitatis causa amicitia est quaesita. Non quam nostram quidem, inquit Pomponius iocans; <i>Quae ista amicitia est?</i> Omnis enim est natura diligens sui. Odium autem et invidiam facile vitabis. Bonum integritas corporis: misera debilitas. </p>

	<p>Satis est ad hoc responsum. Et nemo nimium beatus est; Sed residamus, inquit, si placet. Satis est ad hoc responsum. Bonum incolumis acies: misera caecitas. </p>

	<p>Duo Reges: constructio interrete. Quod autem principium officii quaerunt, melius quam Pyrrho; Sed mehercule pergrata mihi oratio tua. Idem adhuc; Satis est ad hoc responsum. <a href='http://loripsum.net/' target='_blank'>Et harum quidem rerum facilis est et expedita distinctio.</a> </p>

	<p>Quod quidem iam fit etiam in Academia. ALIO MODO. Quid est enim aliud esse versutum? </p>
	</section>

	<section class="check-visible">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Satis est ad hoc responsum. Quae diligentissime contra Aristonem dicuntur a Chryippo. </p>

	<p><b>Duo Reges: constructio interrete.</b> <i>Quo studio Aristophanem putamus aetatem in litteris duxisse?</i> <a href='http://loripsum.net/' target='_blank'>Sic consequentibus vestris sublatis prima tolluntur.</a> Nam Pyrrho, Aristo, Erillus iam diu abiecti. At coluit ipse amicitias. Respondeat totidem verbis. </p>

	<ul>
	<li>Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P.</li>
	<li>Inde igitur, inquit, ordiendum est.</li>
	<li>Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines.</li>
	<li>Totum autem id externum est, et quod externum, id in casu est.</li>
	</ul>

	<p>Is es profecto tu. Quod autem in homine praestantissimum atque optimum est, id deseruit. Idemne, quod iucunde? Tu vero, inquam, ducas licet, si sequetur; </p>

	<p><i>Quae diligentissime contra Aristonem dicuntur a Chryippo.</i> <i>Profectus in exilium Tubulus statim nec respondere ausus;</i> Bonum patria: miserum exilium. Sed fortuna fortis; <a href='http://loripsum.net/' target='_blank'>Istam voluptatem perpetuam quis potest praestare sapienti?</a> <b>Eam stabilem appellas.</b> </p>

	<p>Omnes enim iucundum motum, quo sensus hilaretur. Quid turpius quam sapientis vitam ex insipientium sermone pendere? </p>
	</section>
	</main>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="/check-visible.js"></script>
	</body>
	</html>