Jump to the jQuery Hyphenate Demo

Download the Source Code

Requirements

• jQuery
• The jQuery.Hyphenate Plugin

In the head of your document, be sure to include your references to the jQuery library and the Hyphenate Plugin:

  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/jquery.hyphenate.js"></script>

Following that, we can instantiate our plugin on any dom element:

jQuery(document).ready(function(){
  // Document is ready
  $('div.hyphen').hyphenate();
  // Hyphenate all divs with a class of 'hyphen'
});

By default, the plugin will hyphenate the strings based off the current width of the element we are hyphenating. You can, however, pass in an optional oWidth parameter to define a width for the element.

jQuery(document).ready(function(){
  // Document is ready
  $('div.hyphen').hyphenate({ oWidth : 100 });
  // Hyphenate all divs with a class of 'hyphen' to a width of 100px
});

This plugin works best with block level elements (DIV, P, H1, LI), but can also work on inline elements (SPAN, EM, STRONG), just note that the plugin will modify them to block level via display:block.

Known Issues

This plugin is in its initial release, so please do not consider this a complete and polished plugin.

• Nested DOM elements will be removed. If you are performing a hyphenation on a DIV that has child SPANs or As, then those elements will be removed, though there inner-text will remain.

Please enjoy! Feel free to leave comments and suggestions below, and don’t forget to come back often to check for updates.

Enough with the chit-chat.  Parallax can best be described by seeing it in action:

View the Parallax Demo

Parallax is typically used for creating captivating 3d scenes and landscapes, but here we’ll use it just to create some really nice image rollovers.

On with the tutorial

Requirements

• Basic understanding of HTML/CSS
• Basic understanding of creating PNG transparency
• jQuery
• jQuery – Parallax Plugin by Stephen Band

Feel free to download the entire project here.

Step 1. Design your image

Using Photoshop, or your image editor of choice so long as it supports .PNG alpha transparency, create an interesting design including several elements. You can create a scene like Stephen did or something simple like my demo.

Be sure to keep your design larger than you plan on using it in the final product.

Image Rollovers with jQuery Parallax - Step 1

Step 2. Set up your layers

Now pull apart your document, creating a 24-bit PNG for each layer. In my example I made three layers:
Layer 0 – The background: bg.png
Layer 1 – The guides: guides.png
Layer 2 – Text: name.png

Step 3. HTML

Now, with a separate PNG for each layer in our parallax, we can create a new HTML document with the following code in the body.

<div id="parallax">
        <!-- Layer 0 // Background -->
  	<div style="width:500px; height:500px;">
  		<img src="bg.png" alt="" />
  	</div>
 
        <!-- Layer 1 // Guides -->
  	<div style="width:500px; height:500px;">
  		<img src="guides.png" alt="" />
  	</div>
 
        <!-- Layer 2 // Text -->
  	<div style="width:500px; height:500px;">
  		<img src="name.png" alt=""/>
  	</div>
 </div>

Set the size of each DIV equal to the size of the image it is holding.

Step 4. CSS

We use CSS to define the window in which our parallax will render. Place the following rule in your stylesheet.

#parallax { 
  position:relative;
  overflow:hidden;
  width:400px;
  height:100px;
  margin:auto;
}

Step 4. Make it come alive with jQuery

In the head of your document, be sure to include the jQuery and jQuery.paralax libraries:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>

Now we can add our jQuery:

$(document).ready(function(){	
	$('#parallax').jparallax({
		// Options
	},
	{xtravel: '30px', ytravel: '30px'}, // Layer 0 : bg.png
	{xtravel: '50px', ytravel: '60px'}, // Layer 1 : guides.png
	{xtravel: '200px', ytravel: '80px'} // Layer 2 : name.png
	);	
});

Each line of {options} creates a unique set of rules for that layer. Reduce the xtravel/ytravel values in order to lessen the parallax effect. Background layers move less than foreground layers so make sure their xtravel/ytravel values are smaller than foreground layers. Feel free to tweak these numbers as you see fit. jQuery Parallax supports a multitude of options, consult the plug-in page for more information.

And that’s it! You should have something very similar to my completed demo. If not, please post a comment or drop me an email and I can help you out. Enjoy.