lining.js/build/lining.effect.min.js

An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.

/*! lining.effect.min.js v0.3.2 2014-11-19 */
!function(a){if(a&&a.util&&a.Lining){document.addEventListener("beforelining",function(a){var b=a.target,d=b.getAttribute("data-effect"),e=c[d];e&&e.before&&e.before.call(this,a)}),document.addEventListener("afterlining",function(a){var b=a.target,d=b.getAttribute("data-effect"),e=c[d];e&&e.after&&e.after.call(this,a)});var b="",c={},d=function(a,d){c[a]=d,b+=d.css},e=function(a,b,c){var d=Array.prototype.slice.call(a.getElementsByTagName("text-line"),0);!function e(){d.length&&setTimeout(function(){c(d),e()},b)}()},f='[data-effect="{name}"] {opacity:0;}[data-effect="{name}"][data-lining="end"],.nolining [data-effect="{name}"] {opacity:1;}[data-effect="{name}"] text-line {opacity:0;transition:1s opacity;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-font-smoothing:antialiased;}[data-effect="{name}"] text-line[effect-end] {opacity:1;}',g=function(a){e(a.target,150,function(a){a.shift().setAttribute("effect-end","")})};d("fadeIn",{css:f.replace(/{name}/g,"fadeIn"),after:g}),d("slideIn",{css:f.replace(/{name}/g,"slideIn")+'[data-effect="slideIn"] text-line {transition:1s opacity, .6s top;position:relative;top:100px;}[data-effect="slideIn"] text-line[effect-end] {top:0;}',after:g}),d("slideInFromLeft",{css:f.replace(/{name}/g,"slideInFromLeft")+'[data-effect="slideInFromLeft"] text-line {transition:1s opacity, .6s left;position:relative;left:-100%;}[data-effect="slideInFromLeft"] text-line[effect-end] {left:0;}',after:g}),d("slideInFromRight",{css:f.replace(/{name}/g,"slideInFromRight")+'[data-effect="slideInFromRight"] text-line {transition:1s opacity, .6s left;position:relative;left:100%;}[data-effect="slideInFromRight"] text-line[effect-end] {left:0;}',after:g}),d("rolling",{css:f.replace(/{name}/g,"rolling")+'[data-effect="rolling"] {-webkit-perspective:1000px;perspective:1000px;}[data-effect="rolling"] text-line {transition:.6s;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:top;-webkit-transform-style:preserve-3d;-webkit-transform:rotatex(90deg);transform-origin:top;transform-style:preserve-3d;transform:rotatex(90deg);}[data-effect="rolling"] text-line[effect-end] {-webkit-transform:rotatex(0deg);transform:rotatex(0deg);}',after:function(a){e(a.target,300,function(a){a.shift().setAttribute("effect-end","")})}}),a.util.createStyle(b)}}(lining);