jQuery Live

In these examples, the code below will be put into a production website at d-motif.net.

Example 1 : Scroll Event

The scroll event is becoming highly popular in current designs. Creating pages that scroll smoothly to content when pressing a link is a clean and attractive way to get a user to a section of content.

jQuery Code

//scroll script
$(document).ready(function() {//new anonymous function
	$('ul.menu a').bind('click',function(event){//bind click function to the menu list
	  var $anchor= $(this)//create new variable called Anchor
		$('html , body').stop().animate({//targeting the body and html to animate
		scrollTop:$($anchor.attr('href')).offset().top//scroll to anchor point
	}, 1500, 'easeInOutExpo');//at a speed of 15 ms and with easing
		event.preventDefault();//prevents multiple instances
		});//close click function
});//close anonymous function

//menu effect 

The CSS

ul.menu {
    margin:-4% 0 0 35%;
}


ul.menu li {
     display:inline;
     margin: 0 30px 0 0;
     list-style:none;
}

ul.menu li a {
     font-family:arial;
     font-size:30px;
     text-decoration:none;
     border-left:solid 5px #cdd7f9;
     color:#718de8;
     padding:0 20px 0 5px;
 }

The HTML

<ul class="menu">
<li><a href="#intro">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
<div id="wrapper">

<div id="contentMain">

<div id="intro">

</div>
<div id="about">

</div>


</div>
<div id="contact">
</div>

Working Code

See the working code at d-motif.net

Example 2 : Animate on Scroll Event

A long with scrolling that looks and functions nicely has become a new form of effect called Parrallaxing. This is when portions of the page move at different rates to create a desired effects. The code created below is very basic Tutorial from Pixel Acres.The example below was modified to give the desired effect while scrolling.

The jQuery Code

// parallaxing script

$(document).ready(function(){//new anonymous function
$(window).bind('scroll', function(e) {//binding the scroll event to the window
				plxScroll();//naming the event as a function function 
});//close anonymous function

function plxScroll() {//begin function script
	var scrolled = $(window).scrollTop();//var to get top position
	$('#fun').css('left',(0-(scrolled*.1))+'px');//adding a css to reposition the div tag
	$('#fun_a').css('top',(0-(scrolled*.2))+'px');//adding a css to reposition the div tag
	$('#fun_b').css('left',(0-(scrolled*-.1))+'px');//adding a css to reposition the div tag
	$('#fun_c').css('top',(0-(scrolled*-.3))+'px');//adding a css to reposition the div tag
                              }
});//close plxScroll function

I've added a left animation to give the illusions of particles moving in different directions. Also added a minus to get them to move in opposite direction. This code is very primitive, and is something to build on to get the effects wanted.Parrallaxing can get very complex when dealing with layers and index's so be ready to spend a lot of time making adjustments.

The CSS

#fun {
	background-image:url(../images/testbgA.png);
	background-repeat:repeat-y;
	background-size:cover;
	top:0px;
	overflow:hidden;
	height:100%;
	width:100%;
	position:fixed;
}

#fun_a {
	background-image:url(../images/bgdots.png);
	background-repeat:repeat-y;
	background-size:cover;
	top:0px;
	overflow:hidden;
	height:100%;
	width:100%;
	position:fixed;
}

#fun_b {
	background-image:url(../images/bgdots_b.png);
	background-repeat:repeat-y;
	background-size:cover;
	top:0px;
	overflow:hidden;
	height:100%;
	width:100%;
	position:fixed;
}

#fun_c {
	background-image:url(../images/bgdots.png);
	background-repeat:repeat-y;
	background-size:cover;
	top:0px;
	overflow:hidden;
	height:100%;
	width:100%;
	position:fixed;
}

The HTML

<div id="fun"></div>
<div id="fun_a"></div>
<div id="fun_b"></div>
<div id="fun_c"></div>

Working Code

The Working code can be seen at d-motif.net

The images are particulars created with Trapcode Particular. The Idea is to have them move at different directions to give some depth to the screen.

Example 3 : Hover effect

The hover effects is a nice simple way to add a flare to a website. In this "how to" , the effect will show icons on resolutions higher then 1024 width.

The jQuery

//menu effect 

$(document).ready(function(){//new anonymous function
      $('.menu li span').hide();//taget all span in menu li and hide them
						   });//close anonymous function

$(document).ready(function(){//new anonymous function						 
$('.menu li').hover(function(){//create hover event on menu li's
		$(this).stop(true).find('span').fadeIn();//fade in the selected li span
							}//end first action
		      , function() {//start second action to hover
			   $(this).stop(true).find('span').fadeOut();//fade out selected li span
	});//close hover function
});//close anonymous function

The CSS

This example, a ul has the class of menu. This is done to make sure it is separated from other UL's on the same page.

ul.menu {
    margin:-3% 0 0 35%;
}


ul.menu li {
     display:inline;
     margin:0px 30px 0 0;
     list-style:none;
}

ul.menu li a {
     font-family:arial;
     font-size:30px;
     text-decoration:none;
     border-left:solid 5px #cdd7f9;
     color:#718de8;
	 height:30px;
     padding:0 20px 0 5px;
}

The HTML

<ul class="menu">
<li><a href="#intro">Home</a><span><img src="images/homeIcon.jpg" alt="home" id="homeIcon"></span></li>
<li><a href="#about">About</a><span><img src="images/about.jpg" alt="about" id="aboutIcon"></span></li>
<li><a href="#portfolio">Portfolio</a><span><img src="images/portfolioicon.jpg" alt="Portfolio" id="portIcon"></span></li>
<li><a href="#contact">contact</a><span><img src="images/contact.jpg" alt="contact" id="conIcon"></span></li>
</ul> 

Working Code

The working code can be seen at d-motif.net

The icons were made in Photoshop.