Submit your widget

Useful jQuery Flip-Quote effect

Created 4 years ago   Views 10390   downloads 1785    Author markserbol
Useful jQuery Flip-Quote effect
View DemoDownload 74.8 KB
52
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="//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>

Read more:http://markserbol.github.io/flip-quote