Submit your widget

Useful jQuery Flip-Quote effect

Created 5 years ago   Views 10940   downloads 1923    Author markserbol
Useful jQuery Flip-Quote effect
View DemoDownload 74.8 KB
Share |

 we called it jQuery Flip-Quote.This is a pull-quote from a text quote found in the document that flipsonce 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="//"></script>
<script src="jquery.flip-quote.js"></script>

HTML Structure:

  <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>

Read more: