A Pen by Riley Shaw.

index.html

<h1>Text fade-in</h1>
<p data-lining data-auto-resize>Now, this is a story all about how, My life got flipped-turned upside down, And I'd like to take a minute, Just sit right there, I'll tell you how I became the prince of a town called Bel Air! In west Philadelphia born and raised, On the playground was where I spent most of my days, Chillin' out maxin' relaxin' all cool, And all shootin some b-ball outside of the school, When a couple of guys who were up to no good, Started making trouble in my neighborhood, I got in one little fight and my mom got scared, She said 'You're movin' with your auntie and uncle in Bel Air'! I begged and pleaded with her day after day, But she packed my suit case and sent me on my way, She gave me a kiss and then she gave me my ticket, I put my Walkman on and said, 'I might as well kick it'! First class, yo this is bad, Drinking orange juice out of a champagne glass, Is this what the people of Bel-Air living like?, Hmmmmm this might be alright! But wait I hear they're prissy, bourgeois, all that, Is this the type of place that they just send this cool cat?, I don't think so, I'll see when I get there, I hope they're prepared for the prince of Bel-Air! Well, the plane landed and when I came out, There was a dude who looked like a cop standing there with my name out, I ain't trying to get arrested yet, I just got here, I sprang with the quickness like lightning, disappeared! I whistled for a cab and when it came near, The license plate said fresh and it had dice in the mirror, If anything I could say that this cab was rare, But I thought 'Nah, forget it' - 'Yo, homes to Bel Air'! I pulled up to the house about 7 or 8, And I yelled to the cabbie 'Yo homes smell ya later', I looked at my kingdom, I was finally there, To sit on my throne as the Prince of Bel Air.
<footer>by <a target="_blank" href="http://rileyjshaw.com">rileyjshaw</a></footer>

script.js

/*! Lining.js Lining.js v0.3.0 2014-11-05 */
!function(a,b){var c={STYLE:!0,SCRIPT:!0,LINK:!0,BR:!0},d={TEXTAREA:!0,IMG:!0,INPUT:!0,SELECT:!0,HR:!0},e={fireEvent:function(a,c,d){var e=b.createEvent("Event");return e.initEvent(c,!0,d),a.dispatchEvent(e)},createStyle:function(a){var c=b.createElement("style");c.type="text/css",c.styleSheet?c.styleSheet.cssText=a:c.appendChild(b.createTextNode(a)),b.getElementsByTagName("head")[0].appendChild(c)},init:function h(){h.inited||(h.inited=!0,e.createStyle("text-line {display:block;text-indent:0;}pre text-line {display:inline;}text-line[first-in-element]:first-child {text-indent:inherit;}"))},removeChildren:function(a,b,c){0>b&&(b=0);var d=a.childNodes,e=null==c?d.length:c;if(b>=e)return[];for(var f,g=[],h=e-1;h>=b;)f=d[h],g.push(f),a.removeChild(f),h--;return g},appendChildren:function(a,b){for(;b.length;)a.appendChild(b.pop())},splitNode:function(a,b){var c=a.parentNode,d=a.cloneNode(!1);return e.appendChildren(d,e.removeChildren(a,b)),c.insertBefore(d,a.nextSibling),c},getNodeOffset:function(a){for(var b=a,c=0;b=b.previousSibling;)c++;return c},isEmptyNode:function(a){if(3===a.nodeType)return""===a.nodeValue.trim();var b=a.nodeName;if(c[b])return!0;if(d[b])return!1;var f=a.childNodes;if(!f.length)return!0;for(var g=0,h=f.length;h>g;g++)if(!e.isEmptyNode(f[g]))return!1;return!0},getFirstContentNode:function(a){if(3===a.nodeType)return[a,0];if(d[a.nodeName])return[a.parentNode,e.getNodeOffset(a)];var b=a.firstChild;if(!e.isEmptyNode(b))return e.getFirstContentNode(b);for(var c=b;e.isEmptyNode(b);){if(c=b.nextSibling,!c)return null;b=c}return e.getFirstContentNode(b)},adjustOrSplitNode:function(a,b,c){for(var d,f;b!==a;){switch(d=b.parentNode,f=e.getNodeOffset(b),c){case 0:break;case b.childNodes.length:f++;break;default:e.splitNode(b,c),f++}b=d,c=f}return[b,c]},findContentSibling:function(a,b){var c=0,d=!0;b="forward"===b?"nextSibling":"previousSibling";for(var f=a[b];f;){if(!e.isEmptyNode(f)){d=!1;break}c++,f=f[b]}return[d,c]},isSupported:function(){if(null!=e.isSupported.re)return e.isSupported.re;var c=a.Selection,d=!!(c&&c.prototype&&c.prototype.modify);return b.documentElement.className+=" nolining",e.isSupported.re=d,d},isInLine:function(a,b){for(a=a.parentNode;b.contains(a);){if("TEXT-LINE"===a.nodeName)return!0;a=a.parentNode}return!1},getAllOutSideBr:function(a){for(var b,c=a.getElementsByTagName("br"),d=[],f=0,g=c.length;g>f;f++)b=c[f],e.isInLine(b,a)||d.push(b);return d}},f=function(a,b){var c=b||{};this._autoResize=null==c.autoResize?a.hasAttribute("data-auto-resize"):c.autoResize,this.from=c.from-1||parseInt(a.getAttribute("data-from"),10)-1||0,this.from=Math.max(this.from,0),this.to=c.to||parseInt(a.getAttribute("data-to"),10)||null,this.lineClassName=c.lineClass||a.getAttribute("data-line-class")||"line",this._e=a,this._oldWidth=-1,this.doc=null,this.win=null,this._ancestor=null,this._start=null,this._startOffset=0,this._end=null,this._endOffset=0,this._collapsed=!1,this.count=0,this._currentLine=null,this._inited=!1,e.init()};f.prototype.init=function(){var a=this;if(!a._inited){if(a._inited=!0,!e.isSupported())return void this._e.removeAttribute("data-lining");if(a.doc=a._e.ownerDocument,a.win=a.doc.defaultView,a.relining(),!this._autoResize)return a;var b;return a.win.addEventListener("resize",function(){b&&(clearTimeout(b),b=null),b=setTimeout(function(){a.relining()},1e3)},!1),a}},f.prototype.unlining=function(){if(e.isSupported()){e.fireEvent(this._e,"beforeunlining",!1);for(var a,b,c,d=this._e.getElementsByTagName("text-line"),f=0,g=d.length;g>f;f++)for(a=d[f],c=a.parentNode,b=e.removeChildren(a,0);b.length;)c.insertBefore(b.pop(),a);for(;d.length;)a=d[d.length-1],a.parentNode.removeChild(a);for(var h=e.getAllOutSideBr(this._e);h.length;)h.pop().style.display="block";this._e.normalize(),this._e.setAttribute("data-lining",""),this._currentLine=null,this._oldWidth=-1,this.count=0,e.fireEvent(this._e,"afterunlining",!1)}},f.prototype.relining=function(a){if(e.isSupported()){var b=this._e.offsetWidth,c=this._oldWidth>=0||"end"===this._e.getAttribute("data-lining"),d=a||this._oldWidth!==b;if((!c||d)&&e.fireEvent(this._e,"beforelining",!0)){c&&d&&this.unlining(),this._currentLine=null,this._oldWidth=b,this.count=this.from;for(var f=this.win.getSelection();this._selectNextLine(f);)this.count<this.from||this._createLine(f);this._currentLine&&(this._currentLine.setAttribute("last",""),this._adjustLine(this._currentLine,f)),f.removeAllRanges();for(var g=e.getAllOutSideBr(this._e);g.length;)g.pop().style.display="none";this._e.setAttribute("data-lining","end"),e.fireEvent(this._e,"afterlining",!1)}}},f.prototype._update=function(a){this._start=a.startContainer,this._startOffset=a.startOffset,this._end=a.endContainer,this._endOffset=a.endOffset,this._ancestor=a.commonAncestorContainer,this._collapsed=a.collapsed},f.prototype._setCursor=function(a,b,c){var d=c||this.win.getSelection(),e=this.doc.createRange();return e.setStart(a,b),e.collapse(!0),d.removeAllRanges(),d.addRange(e),e},f.prototype.selectLine=function(a){var b=this.win.getSelection();this._setCursor(this._e,0,b),b.modify("extend","forward","character"),b.modify("extend","forward","lineboundary");for(var c,d;a>1;){if(a--,c=b.getRangeAt(0),d=this._getNextLineStartPoint(c.endContainer,c.endOffset),!d)return b.removeAllRanges(),!1;this._setCursor(d[0],d[1],b),b.modify("extend","forward","character"),b.modify("extend","forward","lineboundary")}return this._update(b.getRangeAt(0)),!0},f.prototype._getNextLineStartPoint=function(a,b){var c;if(3===a.nodeType){if(""!==a.nodeValue.slice(b).trim())return[a,b];c=a,b=e.getNodeOffset(a)+1,a=a.parentNode}else c=a.childNodes[b-1];var d=e.findContentSibling(c,"forward"),f=d[0],g=d[1];return f?this._e.contains(a.parentNode)?this._getNextLineStartPoint(a.parentNode,e.getNodeOffset(a)+1):null:(b+=g,e.getFirstContentNode(a.childNodes[b]))},f.prototype._selectNextLine=function(a){if(this.to&&this.count>=this.to)return!1;var b=this._currentLine;if(b){var c=b,d=e.getNodeOffset(c)+1;c=c.parentNode;var f=this._getNextLineStartPoint(c,d);return f&&(this._setCursor(f[0],f[1],a),a.modify("extend","forward","character"),a.modify("extend","forward","lineboundary"),this._update(a.getRangeAt(0))),!!f}return this.selectLine(this.from+1)},f.prototype._getRange=function(){return this.win.getSelection().getRangeAt(0)},f.prototype._adjustLine=function(a,b){var c=this._setCursor(a,0,b);if(b.modify("extend","forward","character"),b.modify("extend","forward","lineboundary"),c=b.getRangeAt(0),this._update(c),a!==this._end&&a.contains(this._end)){this._adjustTextBoundary();var d=e.adjustOrSplitNode(a,this._end,this._endOffset);this._end=d[0],this._endOffset=d[1]}for(var f=e.removeChildren(this._end,this._endOffset),g=this._end.parentNode,h=this._end.nextSibling;f.length;)g.insertBefore(f.pop(),h)},f.prototype._createLine=function(a){var c=b.createElement("text-line");c.className=this.lineClassName,c.setAttribute("index",++this.count);try{this._getRange().surroundContents(c)}catch(d){this.surroundContents(c)}this._currentLine||c.setAttribute("first",""),this._currentLine=c,(!c.previousSibling||e.findContentSibling(c,"backward")[0])&&c.setAttribute("first-in-element",""),this._adjustLine(c,a)},f.prototype._adjustTextBoundary=function(){3===this._ancestor.nodeType&&(this._ancestor=this._ancestor.parentNode);var a=0,b=this._start,c=this._startOffset,d=b;3===b.nodeType&&(0!==c&&c!==b.nodeValue.length&&(d=b.splitText(c),this._start===this._end&&(a=this._start.nodeValue.length)),this._start=d.parentNode,this._startOffset=e.getNodeOffset(d));var f=a?this._end.nextSibling:this._end,g=this._endOffset-a;3===f.nodeType&&(0!==g&&g!==f.nodeValue.length&&f.splitText(g),this._end=f.parentNode,this._endOffset=e.getNodeOffset(f)+1)},f.prototype._adjustOrSplitNode=function(a){var b,c,d=this._ancestor;a?(b=this._start,c=this._startOffset):(b=this._end,c=this._endOffset);var f=e.adjustOrSplitNode(d,b,c);a?(this._start=f[0],this._startOffset=f[1]):(this._end=f[0],this._endOffset=f[1])},f.prototype.surroundContents=function(a){this._adjustTextBoundary(),this._adjustOrSplitNode(!0),this._adjustOrSplitNode(!1);var b=e.removeChildren(this._ancestor,this._startOffset,this._endOffset);e.appendChildren(a,b);var c=this._startOffset;this._ancestor.insertBefore(a,this._ancestor.childNodes[c])};var g=a.lining=function(a,c){return new f("string"==typeof a?b.getElementById(a):a,c).init()};g.Lining=f,g.util=e,a.addEventListener("load",function(){for(var a,c=b.querySelectorAll("[data-lining]"),d=0,e=c.length;e>d;d++)a=c[d],g(a)},!1)}(window,document);

function handler () {
  var scrollTop = $window.scrollTop() + threshold;
  $lines.each(function () {
    if ($(this).offset().top < scrollTop) $(this).addClass('visible');
    else $(this).removeClass('visible');
  });
}

function reline () {
  $lines = $('.line');
  handler();
}

function thresholder () {
  threshold = $window.height() * 5 / 6;
}

var $window = $(window);
var $p = $('p');
var $lines, threshold;

$p.on('afterlining', reline);
$window.scroll(handler);
$window.resize(thresholder);

thresholder();

style.sass

$fg: #97879c
$bg: #c4ffeb
  
body
  padding: 0 10%
  text-align: center
  background: $bg
  
h1, footer, a
  color: $fg
  
h1, footer
  font: 800 60px 'Open Sans', sans-serif
  text-transform: uppercase
  
footer
  font-size: 24px

p
  margin-bottom: 0
  font: 60px 'Gentium Basic', serif
  color: $bg
  
.line
  transition: color 0.4s
  &.visible
    color: $fg

footer
  height: 50vh
  line-height: 50vh
  

Text-fade-in-effect.markdown

Text fade-in effect

Scrappy implementation of a text fade-in effect using lining.js

A Pen by Riley Shaw on CodePen.

License.