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.
Demo
Basic Usage
Include the latest version of jQuery together with jquery.flip-quote.css
and jquery.flip-quote.js
in your document's head.
<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:
<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
:
$('#quote').flipQuote({ container: '#container' });
To learn more go to this page : http://markserbol.github.io/flip-quote/
Compatibility
Tested on all modern browsers – Chrome, Firefox, Safari. Fallback provided for IE and older browsers.
Changelog
-
v1.0.1 (14 Apr 2014)
Fixed reserved keyword error on IE
-
v1.0.0 (06 Feb 2014)
Initial release
License
jQuery Flip-Quote is under MIT License.
Detailed usage can be found at http://markserbol.github.io/flip-quote/. You can also contact me via email found on my Github Profile or follow me on Twitter.