Antiquify.js v0.1

matthewgonzalez · Dec 28, 2012 · e79a655 · e79a655
1 parent eeff252
commit e79a655
Show file tree

Hide file tree

Showing 4 changed files with 311 additions and 0 deletions.
diff --git a/example/css/styles.css b/example/css/styles.css
@@ -0,0 +1,108 @@
+body {
+  padding: 50px;
+  font-family: 'Libre Baskerville', serif;
+  background: #ccc;
+  -webkit-font-smoothing: antialiased; }
+  @media screen and (max-width: 1250px) {
+    body {
+      padding: 50px 100px; } }
+
+.buttons {
+  position: fixed;
+  top: 0px;
+  right: 20px;
+  z-index: 999;
+  width: 200px; }
+  .buttons a {
+    font-weight: normal;
+    display: block;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    padding: 10px;
+    z-index: 999;
+    clear: both;
+    float: left;
+    border: 0px;
+    text-align: center; }
+    .buttons a:hover {
+      text-decoration: underline;
+      border: 0px; }
+  .buttons .download {
+    background-color: orange; }
+    .buttons .download span {
+      display: block;
+      font-size: .55em;
+      text-decoration: none; }
+
+h1.title {
+  text-align: center;
+  margin: 0px;
+  font-style: italic;
+  font-size: 32px;
+  border-top: .05em solid #000;
+  border-bottom: .07em solid #000;
+  margin: .25em auto 1.5em;
+  padding: 20px;
+  width: 50%; }
+
+.text {
+  position: relative;
+  float: left;
+  background: #fafaef url("http://farm8.staticflickr.com/7253/7549433998_e19a2dcf0c_h.jpg") 0px 0px repeat;
+  font-size: 1em;
+  display: block;
+  width: 40%;
+  text-align: justify;
+  margin: 0px 0px 40px 0px;
+  padding: 5%;
+  -webkit-box-shadow: 5px 10px 30px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 5px 10px 30px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 1px 0px rgba(0, 0, 0, 0.2);
+  min-height: 600px; }
+  @media screen and (max-width: 1250px) {
+    .text {
+      float: none;
+      clear: both;
+      margin: 0px auto 40px;
+      width: auto;
+      padding: 10%; } }
+
+.text p {
+  color: #111;
+  text-indent: 2em;
+  line-height: 1.5em;
+  margin: 0px; }
+
+.text p.page-number {
+  display: block;
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  bottom: 30px;
+  left: 0px;
+  font-size: 100%;
+  text-indent: 0px; }
+
+a {
+  color: #000;
+  border-bottom: 1px dashed #000;
+  text-decoration: none;
+  font-weight: bold; }
+  a:hover {
+    border-bottom: 1px solid #000; }
+
+div.quote {
+  position: relative;
+  padding: 50px 50px; }
+
+div.quote p {
+  position: relative;
+  width: 100%;
+  font-style: italic; }
+
+div.quote .author {
+  position: absolute;
+  bottom: -2.5em;
+  right: 0px;
+  font-size: .8em;
+  font-style: normal; }
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Antiquify.js - Antiquify your text</title>
+    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
+    <script src='http://raw.github.com/davatron5000/FitText.js/master/jquery.fittext.js' type='text/javascript'></script>
+    <script src='../jquery.antiquify.js' type='text/javascript'></script>
+    <script src='main.js' type='text/javascript'></script>
+    <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
+    <link href='css/styles.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <div class='buttons'>
+      <a class='toggle' href='#'>Toggle Antiquify</a>
+    </div>
+    <div class='text'>
+      <p class='page-number'>
+        1
+      </p>
+      <h1 class='title'>
+        ANTIQUIFY.js
+      </h1>
+      <p>
+        Antiquify is a jQuery plugin  developed by <a href="http://artisfacto.com" target="_blank">Matthew Gonzalez</a> that takes text and modifies the styles to make it look like it came straight off an old press. Randomized aberrations help create the illusion that the type was laid by hand using antique printing techniques. Special thanks to the fellas at <a href = "http://paravelinc.com" target="_blank">Paravel</a> and their <a href="http://letteringjs.com" target="_blank">Lettering.js</a>, on which this plugin is heavily based. <em>NOTE: this is currently a work in progress.</em> Stay tuned.
+      </p>
+      <p>
+        WHY? Because I like old books and the tactile quality found therein. Imperfections tend to humanize these sorts of things. A simple example of an old book <a href                                                                                                                     = "http://books.google.com/books?id=EEfVYQZANPMC&pg=PA1#v=onepage&q&f=false" target="_blank">can be found here</a>. Ut viverra ullamcorper libero imperdiet pulvinar. Nunc eu nisi quam, sit amet faucibus justo. Phasellus laoreet, elit id porta blandit, turpis purus placerat enim, ut rutrum arcu augue in nisi. Phasellus interdum, eros et malesuada blandit, felis nunc euismod ligula, et mattis felis erat id mi. Donec laoreet ornare orci eget varius. In sed nisi ac ligula pellentesque dignissim ut sit amet mauris. Cras malesuada est a lacus sollicitudin venenatis. Integer faucibus tellus vitae tellus condimentum vehicula. Integer eget lorem non nunc rutrum ultrices eu ut est. Nulla ut quam in quam posuere auctor non ac massa. Ut id arcu ipsum.
+      </p>
+    </div>
+    <div class='text'>
+      <p class='page-number'>
+        2
+      </p>
+      <p>
+        Nulla vel mauris non velit mollis ultrices at a quam. Nam eu dolor ac dolor viverra faucibus. Nulla eu erat metus. Cras tempor metus in tellus mollis a laoreet velit pharetra. Proin rhoncus porta risus, sed adipiscing arcu eleifend ut. Mauris aliquet imperdiet sem, vitae lobortis sem posuere sed. Praesent sollicitudin velit et leo tempor sit amet sodales neque ultricies. Phasellus blandit mollis ligula vitae luctus. Nunc nulla ipsum, porta non ultricies eget, porta bibendum augue. Etiam et dui massa, ut pulvinar lectus. Ut condimentum hendrerit quam, id varius mi adipiscing quis. Nulla arcu tortor, dignissim sit amet sollicitudin ut, blandit ut est. Nulla lacus lacus, sagittis et tempor quis, sagittis eu orci.
+      </p>
+      <p>
+        Aenean nec adipiscing nunc. Integer sed porttitor metus. Sed ac leo lectus. Nunc eu libero nec urna rutrum tincidunt. Nullam tempor placerat ullamcorper. Ut cursus eros eu nisi congue sit amet tristique ipsum sollicitudin. Ut sapien mauris, lobortis eget vehicula nec, facilisis sed dolor. Suspendisse eleifend nisi elit, eu pharetra mi. Etiam vehicula pellentesque arcu ultrices molestie. In et arcu felis, vitae volutpat lorem.
+      </p>
+      <div class='quote'>
+        <p>
+          O fantasy... who moves you when the senses do not spur you? A light that finds its form in Heaven moves you. <span class                                                                                                                                                             = "author">&#8211;Dante Alighieri (Purgatorio XVII, 13-18)</span>
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/example/main.js b/example/main.js
@@ -0,0 +1,31 @@
+$(document).ready(function() {
+      $('.text p').fitText(3.3);
+      $('.quote p').fitText(2.9);
+      $('h1.title').fitText(1);
+      $('.text p, h1.title ').antiquify();
+
+      function toggleButton() {
+        var applied = true;
+        $(".toggle").click( function() {
+          if (applied == true) {
+            $('.howdy').each(function(){
+              $(this).replaceWith($(this).contents());
+             });
+            $('.text p, h1.title').removeAttr('style');
+            $('.text p').fitText(3.3);
+            $('.quote p').fitText(2.9);
+            $('h1.title').fitText(1);  
+            applied = false;
+          } else if (applied == false) {  
+            $('.text p, h1.title').antiquify();  
+            $('.text p').fitText(3.3);
+            $('.quote p').fitText(2.9);
+            $('h1.title').fitText(1);
+            applied = true;
+          }
+
+        });
+      }
+
+    toggleButton();
+});
diff --git a/jquery.antiquify.js b/jquery.antiquify.js
@@ -0,0 +1,125 @@
+/*global jQuery */
+/*!	
+* Antiquify.JS 0.1
+*
+* Copyright 2012, Matthew Gonzalez http://artisfacto.com
+* Released under the WTFPL license 
+* http://sam.zoy.org/wtfpl/
+*
+* Thanks to Paravel and Lettering.JS - http://letteringjs.com - for the inspiration and starting point.
+*
+* Date: Wed Dec 26 17:14:00 2012 -0600
+*/
+(function($){
+	function injector(t, rgb) {
+		var a = t.html().split(''), inject = '';
+		if (a.length) {
+		    // sticky and stopSticky determine the amount of chars to apply the randomStyles to 
+        var sticky = 0;
+        var stopSticky = 5 + Math.floor(Math.random() * 15);
+        // isElement is used to determine anything between <> and ignore those (so it doesn't effect HTML tags!)
+        var isElement = 0;
+
+			$(a).each(function(i, item) {
+			  // number var determines the frequency of styled sections
+        var number = 1 + Math.floor(Math.random() * 15);
+
+        if ( this == "<" || isElement == 1 ) {
+          if (sticky >= 1) {
+             inject += '</span>';
+            sticky = 0;
+          } 
+          if ( this == ">") {
+            isElement = 0;
+          } else {
+            isElement = 1;
+          }
+          inject += item;
+        } else if (number == 1 && sticky == 0 && isElement == 0) {
+				  inject += '<span class="howdy '+randomClasses()+'" style="'+randomStyles(rgb)+'">'+item;
+          sticky++;
+        }  else if (sticky >= 1 && sticky < stopSticky) {
+          inject += item;
+          sticky++;
+        } else if (sticky >= stopSticky) {
+          inject += item+'</span>';
+          sticky = 0;
+          stopSticky = 5 + Math.floor(Math.random() * 25);
+        } else {
+          inject += item;
+        }
+			});	
+
+			t.empty().append(inject);
+		}
+
+	}
+
+  function randomStyles(rgb) {
+		var styles = '';
+
+
+    var a = 1 + Math.floor(Math.random() * 5);
+    var b = 1 + Math.floor(Math.random() * 5);
+
+
+    if (a == 1) {
+      styles += 'position:relative; top:' + .3*(-0.5 + Math.random())+ 'em;';
+    } 
+
+    if (b == 1) {
+      styles += 'position:relative;  left: -1px;';
+    }
+
+
+    return styles;
+	}
+
+	function randomClasses() {
+			var classes = '';
+
+
+	    var a = 1 + Math.floor(Math.random() * 5);
+	    var b = 1 + Math.floor(Math.random() * 5);
+
+
+	    if (a == 1) {
+	      classes += 'antiquify-shadow ';
+	    } 
+
+	    if (b == 1) {
+	      classes += 'antiquify-mask ';
+	    }
+
+
+	    return classes;
+		}
+
+
+
+	var methods = {
+		init : function() {
+      return this.each(function() {
+
+        var textColor = $(this).css('color');
+        var mask = 'url(data:image/png;base64,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)';
+
+        var rgb = textColor.split('(')[1].split(')')[0];
+        $(this).css({textShadow: '-.08em 0em 0em rgba('+rgb+', 1), 0em -0.07em 0em rgba('+rgb+', 1)'});
+
+        if( $("head #antiquify-styles").length <=0) {
+				   $("head").append("<style type='text/css' id='antiquify-styles'> .antiquify-shadow { text-shadow: .06em 0em 0em rgba("+rgb+", 1), 0em .06em 0em rgba("+rgb+", 1), -0.06em 0em 0em rgba("+rgb+",1), 0em -0.06em 0em rgba("+rgb+", 1) } .antiquify-mask { -webkit-mask-image:" +mask+ "; -o-mask-image:" +mask+ "; -moz-mask-image:" +mask+ "; mask-image:" +mask+ "; } </style>");
+        }
+
+				injector($(this), rgb);
+
+			});
+
+		}
+	};
+
+	$.fn.antiquify = function( method ) {
+			return methods.init.apply( this, [].slice.call( arguments, 0 ) ); 
+	};
+
+})(jQuery);