View demo Download source

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

Please note that this will only work in browsers that support CSS 3D transforms.

How it works

The following HTML structure is used for the gallery:

<section id="dg-container" class="dg-container">
	<div class="dg-wrapper">
		<a href="#">
			<img src="images/1.jpg" alt="image01">
			<div>http://www.colazionedamichy.it/</div>
		</a>
		<a href="#">
			<!-- ... -->
		</a>
		<!-- ... -->
	</div>
	<nav>
		<span class="dg-prev"><</span>
		<span class="dg-next">></span>
	</nav>
</section>

And this is how the gallery is initialized:

$('#dg-container').gallery();

Options

The following options are available:

current		: 0,
// index of current item

autoplay	: false,
// slideshow on / off

interval	: 2000
// time between transitions

I hope you enjoy it!

View demo Download source

View demo Download source

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

How it works

The main idea behind the Arctext plugin is to rotate letters with CSS3 transforms in order to place them along a curved path. The curve is always a segment of a circle (hence arc) for which the radius can be specified. The space and rotation for each letter will be calculated using that radius and the width of the text.

Options

The following options are available:

radius	: 0,
// the minimum value allowed is
// half of the word length.
// if set to -1, the word will be straight.

dir		: 1,
// 1: curve is down,
// -1: curve is up

rotate	: true,
// if true each letter should be rotated.

fitText	: false
// if you want to try out the
// fitText plugin (http://fittextjs.com/)
// set this to true.
// Don't forget, the wrapper should be fluid.

View demo Download source

View demo Download source

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

This is based on a request we once got from a reader who asked if the effect on http://porscheeveryday.com/ could be achieved with jQuery. This is our attempt to recreate the basics of that effect.

We will be using the jQuery Proximity plugin by James Padolsey.

The illustations in the demos are by Florian Nicolle and they are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.

The Markup

We’ll use an unordered list for the thumbnails and add a division for the description of each image (for this tutorial, we will be going through demo 2):

<ul id="pe-thumbs" class="pe-thumbs">
	<li>
		<a href="#">
			<img src="images/thumbs/1.jpg" />
			<div class="pe-description">
				<h3>Time</h3>
				<p>Since time, and his predestinated end</p>
			</div></a>
	</li>
	<li><!-- ... --></li>
</ul>

Let’s style it!

The CSS

The unordered list will be centered on the page and we’ll add a background image to “shine through” the thumbnails that will have a low opacity:

.pe-thumbs{
	width: 900px;
	height: 400px;
	margin: 20px auto;
	position: relative;
	background: transparent url(../images/3.jpg) top center;
	border: 5px solid #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

We’ll also add a bit of tint to the background image by adding a pseudo element with a rgba background color:

.pe-thumbs:before {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(255,102,0,0.2);
}

The list items will float left and we’ll set the position of the anchors and images to relative:

.pe-thumbs li{
	float: left;
	position: relative;
}
.pe-thumbs li a,
.pe-thumbs li a img{
	display: block;
	position: relative;
}

Each thumbnail will have an initial width of 100 pixels and an opacity of 0.2:

.pe-thumbs li a img{
	width: 100px;
	opacity: 0.2;
}

The discription will be hidden by default and then we will make it appear using JavaScript:

.pe-thumbs li a div.pe-description{
	width: 200px;
	height: 100px;
	background: rgba(0,0,0,0.8);
	position: absolute;
	top: 0px;
	left: -200px;
	color: white;
	display: none;
	z-index: 1001;
	text-align: left;
}

And finally, let’s style the content of the description division:

.pe-description h3{
	padding: 10px 10px 0px 10px;
	line-height: 20px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 22px;
	margin: 0px;
}
.pe-description p{
	padding: 10px 0px;
	margin: 10px;
	font-size: 11px;
	font-style: italic;
	border-top: 1px solid rgba(255,255,255,0.3);
}

And that’s all the style! Let’s move on to the JavaScript!

The JavaScript

The main idea is to first of all calculate the description container size and position when we hover over a thumbnail. This depends of course on the maximum scale of the thumbnail and where the thumbnail is located in the main wrapper. For example, when the thumbnail is close to the right edge, we’ll want to make the description box appear on the left side of the thumbnail.

Then we’ll need to bind the proximity event to the images. The idea is to scale the images up or down according to the position of the mouse. Once the image scales to the maximum value, we set its z-index very high, so that it stays on top, and we show the respective description:

	// list of thumbs
var $list		= $('#pe-thumbs'),
	// list's width and offset left.
	// this will be used to know the position of the description container
	listW		= $list.width(),
	listL		= $list.offset().left,
	// the images
	$elems		= $list.find('img'),
	// the description containers
	$descrp		= $list.find('div.pe-description'),
	// maxScale : maximum scale value the image will have
	// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
	settings	= {
		maxScale	: 1.3,
		maxOpacity	: 0.9,
		minOpacity	: Number( $elems.css('opacity') )
	},
	init		= function() {

		// minScale will be set in the CSS
		settings.minScale = _getScaleVal() || 1;
		// preload the images (thumbs)
		_loadImages( function() {

			_calcDescrp();
			_initEvents();

		});

	},
	// Get Value of CSS Scale through JavaScript:
	// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
	_getScaleVal= function() {

		var st = window.getComputedStyle($elems.get(0), null),
			tr = st.getPropertyValue("-webkit-transform") ||
				 st.getPropertyValue("-moz-transform") ||
				 st.getPropertyValue("-ms-transform") ||
				 st.getPropertyValue("-o-transform") ||
				 st.getPropertyValue("transform") ||
				 "fail...";

		if( tr !== 'none' ) {	 

			var values = tr.split('(')[1].split(')')[0].split(','),
				a = values[0],
				b = values[1],
				c = values[2],
				d = values[3];

			return Math.sqrt( a * a + b * b );

		}

	},
	// calculates the style values for the description containers,
	// based on the settings variable
	_calcDescrp	= function() {

		$descrp.each( function(i) {

			var $el		= $(this),
				$img	= $el.prev(),
				img_w	= $img.width(),
				img_h	= $img.height(),
				img_n_w	= settings.maxScale * img_w,
				img_n_h	= settings.maxScale * img_h,
				space_t = ( img_n_h - img_h ) / 2,
				space_l = ( img_n_w - img_w ) / 2;

			$el.data( 'space_l', space_l ).css({
				height	: settings.maxScale * $el.height(),
				top		: -space_t,
				left	: img_n_w - space_l
			});

		});

	},
	_initEvents	= function() {

		$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {

			var $el			= $(this),
				$li			= $el.closest('li'),
				$desc		= $el.next(),
				scaleVal	= proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
				scaleExp	= 'scale(' + scaleVal + ')';

			// change the z-index of the element once
			// it reaches the maximum scale value
			// also, show the description container
			if( scaleVal === settings.maxScale ) {

				$li.css( 'z-index', 1000 );

				if( $desc.offset().left + $desc.width() > listL + listW ) {

					$desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );

				}

				$desc.fadeIn( 800 );

			}
			else {

				$li.css( 'z-index', 1 );

				$desc.stop(true,true).hide();

			}	

			$el.css({
				'-webkit-transform'	: scaleExp,
				'-moz-transform'	: scaleExp,
				'-o-transform'		: scaleExp,
				'-ms-transform'		: scaleExp,
				'transform'			: scaleExp,
				'opacity'			: ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
			});

		});

	},
	_loadImages	= function( callback ) {

		var loaded 	= 0,
			total	= $elems.length;

		$elems.each( function(i) {

			var $el = $(this);

			$('').load( function() {

				++loaded;
				if( loaded === total )
					callback.call();

			}).attr( 'src', $el.attr('src') );

		});

	};

