Animation Alternative to Flash, CSS3, but 1/2 as complex as Javascript

Flash doesn’t load on all browsers, CSS3 has serious limitations, and Javascript is like a foreign language.  Is there an alternative, something easier to digest, but just as effective?  I would say the answer to this situation is jQuery.  jQuery is a JavaScript library that simplifies code, and, did I mention that it’s a free resource found here:  http://jquery.com/ . It comes with tutorials and information that explains the concept better than I can understand it so far (this is ideal for those of us that are learning, as it is about as difficult as learning ActionScript, but seems to have lots more possibilities).  Learning jQuery is the same as learning CSS, and I’ve found that finding tutorials is the easiest way to explore the different kinds of animations that are possible with jQuery.

Right now, I’m working on an effect that forces the user to interact by hovering over an image to reveal text.  With this code, you can control the speed of the transition and the effect.  It modifies HTML elements, so it’s an easy plug in for a web site built from HTML and CSS, unlike flash, which often requires an entirely flash-made web page to involve elements over the entirety of the page.  With jQuery, I can make changes to already written code in order to get the exact effect I want.  Let’s look at some code that will allow us to get these elements interacting with our web users:
First, begin your document with the following code:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script&gt;

<script type="text/javascript">
$(function() {
 $('ul.hover_block li').hover(function(){
 $(this).find('img').animate({top:'350px'},{queue:false,duration:500});
 }, function(){
 $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
 });
});
</script>
<style media="screen">

/*This looks complicated, but isn’t if we break it down. All jQuery starts with $, and the code tells the web site to function when the mouse hovers over ul (unordered list, this is a HTML basic), the image will move to a different position. This is basically like the animation commands I gave in CSS3 code last week. The third line of code tells (this) the web site to find “img” on the hover and animate it(in the page{from the top, move 182 px}. The duration measures how quickly the image will slide. To increase the speed, you should decrease the duration. To slow down the movement, you should increase the duration. The next part of this code is CSS:*/
ul.hover_block li{
list-style:none;
float:left;
background: #fff;
padding: 10px;
width:300px; position: relative;
margin-right: 20px;
}
ul.hover_block li a {
display: block;
position: relative;
overflow: hidden;
height: 474px;
width: 300px;
padding: 16px;
color: #000;
font: georgia;
}

ul.hover_block li a { text-decoration: none; }

ul.hover_block li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
/*This establishes the positioning of the page and the attributes of the elements. ul.hover_block li refers to each of the images on the web site that jQuery tells to move on hover*/

</style>
The last part is the easiest, the HTML:
<ul class=”hover_block”>
<li><a href=”index.html”><img src=”image1.gif” alt=”alttext” /> Words you want to appear on screen</a></li>
<li><a href=”index.html”><img src=”image2.gif” alt=”alttext” /> Text that you want to appear on screen</a></li>
</ul>
So you can see, with just a little extra code at the beginning and a reference to a very useful Javascript library, you can make any element on a page animated, providing an extra engaging experience for web goers that will work for almost every browser.

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s