<style>
p {
opacity: 0;
transition: opacity 1s linear;
}
p.show {
opacity: 1;
}
</style>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor nisl a efficitur consequat. Phasellus facilisis nisl in bibendum tempor. Mauris porttitor est lacus, ac mollis erat facilisis quis. Phasellus bibendum lorem fermentum nibh pellentesque, eu vulputate arcu ornare. Curabitur mollis, orci ac vestibulum mollis, ligula dui tempus sapien, nec venenatis nisl tortor at mauris. Nunc ultricies lectus et erat mollis tincidunt. In hac habitasse platea dictumst. Fusce turpis lacus, convallis interdum vehicula vulputate, tincidunt sit amet metus. Nullam id pulvinar nisi. Fusce eu sodales velit. Suspendisse potenti. Integer sed mi et dui consequat sodales in nec neque.
</p>
<p>
Ut vitae malesuada nibh. Phasellus vel libero velit. Aenean sed dui nisi. Pellentesque laoreet eros ac tellus condimentum, maximus porttitor nunc laoreet. Aenean sed nisl vel elit dictum placerat. Curabitur feugiat mollis ex, non ultricies augue molestie in. Proin malesuada libero sit amet urna placerat, sed placerat ex fermentum. Nulla molestie metus sed risus fringilla sagittis. Fusce sit amet diam fringilla, scelerisque risus eget, molestie urna. Duis tristique nulla vel justo sollicitudin, eu egestas tellus commodo.
</p>
<p>
Donec bibendum dui a lectus scelerisque dignissim. Quisque convallis volutpat neque id tincidunt. Proin malesuada ligula vitae ligula lacinia sagittis. Etiam semper id dolor at auctor. Praesent ligula nisi, cursus ut velit vitae, ultricies volutpat orci. Donec blandit elit vel ligula posuere, sed vulputate quam porttitor. Vestibulum tempor ante turpis, ac rhoncus neque commodo vestibulum. Ut ante justo, euismod a semper a, molestie ac urna. Donec vel augue luctus, vehicula justo vel, dictum nulla. Sed quis lacus erat. Donec sed orci luctus, laoreet nisi sed, viverra eros.
</p>
<p>
Suspendisse bibendum tellus quam, id interdum elit tincidunt semper. Ut euismod suscipit turpis, vel mollis sapien. Vivamus lectus est, semper a ex id, laoreet dictum lorem. Etiam vitae tristique tortor, in posuere lacus. Nullam eget nibh id ante commodo mattis. Aliquam posuere pulvinar sapien, sit amet pulvinar magna commodo et. Sed urna nunc, pulvinar sit amet iaculis eget, posuere eget sem. Fusce mollis vel purus in volutpat. Aliquam erat volutpat.
</p>
<p>
Vestibulum et justo a lectus efficitur dictum vitae id nunc. Donec sed massa tincidunt, luctus sem at, lacinia quam. Nunc quis placerat enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer fringilla massa eu massa volutpat, eget cursus odio ornare. Vivamus viverra, ante non volutpat dapibus, ipsum justo convallis urna, nec interdum felis felis non sapien. Nullam sed nulla eget sem rhoncus euismod. Curabitur porttitor libero quam, et dapibus dolor porttitor at. Donec et bibendum orci.
</p>
<p>
Aliquam nec leo eget nisl pellentesque viverra quis eleifend velit. Vestibulum suscipit diam vel nulla congue, a posuere nulla tristique. Vivamus neque risus, venenatis vel arcu non, fringilla hendrerit tortor. Phasellus lacinia augue at nisl egestas mattis. Praesent quis metus volutpat, posuere ipsum eget, facilisis purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam tempor viverra nunc nec ultricies. Nullam a egestas nulla, vitae egestas libero. Pellentesque facilisis quis justo eget pharetra. Curabitur hendrerit dapibus velit in consequat. Nunc maximus pellentesque odio, posuere malesuada tellus posuere fringilla. Cras vitae dolor rutrum, maximus libero at, accumsan velit.
</p>
<p>
Nunc in turpis dapibus, commodo justo in, faucibus lectus. Vivamus placerat, mauris et pretium gravida, est nulla porttitor lorem, in molestie tellus leo at elit. Sed vel purus sit amet erat fermentum lacinia. Sed porttitor mauris eget volutpat tincidunt. Ut condimentum leo a consectetur luctus. Sed malesuada iaculis sapien, vel lobortis orci eleifend quis. Ut nisl lectus, fringilla sodales cursus ut, laoreet sed turpis. Suspendisse tortor ex, finibus id euismod in, fringilla ut velit. Quisque accumsan urna a blandit venenatis. Etiam condimentum, sapien vitae efficitur aliquam, turpis erat luctus lacus, eget euismod dolor dui sed sem. Ut viverra, elit ut volutpat aliquam, erat arcu hendrerit urna, in aliquam augue nulla sed risus. Fusce at metus augue. Cras aliquam mollis feugiat. Nullam ante eros, pulvinar quis accumsan ut, hendrerit et arcu. In varius risus in erat aliquet congue.
</p>
<p>
Nam vel lacus ut felis eleifend facilisis. Quisque consequat a urna varius laoreet. Donec nec congue massa. Nullam tempus velit pretium pretium rutrum. Nulla pulvinar purus at ante ornare efficitur. Vestibulum gravida justo id nisi posuere, in scelerisque odio malesuada. Quisque a risus elit. Etiam nisi nisi, fermentum at facilisis quis, hendrerit ut sem. Quisque consequat feugiat augue, vitae rhoncus eros rhoncus et. Quisque sodales dignissim elit, eget bibendum nibh tempor in. Nam lectus nulla, aliquam id egestas ut, varius sed neque. Sed venenatis molestie ipsum, sed suscipit nulla sollicitudin vitae. Phasellus aliquam sagittis lorem eu pretium. In eros tellus, lacinia et egestas vitae, laoreet quis diam. Mauris tincidunt pellentesque turpis dapibus semper.
</p>
<p>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non laoreet nunc. Fusce blandit dui vel mi volutpat efficitur. Donec maximus, arcu non sodales mattis, sem nunc blandit est, ut luctus quam justo ut velit. In quis augue vitae risus auctor posuere. Cras tristique suscipit nisl non bibendum. Suspendisse venenatis ullamcorper turpis eget mollis. Maecenas porta, massa non feugiat vestibulum, dolor purus vehicula odio, vel iaculis libero purus non nibh. Maecenas congue ipsum id bibendum rhoncus. Etiam feugiat maximus massa vel molestie. Nunc finibus tortor eu sem sodales, sed egestas enim tincidunt. Vestibulum mollis mauris vitae mollis ornare. Vestibulum gravida purus enim, et tempor neque faucibus ut.
</p>
<p>
Morbi iaculis, metus quis pharetra commodo, erat lorem viverra augue, a egestas orci lacus eget ligula. Pellentesque accumsan nibh ac nulla aliquam, et consectetur metus lacinia. Proin quis iaculis nibh, at rutrum urna. Cras ullamcorper porttitor ipsum, eu consequat nisl aliquam in. Morbi vehicula velit a neque luctus, vel commodo dui pulvinar. Mauris consectetur id turpis a condimentum. Proin rhoncus viverra ligula, vitae tempor massa. Aliquam erat volutpat. Pellentesque vitae mi et augue rhoncus porttitor. Sed vel mattis massa. Nullam quis iaculis nibh. Suspendisse eget dapibus neque. Sed efficitur posuere sapien non pulvinar. Etiam ut semper purus. In hac habitasse platea dictumst.
</p>
<p>
Phasellus non sapien in libero consequat rhoncus. Aliquam a tortor ut metus scelerisque congue ut nec velit. Maecenas sit amet mattis urna. Aenean facilisis dui a justo vulputate, et sollicitudin diam aliquam. Nullam finibus magna eu eros facilisis laoreet. Aenean sed congue tellus. Mauris quis molestie sapien. Etiam suscipit neque risus, at gravida justo efficitur ut. In ullamcorper sodales ex eget ultricies. Duis lacinia imperdiet lacus nec aliquam. Praesent sed auctor odio, eu gravida nisl.
</p>
<p>
Etiam est erat, venenatis ut vulputate in, dapibus et velit. Aenean pulvinar justo in pretium lacinia. Fusce nec sapien id ante laoreet interdum at ut est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eleifend mollis rhoncus. Vivamus ut iaculis metus. Ut pharetra massa urna, in posuere quam pretium a. Morbi maximus aliquet eros, id luctus sem semper eget. Integer accumsan sollicitudin arcu, et mollis elit feugiat in. Ut facilisis lacus risus, vel tempor enim tincidunt in. Suspendisse eu nulla turpis. Proin eget lectus euismod, gravida sem ac, ullamcorper est. Proin ornare vehicula arcu eget egestas. Curabitur maximus malesuada tellus vel viverra. Vivamus at ex iaculis, suscipit ligula et, blandit nunc. Nulla facilisi.
</p>
<p>
Suspendisse tincidunt massa vitae laoreet ornare. In quam enim, aliquet quis nulla non, iaculis feugiat odio. Duis sed justo placerat, fermentum diam accumsan, blandit purus. Aliquam nibh mi, vehicula eu lobortis ac, tempor eget neque. Suspendisse ligula lectus, pharetra sed turpis at, porttitor semper mi. Donec vitae lacus at massa tincidunt dapibus nec eu dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam non pretium purus, a molestie elit. Mauris sodales eros orci, ac viverra metus pulvinar sed. Mauris quam nisl, laoreet a nibh at, auctor rutrum dui.
</p>
<p>
Nam a ligula porttitor, sollicitudin arcu eu, scelerisque orci. Nunc eu quam quam. Vivamus volutpat a est eget maximus. Sed pretium quam varius sapien rhoncus hendrerit. Mauris mollis urna nibh, rutrum maximus odio ultricies ac. Cras euismod est eu quam sodales, ut lacinia eros tristique. Pellentesque accumsan vulputate metus in euismod.
</p>
</div>
<script>
window.onscroll = function() {
Array.prototype.forEach.call(document.querySelectorAll('p'), function(elem) {
var rect = elem.getBoundingClientRect();
if ((rect.top >= 0 && rect.top <= document.body.clientHeight) ||
(rect.bottom >= 0 && rect.bottom <= document.body.clientHeight)) {
elem.className = 'show';
} else {
elem.className = '';
}
});
}
// при загрузке страницы
window.onscroll();
</script>