return {
	init	: init
};

Demos

Check out all three examples:

1. Demo 1: Scale
2. Demo 2: Scale with description
3. Demo 3: Less scaling with description

View demo Download source

View demo Download source

2011 has been an exciting year for Codrops and we want to thank you for supporting us! We’ve learned a lot and it’s a privilege to us to be able to share our tutorials, experiments and thoughts with you. We hope that you have enjoyed our content and that it was inspiring and useful to you!

For 2012 we have some great changes planned. We want to offer you more interesting things in form of new categories and better interaction possibilities. This, of course, will require a new look for Codrops which means that we’ll have a major redesign coming up. Then we can all finally say “goodbye” to this blue mess :)

The reason why we were unable to redesign this blog until now is a very simple one: lack of time. We are trying hard to keep tutorials and articles coming and with so many new possibilities that CSS3 and HTML5 offer, we simply can’t resist to go crazy and “do something”. But we’ve set our minds to invest enough time in order to finally give Codrops a nice and functional design to reflect its purpose: giving you innovative and useful things, for free, always.

With all this in mind, we will, of course, not leave you without some inspiring experiment :) So, we want to give you some rocking letters in CSS3 for welcoming 2012 in style!

How it works

There are four “layers” of words that will be flying in, one after the other, making the previous one fade out. The letters will fly in rotating and get a little shake once they “smash” into their place.
The demo is best viewed in a browser that supports perspective.

Have a great 2012 and thank you for your support!

View demo Download source

View demo Download source

Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by.

The images used in the demo are by Joanna Kustra.

Please note that the 3D effects will only work in Webkit browsers. You can view a video of how the effects look here: Experimental CSS3 Animations for Image Transitions Video Demonstration

How it works

Given a set of images, we’ll add the first image to the wrapper with the class te-cover. With JavaScript we’ll control the transition classes given to the elements in the wrapper te-transition and which image will be shown. This is how the first example looks like:

<div id="te-wrapper" class="te-wrapper">
	<div class="te-images">
		<img src="images/1.jpg"/>
		<img src="images/2.jpg"/>
		<img src="images/3.jpg"/>
		<img src="images/4.jpg"/>
		<img src="images/5.jpg"/>
	</div>
	<div class="te-cover">
		<img src="images/1.jpg"/>
	</div>
	<div class="te-transition">
		<div class="te-card">
			<div class="te-front"></div>
			<div class="te-back"></div>
		</div>
	</div>
</div>

The main idea is to always show the regarding image using te-cover. When we start an animation by giving the respective animation class, the te-cover will get hidden while the animation runs. When the animation finishes, the te-cover element will be shown again, with the updated image.

Demos

Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image.

1. Demo 1: Flip
2. Demo 2: Rotate
3. Demo 3: Multi-Flip
4. Demo 4: Cube
5. Demo 5: Unfold
6. Demo 6: Others

We hope you like our little experiment and find it inspiring and useful!

View demo Download source

View demo Download source

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.

We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since CSS3 transitions are not supported in order browsers, the demo should be best viewed in Safari or Chrome (here we got the smoothest transitions).

Since we will be using transitions, this effect will only work properly in browsers that support them.

So let’s start!

The Markup

The structure will be a section with some articles in i. Each article item will have a header and a paragraph:

<section class="ib-container" id="ib-container">
	<article>
		<header>
			<h3><a href="#">Some Headline</a></h3>
			<span>Some other text</span>
		</header>
		<p>Some introduction</p>
	</article>
	<article>
		<!-- ... -->
	</article>
	<!-- ... -->
</section>

Let’s look at the style.

The CSS

The main container will be of fixed width and centered:

.ib-container{
	position: relative;
	width: 800px;
	margin: 30px auto;
}

Let’s clear the floats (out articles will be floating) with the help of the :before and :after pseudo elements:

.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}

Now, let’s style the article items. We’ll make them float and add two box shadows, of which the white one will have a large spread distance. Also, we’ll add the transition for three properties: opacity, transform (we want to scale it) and box-shadow:

.ib-container article{
	width: 140px;
	height: 220px;
	background: #fff;
	cursor: pointer;
	float: left;
	border: 10px solid #fff;
	text-align: left;
	text-transform: none;
	margin: 15px;
	z-index: 1;
	box-shadow:
		0px 0px 0px 10px rgba(255,255,255,1),
		1px 1px 3px 10px rgba(0,0,0,0.2);
	transition:
		opacity 0.4s linear,
		transform 0.4s ease-in-out,
		box-shadow 0.4s ease-in-out;
}

For Webkit browsers we’ll also add

-webkit-backface-visibility: hidden

to avoid a short flicker. (You can remove this if you prefer to have a crisp looking text, though).

Let’s style the text elements and create some nice typography. The color and the text-shadow of each element will be matching:

.ib-container h3 a{
	font-size: 16px;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
	opacity: 0.8;
}
.ib-container article header span{
	font-size: 10px;
	font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
	padding: 10px 0;
	display: block;
	color: rgba(255, 210, 82, 1);
	text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
	text-transform: uppercase;
	opacity: 0.8;
}
.ib-container article p{
	font-family: Verdana, sans-serif;
	font-size: 10px;
	line-height: 13px;
	color: rgba(51, 51, 51, 1);
	text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
	opacity: 0.8;
}

And now we’ll add the transition to all three. Again, we’ll have three properties: opacity, text-shadow and color:

.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
	transition:
		opacity 0.2s linear,
		text-shadow 0.5s ease-in-out,
		color 0.5s ease-in-out;
}

The blur class will be applied to all the siblings of the currently hovered item. We want to scale them down a bit and add a big white box shadow, to make the box look blurry. We’ll also decrease the opacity a bit:

.ib-container article.blur{
	box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
	transform: scale(0.9);
	opacity: 0.7;
}

In order to make the text elements look blurry, we’ll make the color transparent by setting the opacity of the rgba value to 0, and we’ll enlarge the text-shadow blur distance:

.ib-container article.blur h3 a{
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
	color: rgba(0, 0, 0, 0);
	opacity: 0.5;
}
.ib-container article.blur header span{
	text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
	color: rgba(255, 210, 82, 0);
	opacity: 0.5;
}
.ib-container article.blur  p{
	text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
	color: rgba(51, 51, 51, 0);
	opacity: 0.5;
}

The currently hovered item will be slightly enlarged and adjust the box shadow. We’ll also set a high z.index to guarantee that the item will always be on top of the other ones when we hover over it:

.ib-container article.active{
	transform: scale(1.05);
	box-shadow:
		0px 0px 0px 10px rgba(255,255,255,1),
		1px 11px 15px 10px rgba(0,0,0,0.4);
	z-index: 100;
	opacity: 1;
}

Last, but not least, we’ll set the opacity of the text elements to 1:

.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
	opacity; 1;
}

And that’s all the style! Let’s have a look at the JavaScript.

The JavaScript

So, when we hover over an article, we will give all the other articles the class blur and the current one will receive the class active:

var $container	= $('#ib-container'),
	$articles	= $container.children('article'),
	timeout;

$articles.on( 'mouseenter', function( event ) {

	var $article	= $(this);
	clearTimeout( timeout );
	timeout = setTimeout( function() {

		if( $article.hasClass('active') ) return false;

		$articles.not($article).removeClass('active').addClass('blur');

		$article.removeClass('blur').addClass('active');

	}, 75 );

});

$container.on( 'mouseleave', function( event ) {

	clearTimeout( timeout );
	$articles.removeClass('active blur');

});

And that’s all! I hope you enjoyed this little tutorial and find it useful!

View demo Download source

View demo Download source

After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.

The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. We’ll be alternating the sides to create a random look.

So, let’s start!

The Markup

The HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. The left and right elements will either contain a h2 heading, a circular link with a background image or a description in form of a h3 element with a link and a span:

<div id="ss-container" class="ss-container">
	<div class="ss-row">
		<div class="ss-left">
			<h2 id="november">November</h2>
		</div>
		<div class="ss-right">
			<h2>2011</h2>
		</div>
	</div>
	<div class="ss-row ss-medium">
		<div class="ss-left">
			<a href="#" class="ss-circle ss-circle-1">Some title</a>
		</div>
		<div class="ss-right">
			<h3>
				<span>November 28, 2011</span>
				<a href="#">Some Title</a>
			</h3>
		</div>
	</div>
	<!-- more rows... -->
</div>

For the circles we’ll have three different sizes and we’ll indicate that but giving the respective row the class of “ss-small”, “ss-medium” or “ss-large”.
Let’s look at the style.

The CSS

The container will occupy all the width and we’ll set the overflow to hidden because we don’t want a scrollbar to appear when we move the left and right elements out of if:

.ss-container{
    width: 100%;
    position: relative;
    text-align: left;
    float: left;
	overflow: hidden;
	padding-bottom: 500px;
}

To create the middle line throughout the container, we’ll use a pseudo element that we’ll position in the middle of the container:

.ss-container:before{
    position: absolute;
    width: 4px;
    background: rgba(17,17,22,0.8);
    top: 0px;
    left: 50%;
	margin-left: -2px;
    content: '';
    height: 100%;
}

The row will serve as a wrapper for the left and right elements:

.ss-row{
    width: 100%;
    clear: both;
    float: left;
    position: relative;
    padding: 30px 0;
}

The two lateral elements will occupy half of the width:

.ss-left, .ss-right{
    float: left;
    width: 48%;
    position: relative;
}
.ss-right{
    padding-left: 2%;
}
.ss-left{
    text-align: right;
    float: left;
    padding-right: 2%;
}

The headings will have the following style:

