jQuery Pull Quote with Animation
Description: Pull Quotes are great for highlighting important bits of information inside an article, in addition to adding flare to long blocks of content that may otherwise scare away some readers.
To that end, this jQuery script makes it simple as pie to turn any inline text on your page into an automatic pullquote, with optional animation that plays to draw even more attention to them. Simply wrap any text with a SPAN tag, and the script will duplicate the content and position it outside the regular flow of the surrounding text to create an awesome pull quote.
Specify whether the pull quote should be positioned relative to the parent element containing the original text, or as the first element following the closest header (h1, h2, h3 etc) that proceeds the original text. This gives you some level of say on where the pullquote appears relative to the original text, without making the entire process manual and tedious.
Demo: See above and bottom of page.
Directions:
Step 1: Add the following code to the <HEAD> section of your web page:
The above script references the following two external files. Right click and upload to your web site directory:
The script also uses the scrollReveal library (CDN hosted) to add animation to the pullquote when it's visible on the screen.
Step
2: Surround any inline text on your page with <span
class="pullout"></span> to instantly make it a pull quote! For example:
<p>Eagles are large, powerfully built birds of prey, with heavy heads and beaks. Even the smallest eagles, such as the booted eagle (Aquila pennata), which is comparable in size to a common buzzard (Buteo buteo) or red-tailed hawk (B. jamaicensis), have relatively longer and more evenly broad wings, and more direct, faster flight-- despite the reduced size of aerodynamic feathers. Most eagles are larger than any other raptors apart from some vultures. The smallest species of eagle is the South Nicobar serpent eagle (Spilornis klossi), at 450 g (0.99 lb) and 40 cm (16 in). <span class="pullout">Like all birds of prey, eagles have very large, hooked beaks for ripping flesh from their prey</span>, strong, muscular legs, and powerful talons. The beak is typically heavier than that of most other birds of prey. Eagles' eyes are extremely powerful. It is estimated that the martial eagle, whose eye is more than twice as long as a human eye, has a visual acuity 3.0 to 3.6 times that of humans. This acuity enables eagles to spot potential prey from a very long distance.[2] This keen eyesight is primarily attributed to their extremely large pupils which ensure minimal diffraction (scattering) of the incoming light. <span class="pullout">The female of all known species of eagles is larger than the male.</span> -Wikipedia</p>
The script will automatically capitalize the first letter of the text when shown as a pull quote. You can customize whether the pull quote appears to the right of the content, or left, plus some other adjustments. Read on for more details.
Customization
The script by default is automatically initialized after the page loads, thanks to the following code inside ddpullquote.js:
jQuery(function($){ // on page load
$('span.pullout').ddpullquote({
loc: 'parent',
outputEl: ['blockquote', 'rightquote'],
scrollReveal: { duration: 2000, scale: 1, distance: '20px', reset: true }
})
});
The ddpullquote() method can be called on any
jQuery
selector to target those text and create a pull quote out of them- the
default setting looks for <span class="pullout"> elements.
Inside the method, the following 3 options can be modified to customize the behaviour of the pullquote:
-
loc: The location of the pullquote where it's inserted in the document DOM and shown. Three possible values can be used:- "
parent": The pullquote is inserted inside the parent element of the original text, as the first child element. - "
parent:element": The pullquote is inserted inside the parent element of the specified type of the original text. For example, if you enter "parent:div", the script will traverse up the document tree until it finds the first parent element that is a DIV and insert the pull quote element there. - "
header": The pullquote is inserted after the nearest header element (h1, h2, h3, etc) that proceeds the original text, if any. If none, no pull quote will be inserted.
- "
outputEl: Specifies the HTML element to create and insert as a pullquote, plus the CSS class name to insert to style it. The syntax is[valid_element, css_class_name]. Inside ddpullquote.css, two class names are already defined and styled to let you easily insert a right or left aligned pull quote- "rightquote" and "leftquote".scrollReveal: An object literal that configures the animation to use when the pull quote becomes visible on the page. Set to "none" to disable", or visit the project github page for documentation on the supported values.
More Pull Quote Examples
Here's an example of both a left and right aligned pull quote example, by
setting outputEl to ['blockquote', 'leftquote'] for the former. You
can further customize the quote's style by editing
ddpullquote.css.
Eagles are large, powerfully built birds of prey, with heavy heads and beaks. Even the smallest eagles, such as the booted eagle (Aquila pennata), which is comparable in size to a common buzzard (Buteo buteo) or red-tailed hawk (B. jamaicensis), have relatively longer and more evenly broad wings, and more direct, faster flight- despite the reduced size of aerodynamic feathers. Most eagles are larger than any other raptors apart from some vultures. The smallest species of eagle is the South Nicobar serpent eagle (Spilornis klossi), at 450 g (0.99 lb) and 40 cm (16 in). Like all birds of prey, eagles have very large, hooked beaks for ripping flesh from their prey, strong, muscular legs, and powerful talons. The beak is typically heavier than that of most other birds of prey.
Eagles' eyes are extremely powerful. It is estimated that the martial eagle, whose eye is more than twice as long as a human eye, has a visual acuity 3.0 to 3.6 times that of humans. This acuity enables eagles to spot potential prey from a very long distance.[2] This keen eyesight is primarily attributed to their extremely large pupils which ensure minimal diffraction (scattering) of the incoming light. The female of all known species of eagles is larger than the male. -Wikipedia;