USAGE

jQuery Flip-Quote creates a pull-quote from a text quote found in the document that flips once it's scrolled into view. It also has a click feature that scrolls into and highlights the quote origin on the document.

The idea came from THE VERGE's article "Fanboys". In which I think is a good fun way to show pull-quotes that bolds well on a modern flat UI website.

The plugin optimizes CSS 3D transform and other CSS3 properties to give it a 3D depth and perspective. This has been tested on all modern browsers, for IE and older browsers the plugin also has a fallback support.

Getting Started

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'
});

Multiple Flip-Quote on one call

The above instance is good for one flip-quote only. If you want to create flip-quote for each quote element you need to structure your markup and call instance like this.

<div id="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <q>Maecenas rhoncus sapien massa, aliquam ornare justo tristique vitae</q>. Duis sollicitudin nulla a leo sagittis, tristique imperdiet turpis sollicitudin.</p>
  <div class="container">...</div>

  <p>Donec sit amet pretium lectus. Nam justo eros, condimentum nec mi ut, sagittis porttitor risus. Vestibulum lectus dolor, mollis nec malesuada id, facilisis eu odio. Aenean porta eu nibh a varius. Pellentesque eget nisl sem. <q>Nunc luctus pellentesque sapien ac consectetur</q>. Quisque vel commodo sapien. Cras mollis rutrum lorem eu dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <div class="container">...</div>
  
</div>

jQuery:

$('#main').flipQuote({
  quoteSelector: 'q',
  container: '.container'
});

Options

Here is the list of options that you can set and pass on a flipQuote instance.

set flip-quote's quotes property to determine how the browser should render quotation marks. You can also pass HTML Entity value or a CSS Escape ('\22'). For single quote you should escape the single string and pass it like this: .  See detailed docs from MDN

set flip-quote's transition-duration property

set flip-quote's padding property for all sides

DEMO

SCROLL BELOW AND CLICK A FLIP-QUOTE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rhoncus sapien massa, aliquam ornare justo tristique vitae. Duis sollicitudin nulla a leo sagittis, tristique imperdiet turpis sollicitudin. Donec tempor pretium semper. Pellentesque vulputate tortor non velit aliquam molestie. Pellentesque justo risus, ornare non elit nec, vulputate tristique libero. Suspendisse cursus aliquam ligula ac varius. Cras molestie tellus a erat tempus, non ultrices ligula hendrerit. Etiam in erat sed nisl consequat euismod.

Donec sit amet pretium lectus. Nam justo eros, condimentum nec mi ut, sagittis porttitor risus. Vestibulum lectus dolor, mollis nec malesuada id, facilisis eu odio. Aenean porta eu nibh a varius. Pellentesque eget nisl sem. Nunc luctus pellentesque sapien ac consectetur. Quisque vel commodo sapien. Cras mollis rutrum lorem eu dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar quis purus tincidunt imperdiet. Suspendisse potenti. Integer adipiscing felis vel lectus porttitor dictum. Proin tincidunt, ligula sed iaculis ultricies, libero sapien varius lacus, nec ornare quam leo in quam. Nullam vitae lacinia massa. Quisque vel est rhoncus, dignissim mi quis, convallis sem. Nulla sit amet enim blandit dui faucibus accumsan eget non massa.

Proin convallis, est tristique suscipit pretium, erat est mollis nunc, sed pretium lorem lacus id orci. Etiam sit amet tincidunt elit. Suspendisse pellentesque porta commodo. Etiam dapibus tincidunt arcu, et accumsan massa venenatis eget. Vestibulum sit amet eleifend nibh. Praesent non laoreet dui. Mauris suscipit tincidunt aliquet. Quisque eu lacinia metus, ut tristique nisl. Cras bibendum hendrerit dui sit amet lacinia.

Mauris eu lacus lacinia, laoreet tellus vitae, pretium libero. Nulla non bibendum diam. Nulla in velit at tortor ornare convallis quis ut diam. Proin sodales tempus tellus, sed semper dui vehicula eget. Sed et aliquam nulla, et interdum quam. Curabitur sagittis eget velit a sollicitudin. Vestibulum eget sagittis nisi, in laoreet ipsum. Proin hendrerit rhoncus euismod. Curabitur congue, leo at lobortis vulputate, metus sem adipiscing velit, a tempor neque dui sed nulla. Quisque lobortis sapien et sapien molestie, at aliquam magna mollis. Quisque aliquam tellus eu consequat ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas quam ac nisi tincidunt tempus. Nunc sagittis, ligula vel vehicula dapibus, arcu sem commodo quam, sed auctor turpis tellus eget purus.

Curabitur pharetra euismod lorem, nec sollicitudin nisi tempus in. Nulla libero ligula, feugiat non blandit nec, sagittis at elit. Proin ut varius libero. Nunc porta sem nulla, aliquet sollicitudin dolor ornare sed. Aliquam erat volutpat. Nullam nunc nisi, rhoncus in hendrerit nec, fermentum molestie urna. Nam laoreet nibh purus, ut sagittis eros porta vitae. Morbi luctus justo sit amet elit mollis hendrerit. Ut condimentum est vitae justo tincidunt, ut molestie lectus pulvinar. Nunc orci eros, sagittis consectetur tincidunt sollicitudin, pretium eu nisl.

Nulla consectetur ut diam vel semper. Etiam ultrices eros id massa feugiat euismod. Fusce ut nibh fringilla, aliquet nunc et, lobortis augue. In lacinia nulla quis velit mattis condimentum. Vivamus tempor quam sed augue mollis placerat at non sem. Aenean ac neque iaculis, vulputate purus id, commodo leo. Proin posuere elit justo, nec imperdiet quam adipiscing et. Sed vulputate, justo sit amet suscipit suscipit, velit nisl semper augue, ac ornare turpis libero ut tellus. Aenean ullamcorper vulputate nisl vitae rhoncus. Donec metus nunc, imperdiet quis erat eget, ultricies imperdiet eros. Nunc sapien turpis, vestibulum non lectus non, aliquet aliquet sapien. Nullam ornare luctus enim ac cursus.

Dependencies

jQuery 1.6 or Higher

License

jQuery Flip-Quote is under MIT License (http://www.opensource.org/licenses/MIT). You are free to use this plugin in any project (even commercial ones) as long as the copyright header is left intact.