.ss-container h2{
    font-size: 40px;
    text-transform: uppercase;
    color: rgba(78,84,123,0.2);
	text-shadow: 0px 1px 1px #fff;
	padding: 20px 0px;
}
.ss-container h3{
    margin-top: 34px;
	padding: 10px 15px;
	background: rgba(26, 27, 33, 0.6);
	text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
}

To create a circle, we’ll set the border radius of the anchor to 50% and we’ll add some neat box shadow:

.ss-circle{
    border-radius: 50%;
    overflow: hidden;
    display: block;
    text-indent: -9000px;
    text-align: left;
    box-shadow:
		0px 2px 5px rgba(0,0,0,0.7) inset,
		0px 0px 0px 12px rgba(61,64,85,0.3);
	background-size: cover;
	background-color: #f0f0f0;
	background-repeat: no-repeat;
	background-position: center center;
}

We’ll have three different circle sizes and depending on which side we are we’ll make the circle float either left or right:

.ss-small .ss-circle{
	width: 100px;
	height: 100px;
}
.ss-medium .ss-circle{
	width: 200px;
	height: 200px;
}
.ss-large .ss-circle{
	width: 300px;
	height: 300px;
}
.ss-left .ss-circle{
    float: right;
    margin-right: 30%;
}
.ss-right .ss-circle{
    float: left;
    margin-left: 30%;
}

We’ll use the pseudo element :before and :after in order to create the line and the arrow that will point to the middle line. The width will be defined as a percentage so that it adjust to the screen size. We’ll also center it by setting the top to 50% and correct the position by setting the margin-top to -3px. Depending on where we are (left or right side) we want the position to be different:

.ss-circle-deco:before{
	width: 29%;
	height: 0px;
	border-bottom: 5px dotted #ddd;
	border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
	box-shadow: 0px 1px 1px #fff;
	position: absolute;
	top: 50%;
	content: '';
	margin-top: -3px;
}
.ss-left .ss-circle-deco:before{
    right: 2%;
}
.ss-right .ss-circle-deco:before{
    left: 2%;
}

The little arrow will be created by the border style and depending on if it’s a child of the left or right side, we’ll set the according border and position:

.ss-circle-deco:after{
	width: 0px;
	height: 0px;
	border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -10px;
}
.ss-left .ss-circle-deco:after{
	right: 0;
	border-right: 10px solid rgba(17,17,22,0.8);
}
.ss-right .ss-circle-deco:after{
	left: 0;
	border-left: 10px solid rgba(17,17,22,0.8);
}

Because of the different circle sizes, we’ll need to adjust the position of the headings on the other side. We want them to be at the height of the arrow, so we’ll set the margins differently (the one for ss-small is already set in the circle itself):

.ss-container .ss-medium h3{
	margin-top: 82px;
}
.ss-container .ss-large h3{
	margin-top: 133px;
}
.ss-container .ss-left h3{
	border-right: 5px solid rgba(164,166,181,0.8);
}
.ss-container .ss-right h3{
	border-left: 5px solid rgba(164,166,181,0.8);
}

The style for the description:

.ss-container h3 span{
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    display: block;
    padding-bottom: 5px;
}
.ss-container h3 a{
    font-size: 28px;
    color: rgba(255,255,255,0.9);
    display: block;
}
.ss-container h3 a:hover{
	color: rgba(255,255,255,1);
}

Each circle is going to have a different background image:

.ss-circle-1{
    background-image:url(../images/1.jpg);
}
.ss-circle-2{
    background-image: url(../images/2.jpg);
}
.ss-circle-3{
    background-image: url(../images/3.jpg);
}
/* and so on... */

And that’s all the style! Let’s take a look at the JavaScript.

The JavaScript

The main idea is to initially show all the side elements that are visible on the viewport. All the other elements will be hidden by setting their left or right value to -50%. If the perspective option is set to true, then these elements will be translated and rotated on the y-axis, with the opacity set to 0. On scroll, we want to show the lateral elements by sliding them to position 0 (left or right, respectively), or in case of perspective, translate / rotate them accordingly once they are in the viewport.

Let’s start by defining some variables:

	// the row elements
var $rows			= $('#ss-container > div.ss-row'),
	// we will cache the inviewport
	// rows and the outside viewport rows
	$rowsViewport, $rowsOutViewport,
	// navigation menu links
	$links			= $('#ss-links > a'),
	// the window element
	$win			= $(window),
	// we will store the window sizes here
	winSize			= {},
	// used in the scroll setTimeout function
	anim			= false,
	// page scroll speed
	scollPageSpeed	= 2000 ,
	// page scroll easing
	scollPageEasing = 'easeInOutExpo',
    // perspective?
    hasPerspective	= true,
    perspective	= hasPerspective && Modernizr.csstransforms3d,

We’ll have the following functions:

// initialize function
init			= function() {
	// get window sizes
	getWinSize();
	// initialize events
	initEvents();
	// define the inviewport selector
	defineViewport();
	// gets the elements that match the previous selector
	setViewportRows();
	// if perspective add css
	if( perspective ) {
		$rows.css({
			'-webkit-perspective'		: 600,
			'-webkit-perspective-origin'	: '50% 0%'
		});
	}
	// show the pointers for the inviewport rows
	$rowsViewport.find('a.ss-circle').addClass('ss-circle-deco');
	// set positions for each row
	placeRows();
},

defineViewport defines a selector that gathers the row elements that are initially visible. An element is visible if its top is less than the window’s height. These elements will not be affected when scrolling the page:

defineViewport	= function() {

	$.extend( $.expr[':'], {

		inviewport	: function ( el ) {
			if ( $(el).offset().top < winSize.height ) {
				return true;
			}
			return false;
		}

	});

},

setViewportRows checks which rows are initially visible:

setViewportRows	= function() {

	$rowsViewport 		= $rows.filter(':inviewport');
	$rowsOutViewport	= $rows.not( $rowsViewport )

},

getWinSize gets the window width and height:

