Initial Commit

markserbol · Feb 6, 2014 · c6b8fae · c6b8fae
commit c6b8fae
Show file tree

Hide file tree

Showing 4 changed files with 271 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,46 @@
+# jQuery Flip-Quote
+jQuery Flip-Quote creates a **pull-quote** from a text quote found in the document and *flips* to reveal the quote once it's scrolled into view. It also has a click feature that scrolls into and highlights the quote origin on the document.
+
+[![jQuery Flip-Quote](http://i.imgur.com/GGUWZIl.png "jQuery Flip-Quote")](https://github.com/markserbol/urlive)
+
+## Demo
+[View the Demo Page](http://markserbol.github.io/flip-quote/)
+
+
+## Basic Usage
+
+Include the latest version of jQuery together with `jquery.flip-quote.css` and `jquery.flip-quote.js` in your document's *head*.
+
+
+````html
+<link href="jquery.flip-quote.css" rel="stylesheet"/>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<script src="jquery.flip-quote.js"></script>
+````
+
+HTML Structure:
+````html
+<div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <q id="quote">Maecenas rhoncus sapien massa, aliquam ornare justo tristique vitae</q>. Duis sollicitudin nulla a leo sagittis, tristique imperdiet turpis sollicitudin.</p>
+
+  <div id="container">...</div>
+</div>
+````
+
+Apply jQuery Flip-Quote by calling `flipQuote`:
+````javascript
+$('#quote').flipQuote({
+  container: '#container'
+});
+````
+To learn more go to this page : [http://markserbol.github.io/flip-quote/](http://markserbol.github.io/flip-quote/)
+
+## Compatibility
+Tested on all modern browsers – Chrome, Firefox, Safari.
+Fallback provided for IE and older browsers.
+
+
+## License
+jQuery Flip-Quote is under [MIT License](http://opensource.org/licenses/MIT).
+
+Detailed usage can be found at [http://markserbol.github.io/flip-quote/](http://markserbol.github.io/flip-quote/). You can also contact me via email found on my [Github Profile](https://github.com/markserbol/) or follow me on [Twitter](http://twitter.com/intent/user?screen_name=mark_serbol).
diff --git a/jquery.flip-quote.css b/jquery.flip-quote.css
@@ -0,0 +1,79 @@
+/*
+ * jquery.flip-quote.css, jQuery Flip-Quote
+ *
+ * View the plugin repository at:
+ * https://github.com/markserbol/flip-quote
+ *
+ */
+
+.fQ_container {
+	position:relative;
+	cursor:pointer;
+	-moz-perspective: 800px;
+	-webkit-perspective: 800px;
+	perspective: 800px;
+	font-size:24px;
+	font-family:'Segoe UI', 'Segoe', 'Open Sans', sans-serif;
+}
+
+.fQ_container div {
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	height:auto;
+	text-align:center;
+	background:#0080C0;
+	color:#FFF;
+
+	-moz-backface-visibility: hidden;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+
+	-moz-transform-style: preserve-3d;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+
+	/*-moz-transition:0.8s;
+	-webkit-transition: 0.8s;
+	transition: 0.8s;*/
+
+	-moz-animation: pulse 2s infinite;
+	-webkit-animation: pulse 2s infinite;
+}
+
+.fQ_front {
+	opacity:0;
+	z-index:2;
+	-moz-transform:rotateX(180deg);
+	-webkit-transform:rotateX(180deg);
+	transform:rotateX(180deg);
+}
+
+.fQ_back {
+	z-index:3;
+	height:100%;
+}
+
+.fQ_container.fQ_flip .fQ_front {
+	opacity:1;
+	-moz-transform:rotateX(0deg);
+	-webkit-transform:rotateX(0deg);
+	transform:rotateX(0deg);
+}
+
+.fQ_container.fQ_flip .fQ_back {
+	opacity:0;
+	-moz-transform:rotateX(-180deg);
+	-webkit-transform:rotateX(-180deg);
+	transform:rotateX(-180deg);
+}
+
+.fQ_quote {
+	background-color:transparent;
+	-moz-transition:background-color 0.8s ease-in-out, color 0.4s ease-in-out;
+	-webkit-transition:background-color 0.8s ease-in-out, color 0.4s ease-in-out;
+	-o-transition:background-color 0.8s ease-in-out, color 0.4s ease-in-out;
+	transition:background-color 0.8s ease-in-out, color 0.4s ease-in-out;
+}
+
diff --git a/jquery.flip-quote.js b/jquery.flip-quote.js
@@ -0,0 +1,138 @@
+/*
+ * jquery.flip-quote.js v1.0.0, jQuery Flip-Quote
+ *
+ * Copyright 2014 Mark Serbol.   
+ * Use, reproduction, distribution, and modification of this code is subject to the terms and 
+ * conditions of the MIT license, available at http://www.opensource.org/licenses/MIT.
+ *
+ * jQuery Flip-Quote creates a pull-quote from a text quote found in the document 
+ * and flips to reveal the quote once it's scrolled into view. 
+ * It also has a click feature that scrolls into and highlights the quote origin on the document.
+ *
+ * https://github.com/markserbol/flip-quote
+ *
+ */
+;(function($){
+  var defaults = {
+		quoteSelector:'q',
+		container:'.container',
+		quoteMarks:'"“" "”"',
+		bgColor:'#0080C0',
+		fontColor:'#FFF',
+		fontSize:'24px',	
+		flipDuration:'0.7s',
+		pads:20
+  };
+
+  $.fn.flipQuote = function(options){
+		var opts = $.extend({}, defaults, options);
+
+		return this.each(function(){
+			var el = $(this), 
+				quotes = (el.find(opts.quoteSelector).length) ? el.find(opts.quoteSelector) : el, 
+				ocontainer = $(opts.container), 
+				win = $(window),
+				root = $('html, body');
+
+			quotes.each(function(index) {
+        var quote = $(this), text = quote.text(), container, fontFace, backFace;
+
+				quote.addClass('fQ_quote');
+
+				container = ocontainer.eq(index);
+
+				container.addClass('fQ_container').css({'font-size': opts.fontSize});
+
+				frontFace = $('<div/>', {class: 'fQ_front', html:'<q>'+ text +'</q>'});
+				backFace = $('<div/>', {class: 'fQ_back'});
+
+				frontFace.add(backFace).appendTo(container)
+					.css({
+						'background-color': opts.bgColor,
+						'color': opts.fontColor,
+						'padding': opts.pads,
+						'width': container.width() - opts.pads * 2
+					}).find('q').css('quotes', opts.quoteMarks);
+
+				container.click(function() {
+					if(quote.offset().top + quote.height() - 50 < win.scrollTop()){
+						root.animate({
+							scrollTop: quote.offset().top - 20
+						}, 'slow', function(){
+							flash(quote);
+						});
+
+					}else if(quote.offset().top + 50 > win.scrollTop() + win.height()){
+						root.animate({
+							scrollTop: (quote.offset().top + quote.height() + 20) - win.height()
+						}, 'slow',function(){
+							flash(quote);
+						});
+					}else {
+						flash(quote);				
+					}
+
+				});
+
+				container.height(frontFace.innerHeight());
+				backFace.innerHeight(frontFace.innerHeight());
+
+      });
+
+			win.scroll(function() {
+        ocontainer.each(function(index, element) {
+          if(win.scrollTop() + win.height() > $(this).offset().top + $(this).height()){	
+						$(this).addClass('fQ_flip');
+
+						$(this).find('div').css({
+							'-moz-transition': opts.flipDuration,
+							'-webkit-transition': opts.flipDuration,
+							'transition': opts.flipDuration
+						});
+
+						if(!css3dsupport){
+							$(this).find('.fQ_front').show();
+							$(this).find('.fQ_back').hide();
+						}
+
+					}else{
+						$(this).removeClass('fQ_flip');
+
+						if(!css3dsupport){
+							$(this).find('.fQ_front').hide();
+							$(this).find('.fQ_back').show();
+						}
+					}
+        });
+      });
+
+			function flash(el){
+				el.css({
+					'background-color': opts.bgColor,
+					'color': opts.fontColor
+				});
+
+				setTimeout(function(){
+					el.css({
+						'background-color':'inherit',
+						'color':'inherit'
+					});
+				}, 1000);
+			}
+
+			function css3dsupport(){				
+				var DOM = document.createElement('p'), 
+					props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective'];
+
+				for(var i=0; i<props.length; i++){
+					if(props[i] in DOM.style){
+						return true;
+					}
+				}
+				return false;
+			}
+
+		});
+	}
+
+})(jQuery);
diff --git a/jquery.flip-quote.min.js b/jquery.flip-quote.min.js