getWinSize		= function() {

	winSize.width	= $win.width();
	winSize.height	= $win.height();

},

And now let's initialize some events:

	initEvents		= function() {

		// navigation menu links.
		// scroll to the respective section.
		$links.on( 'click.Scrolling', function( event ) {

			// scroll to the element that has id = menu's href
			$('html, body').stop().animate({
				scrollTop: $( $(this).attr('href') ).offset().top
			}, scollPageSpeed, scollPageEasing );

			return false;

		});

		$(window).on({
			// on window resize we need to redefine
			// which rows are initially visible
			// (this ones we will not animate).
			'resize.Scrolling' : function( event ) {

				// get the window sizes again
				getWinSize();
				// redefine which rows are initially
				// visible (:inviewport)
				setViewportRows();
				// remove pointers for every row
				$rows.find('a.ss-circle').removeClass('ss-circle-deco');
				// show inviewport rows and respective pointers
				$rowsViewport.each( function() {

					$(this).find('div.ss-left')
						   .css({ left   : '0%' })
						   .end()
						   .find('div.ss-right')
						   .css({ right  : '0%' })
						   .end()
						   .find('a.ss-circle')
						   .addClass('ss-circle-deco');

				});

			},
			// when scrolling the page change
			// the position of each row
			'scroll.Scrolling' : function( event ) {

				// set a timeout to avoid that the
				// placeRows function gets called on
				// every scroll trigger
				if( anim ) return false;
				anim = true;
				setTimeout( function() {

					placeRows();
					anim = false;

				}, 10 );

			}
		});

	},

placeRows sets the position of the rows (left and right row elements). Both of these elements will start with -50% for the left/right (not visible). This value should be 0% (final position) when the element is in the center of the window.

placeRows		= function() {
		// how much we scrolled so far
	var winscroll	= $win.scrollTop(),
		// the y value for the center of the screen
	winCenter	= winSize.height / 2 + winscroll;

	// for every row that is not inviewport
	$rowsOutViewport.each( function(i) {

		var $row	= $(this),
			// the left side element
			$rowL	= $row.find('div.ss-left'),
			// the right side element
			$rowR	= $row.find('div.ss-right'),
			// top value
			rowT	= $row.offset().top;

		// hide the row if it is under the viewport
		if( rowT > winSize.height + winscroll ) {

			if( perspective ) {

				$rowL.css({
					'-webkit-transform'	: 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
					'opacity'			: 0
				});
				$rowR.css({
					'-webkit-transform'	: 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
					'opacity'			: 0
				});

			}
			else {

				$rowL.css({ left 		: '-50%' });
				$rowR.css({ right 		: '-50%' });

			}

		}
		// if not, the row should become visible
		// (0% of left/right) as it gets closer to
		// the center of the screen.
		else {

				// row's height
			var rowH	= $row.height(),
				// the value on each scrolling step
				// will be proporcional to the distance
				// from the center of the screen to its height
				factor 	= ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ),
				// value for the left / right of each side of the row.
				// 0% is the limit
				val		= Math.max( factor * 50, 0 );

			if( val <= 0 ) {

				// when 0% is reached show the pointer for that row
				if( !$row.data('pointer') ) {

					$row.data( 'pointer', true );
					$row.find('.ss-circle').addClass('ss-circle-deco');

				}

			}
			else {

				// the pointer should not be shown
				if( $row.data('pointer') ) {

					$row.data( 'pointer', false );
					$row.find('.ss-circle').removeClass('ss-circle-deco');

				}

			}

			// set calculated values
			if( perspective ) {

				var	t = Math.max( factor * 75, 0 ),
					r = Math.max( factor * 90, 0 ),
					o = Math.min( Math.abs( factor - 1 ), 1 );

				$rowL.css({
					'-webkit-transform'	: 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
					'opacity'           : o
				});
				$rowR.css({
					'-webkit-transform'	: 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
					'opacity'		: o
				});

			}
			else {

				$rowL.css({ left 	: - val + '%' });
				$rowR.css({ right 	: - val + '%' });

			}

		}	

	});

};

return { init : init };

Demos

Check out the two demos, one with the "normal" slide in and one with the 3D sliding:

• Default demo
• Perspective Demo (Webkit only)

And that's it! I hope you enjoyed this tutorial and find it useful!

View demo Download source

View demo Download source

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.

We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines.

The image used in the demo is by Andrey & Lili. They are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

The HTML

The structure will simply be an h2 element with an anchor inside. We’ll wrap the headline in a container:

<div id="letter-container" class="letter-container">
	<h2><a href="#">Sun</a></h2>
</div>

Then we’ll call the Lettering.js plugin, so that every letter gets wrapped in a span.

Now, let’s take a look at each example. I’ll show all the styles that are relevant to the effect. In the downloadable files, you can check out all the other styles, like the positioning of the headline, the fonts and so on.

In order not to bloat the tutorial, I will not be showing any CSS vendor prefixes. The downloadable files contain them, of course.

Example 1

In the first example we want to skew the letters in order to create bit of perspective. But we also want to change the word on hover, so our structure will contain an additional link element inside of the h2. For the effect to work nicely, we’ll choose two words with the same number of letters:

<div id="letter-container" class="letter-container">
	<h2><a href="#">Chaos</a></h2>
	<h2><a href="#">Order</a></h2>
</div>

We’ll give the link element an absolute position and make the second word disappear by giving it the opacity 0:

.letter-container h2 a{
	text-align: center;
	text-transform: uppercase;
	font-size: 150px;
	position: absolute;
	width: 800px;
	height: 180px;
	top: 0px;
	left: 50%;
	margin-left: -400px;
	transition: all 0.3s linear;
}
.letter-container h2 a:nth-child(2){
	opacity: 0;
}

The spans will have some characteristic text shadow and a transition. The even children of will be skewed 10 degrees and the odd ones -10 degrees:

.letter-container h2 a span{
	display: inline-block;
	position: relative;
	width: 120px;
	margin: 0px;
	transition: all 0.3s linear;
	text-shadow:
		2px 2px 2px rgba(0,0,0,0.6),
		1px 1px 2px rgba(0,0,0,0.4),
		0px 0px 2px rgba(255,255,255,0.9);
}
.letter-container h2 a span:nth-child(odd){
	transform: skewY(10deg);
	background: #333;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	z-index: 10;
}
.letter-container h2 a span:nth-child(even){
	transform: skewY(-10deg);
	background: #666;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.3);
	z-index: 10;
}

When we hover over the h2 element, we want the second link element to appear and the first to disappear:

.letter-container h2:hover a:nth-child(1){
	opacity: 0;
}
.letter-container h2:hover a:nth-child(2){
	opacity: 1;
}

Also, we want to straighten the letters out:

.letter-container h2:hover a span{
	transform: skewY(0deg);
	background: #680121;
}
.letter-container h2 a span:hover{
	color: #f6b0c5;
}

Example 2

In the second example we’ll play a bit with pseudo elements. First, we’ll style each span in a way to look like a polaroid:

.letter-container h2 a span{
	display: inline-block;
	position: relative;
	width: 200px;
	height: 140px;
	background: #000;
	line-height: 140px;
	font-size: 120px;
	margin: 3px;
	background-position: 50% 0%;
	background-size: 200px 267px;
	color: #fff;
	text-shadow:
		0px 0px 1px #fff,
		2px 2px 5px rgba(0,0,0,0.4);
	border-color: #fff;
	border-style: solid;
	border-width: 10px 10px 45px 10px;
	box-shadow:
		2px 2px 8px 4px rgba(0,0,0,0.9),
		0px 0px 2px rgba(0,0,0,0.2) inset;
	transition: all 0.3s ease-in-out;
}

We’ll then add a pseudo element that will contain a wicked gradient, making our polaroid look more real:

.letter-container h2 a span:before{
	content:'';
	position: absolute;
	width: 220px;
	height: 195px;
	top: -10px;
	left: -10px;
	background: linear-gradient(-45deg, rgba(14,14,14,0.32) 0%,rgba(127,127,127,0.21) 18%,rgba(170,170,170,0.11) 34%,rgba(201,201,201,0) 51%,rgba(242,242,242,0.1) 66%,rgba(255,255,255,0.18) 79%,rgba(71,69,69,0.32) 100%);
}

Now, we’ll rotate the odd and even children differently to create a random look:

.letter-container h2 a span:nth-child(even){
	transform: rotate(3deg);
}
.letter-container h2 a span:nth-child(odd){
	transform: rotate(-5deg);
}

For each character (we are using the classes applied by lettering.js but we could also use the nth-child selector) we will add a different background image:

.letter-container span.char1{
	background-image: url(../images/1.jpg);
}
.letter-container span.char2{
	background-image: url(../images/2.jpg);
}
.letter-container span.char3{
	background-image: url(../images/3.jpg);
}
.letter-container span.char4{
	background-image: url(../images/4.jpg);
}
.letter-container span.char5{
	background-image: url(../images/5.jpg);
}

On hover over the whole link, we will rotate the spans and scale them down:

.letter-container h2 a:hover span:nth-child(even){
	transform: scale(0.9) rotate(-5deg);
}
.letter-container h2 a:hover span:nth-child(odd){
	transform: scale(0.9) rotate(3deg);
}

The specific span that we are hovering will have an animation that makes the background image move:

.letter-container h2 a span:nth-child(even):hover,
.letter-container h2 a span:nth-child(odd):hover{
	animation: moveImg 9s linear infinite forwards;
	color: rgba(255,255,255,0.4);
	text-shadow:0px 0px 5px rgba(0,0,0,0.1);
	transform: scale(1.1);
	z-index: 10;
	box-shadow:
		2px 2px 20px 4px rgba(0,0,0,0.6),
		0px 0px 2px rgba(0,0,0,0.2) inset;
}
@keyframes moveImg {
    0%{
		background-position: 50% 0%;
	}
	50%{
		background-position: 50% 100%;
	}
	100%{
		background-position: 50% 0%;
	}
}

Example 3

In the third example we will apply an animation to the span class which will run once when the page is loaded. We will make a blurry letter become sharp. We will also use a mask to add some texture to the letters (only Webkit browsers currently):

.letter-container h2 a span {
	font-size: 105px;
	color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
	mask-image: url(../images/mask2.png);
	transition: all 0.3s linear;
	animation: sharpen 0.6s linear backwards;
}

When hovering over a letter we’ll change its color:

.letter-container h2 a span:hover{
	color: #3f7f75;
}

We’ll create some random appearence of the letters by giving each letter an animation delay:

.letter-container h2 a span:nth-child(1) {
	animation-delay: 1.2s;
}
.letter-container h2 a span:nth-child(2) {
	animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
	animation-delay: 1s;
}
/* ... and so on for all the letters */

The animation makes the letter appear blurry with a text-shadow with high fuzziness and a transparent color. Then it will appear sharpened by turning into a letter with solid color and a subtle text shadow:

@keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #444;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #444;
   	color: transparent;
 }
 100% {
    color: #444;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
 }
}

Example 4

This example is quite different from all the others because we will apply some more jQuery. To understand what we are doing, I will show you what our jQuery function is making out of the headline. The structure that is created for each letter span after we apply lettering.js is the following:

<div class="twrap">
	<div class="tbg"><span>P</span></div>
	<div class="tup">
		<div class="tfront"><span>P</span></div>
		<div class="tback"><span>P</span></div>
	</div>
	<div class="tdown"><span>P</span></div>
</div>

Now, why such a structure? We want to play with perspective and 3d transforms, so we need a few more elements to make this work.
We want this headline to look like an airport information board and when we hover over a span, we want the little top element to fall down, but in 3D! This will only work in a Webkit browser, but we will have a nice alternative for the others.

So, let’s start by styting that new wrapper. It will be the container with the persepctive:

.letter-container h2 .twrap{
	position: relative;
	display: inline-block;
	width: 100px;
	height: 120px;
	line-height: 120px;
	font-size: 120px;
	border: 15px solid rgba(0,0,0,0.5);
	-webkit-perspective: 400;
	box-shadow: 1px 1px 4px #000;
}

Then we’ll style the background letter, which will be yellow:

.letter-container h2 .tbg{
	background: #121212;
	position: absolute;
	color: #f2c200;
	width: 100%;
	height: 100%;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}

The down part of the letter in both the “tdown” and the “tup” (“tback”) container will be pulled up with a negative margin, because we just want to show the lower part:

.letter-container h2 .tdown{
	height: 50%;
	top: 50%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	z-index: 1;
	background: #151515;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
	transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span{
	display: block;
	margin-top:-60px;
}

All the elements will have an aboslute position. The elements inside of “tup” will have -webkit-backface-visibility: hidden. Like that we’ll be able to rotate “tback” in 3d space and then “tup” when we hover:

.letter-container h2 .tup{
	height: 50%;
	width: 100%;
	position: absolute;
	z-index: 10;
	-webkit-transform-origin: 50% 100%;
	transition: all 0.3s linear;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront,
.letter-container h2 .tup .tback{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	background: #151515;
}
.letter-container h2 .tup .tback{
	background: #121212;
	color: #f2c200;
}
.csstransforms3d .letter-container h2 .tup .tback{
	-webkit-transform: rotateX(-180deg);
}
.csstransforms3d .letter-container h2 a .twrap:hover .tup{
	-webkit-transform: rotateX(-180deg);
}

When we dont’ have support for the 3d transform then we’ll not show “tback”. We’ll instead animate “tup” and “tdown” to move to the back:

/* For browsers with no 3d transfrom support */
.no-csstransforms3d .letter-container h2 .tup .tback{
	display: none;
}
.no-csstransforms3d .letter-container h2 a .twrap:hover .tup{
	animation: moveBackUp 0.7s ease-in-out forwards;
}
.no-csstransforms3d .letter-container h2 a .twrap:hover .tdown{
	animation: moveBackDown 0.7s ease-in-out forwards;
}
@keyframes moveBackUp {
    0%{
		transform: translateY(0%);
	}
	50%{
		transform: translateY(-120%);
		z-index: -1;
	}
	100%{
		transform: translateY(0%);
		z-index: -1;
	}
}
@keyframes moveBackDown {
    0%{
		transform: translateY(0%);
	}
	50%{
		transform: translateY(120%);
		z-index: -1;
	}
	100%{
		transform: translateY(0%);
		z-index: -1;
	}
}

Example 5

Ok, example 5 looks crazy: we’ll create a text shadow that “elevates” the letters. We’ll also create a pseudo element which has a superhero as background:

.letter-container h2 a:before{
	content: '';
	position: absolute;
	z-index: 0;
	width: 525px;
	height: 616px;
	background: transparent url(../images/superhero.png) no-repeat center center;
	background-size: 40%;
	top: 0px;
	left: 50%;
	margin-left: -277px;
	transition: all 0.3s ease-in-out;
}

On hover, we will animate the background size to make the superhero larger:

.letter-container h2 a:hover:before{
	background-size: 100%;
}

The span will have the text-shadow that “elevates” the letters and on hover, we will move the letter down by adding a padding and changing the shadow:

.letter-container h2 a span{
	color: #ff3de6;
	float:left;
	position: relative;
	z-index: 100;
	transition: all 0.3s ease-in-out;
	text-shadow:
	  0px -1px 3px #cb4aba,
	  0 4px 3px #934589,
	  2px 15px 5px rgba(0, 0, 0, 0.2),
	  1px 20px 10px rgba(0, 0, 0, 0.3);
}
.letter-container h2 a span:hover{
	color: #e929d0;
	padding-top: 10px;
	text-shadow:
	  0px -1px 3px #cb4aba,
	  0 4px 3px #934589,
	  1px 1px 10px rgba(0, 0, 0, 0.2);
}

Example 6

In this example we’ll do something similar like in demo 3, except that we’ll animate the letters in order.
We’ll also apply a mask that will give some texture to the letters:

.letter-container h2 a {
	text-align: center;
	font-size: 130px;
	line-height: 160px;
	display: block;
	padding-bottom: 30px;
	mask: url(../images/mask.png) repeat;
}

The animation will sharpen the letters and we will apply a different animation delay to each child:

.letter-container h2 a span {
	color: #fff;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
	transition: all 0.3s linear;
	animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:hover{
	text-shadow: 0px 0px 40px #fff;
}
.letter-container h2 a span:nth-child(1) {
	animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
	animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
	animation-delay: 0.2s;
}
/* ...and so on for all the letters */

@keyframes sharpen {
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 100px #fff;
   	color: transparent;
 }
 90% {
   	opacity: 0.9;
   	text-shadow: 0px 0px 10px #fff;
   	color: transparent;
 }
 100% {
    color: #fff;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}

Example 7

In the last example we’ll create some circles for each letter and on hover we will add a radial gradient to make it appear as a sun:

.letter-container h2 a span{
	display: inline-block;
	background: #bfd4e2;
	color: #ecf0f2;
	text-shadow: 1px 1px 2px rgba(120,155,179,0.5);
	width: 200px;
	height: 200px;
	line-height: 200px;
	font-size: 100px;
	margin: 3px;
	cursor: pointer;
	border-radius: 50%;
	box-shadow:
		2px 2px 10px rgba(43,54,61, 0.4),
		0px 0px 0px 9px rgba(116,161,191,0.3) inset;
	transition: all 0.3s ease-in-out;
}
.letter-container h2 a:hover span{
	opacity: 0.3;
}

You can read a great explanation of the radial gradient here: CSS3 Radial Gradient Syntax Breakdown – Impressive Webs

.letter-container h2 a span:hover{
	opacity: 1;
	box-shadow:
		2px 2px 10px rgba(43,54,61, 0.4),
		0px 0px 0px 0px #fedc3f inset,
		0px 0px 100px 30px rgba(255,244,193,0.8);
	color: #ff8624;
	text-shadow:
		1px 1px 2px rgba(166,97,41,0.5),
		1px 1px 1px #e66212, 3px 3px 1px #fdff64,
		4px 4px 6px #ff7420;
	background-image:
		radial-gradient(
			center center,
			circle contain,
			#fedc3f 0%, #ff7420 100%
			);
}

And that’s it! I hope you enjoyed creating some crazy typography effects with CSS3 and jQuery!
What’s your favorite one?

View demo Download source

View demo Download source

Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

The image used in the demo is by Andrey & Lili. They are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

How it works

In our example, we’ll be creating a circle with some kind of hover effect. The structure will simply be:

<a href="#" id="circle" class="ec-circle">
	<h3>Hovered</h3>
</a>

And the style will be the following:

.ec-circle{
	width: 420px;
	height: 420px;
	-webkit-border-radius: 210px;
	-moz-border-radius: 210px;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	font-family:'Kelly Slab', Georgia, serif;
	background: #dda994 url(../images/1.jpg) no-repeat center center;
	box-shadow:
		inset 0 0 1px 230px rgba(0,0,0,0.6),
		inset 0 0 0 7px #d5ad94;
	transition: box-shadow 400ms ease-in-out;
	display: block;
	outline: none;
}

Now, we will define a class for the hover effect but not a dynamic pseudo-class :hover. The idea is to apply this class then with jQuery when we enter the circular area of our element:

.ec-circle-hover{
    box-shadow:
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 20px #c18167,
		0 0 10px rgba(0,0,0,0.3);
}

Only when we have JavaScript disabled, we’ll add the pseudo-class. This style can be found in the noscript.css:

.ec-circle:hover{
    box-shadow:
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 20px #c18167,
		0 0 10px rgba(0,0,0,0.3);
}

The JavaScript

We are going to create a simple plugin that basically “redefines” the three events mentioned earlier. We’ll make the events only applicable on the circular shape:

$.CircleEventManager 			= function( options, element ) {

	this.$el			= $( element );

	this._init( options );

};

$.CircleEventManager.defaults 	= {
	onMouseEnter	: function() { return false },
	onMouseLeave	: function() { return false },
	onClick			: function() { return false }
};

$.CircleEventManager.prototype 	= {
	_init 				: function( options ) {

		this.options 		= $.extend( true, {}, $.CircleEventManager.defaults, options );

		// set the default cursor on the element
		this.$el.css( 'cursor', 'default' );

		this._initEvents();

	},
	_initEvents			: function() {

		var _self	= this;

		this.$el.on({
			'mouseenter.circlemouse'	: function( event ) {

				var el	= $(event.target),

						  circleWidth	= el.outerWidth( true ),
						  circleHeight	= el.outerHeight( true ),
						  circleLeft	= el.offset().left,
						  circleTop		= el.offset().top,
						  circlePos		= {
							  x		: circleLeft + circleWidth / 2,
							  y		: circleTop + circleHeight / 2,
							  radius: circleWidth / 2
						  };

				// save cursor type
				var cursor	= 'default';

				if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
					cursor = 'pointer';

				el.data( 'cursor', cursor );

				el.on( 'mousemove.circlemouse', function( event ) {

					var distance	= Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );

					if( !Modernizr.borderradius ) {

						// inside element / circle
						el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
						_self.options.onMouseEnter( _self.$el );

					}
					else {

						if( distance <= circlePos.radius && !el.data('inside') ) {

							// inside element / circle
							el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
							_self.options.onMouseEnter( _self.$el );

						}
						else if( distance > circlePos.radius && el.data('inside') ) {

							// inside element / outside circle
							el.css( 'cursor', 'default' ).data( 'inside', false );
							_self.options.onMouseLeave( _self.$el );

						}

					}

				});	

			},
			'mouseleave.circlemouse'	: function( event ) {

				var el 	= $(event.target);

				el.off('mousemove');

				if( el.data( 'inside' ) ) {

					el.data( 'inside', false );
					_self.options.onMouseLeave( _self.$el );

				}

			},
			'click.circlemouse'			: function( event ) {

				// allow the click only when inside the circle

				var el 	= $(event.target);

				if( !el.data( 'inside' ) )
					return false;
				else
					_self.options.onClick( _self.$el );

			}
		});

	},
	destroy				: function() {

		this.$el.unbind('.circlemouse').removeData('inside').removeData('cursor');

	}
};

When we enter with the mouse in the square bounding box of our circle, we bind the ‘mousemove’ event to the element and like that we can track if the distance of the mouse to the center of the element if longer than the radius. If it is, we know that we are not yet hovering the circular area of the element.

Once the distance of the mouse is shorter than the radius, we know that we entered the circle and we trigger our custom ‘mouseenter’ event.

We also only allow the click event when the mouse is inside of the circle.

In our example we will then apply our plugin to the regarding element. In our case, we are adding the hover class on ‘mouseenter’ and removing it on ‘mouseleave’.

$('#circle').circlemouse({
	onMouseEnter	: function( el ) {

		el.addClass('ec-circle-hover');

	},
	onMouseLeave	: function( el ) {

		el.removeClass('ec-circle-hover');

	},
	onClick			: function( el ) {

		alert('clicked');

	}
});

Remember that the “normal” pseudo hover class is also defined in the noscript.css which gets applied when JavaScript is disabled.

I hope you find this useful!

View demo Download source