homepage animations

Blog #9

For my website, I wanted a really cool homepage with some menu animations.  I made some circles in photoshop that were going to be my buttons.  After getting them into Dreamweaver, I felt they needed something extra.  I first added a hover effect that makes the circle fade as you hover over it.  Then I added an animation that is also on the rollover. I will show how to make all of these happen.

This is what I started with:   

Capture3

and this is what I wanted it to look like on hover:

Capture1

  1. To get the fade out hover effect:

In your CSS sheet write IMG.fadeout {

Then you put the starting opacity, the amount of time for transitions (in seconds). You have to write this multiple ways so all browsers can read it.  You end up with this:

IMG.fadeOut {

opacity: 1;

transition: opacity .25s ease-in-out;

-moz-transition: opacity .25s ease-in-out;

-webkit-transition: opacity .25s ease-in-out;

}

Then you have to write it in for the hover part.  This is where you get to specify the amount of opacity you want it to have when you hover.  I went with 55% opacity.

IMG.fadeOut:hover {

opacity: .55;

}

You don’t actually end up doing anything with this tag.  When you’re in your HTML page, you insert your image that you want to fade out and add the tag “class= fadeout” .

*another helpful hint: you can add multiple class tags to something by just separating them with a space.  For example, I used the fadeout tag along with my animation tag and it ended up looking like this: “class= fadeout  animation”

  1. To get the animation effect.  This one was a bit more complicated.  I wanted the circles to not only fadeout, but to grow when I hovered.  I looked up the CSS for this and constructed it to fit what I wanted .

.animationcircle:hover {

-webkit-animation: cssAnimation 0.9685s 1 ease;

-moz-animation: cssAnimation 0.9685s 1 ease;

-o-animation: cssAnimation 0.9685s 1 ease;

}

The first line is what I named the CSS tag. “animationcircle”.  This is what you put in your class tag in your HTML sheet.  The next line is the amount of time it takes to see the effect happen (basically the instant you rollover it).

Then you add all of this:

@-webkit-keyframes cssAnimation {

from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }

to { -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }

}

@-moz-keyframes cssAnimation {

from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }

to { -moz-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }

}

@-o-keyframes cssAnimation {

from { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }

to { -o-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }

}

I wanted no rotation, and no skewing or translation.  All values for these are zero.   The from category is your starting point, so my scale starts out at 100% or 1 in this case.  Next you add the “to” line.  This is what you want to happen when you roll over. I wanted my circles to double in size, so I made the scale value 2.  These values are very easy to change around, and if you want to change your rotation when you hover or your skew, that is also easy to do.

here’s my website to see the full effect: jenniferknight.x10.mx   (You might have to zoom in your web browser because it seems to load differently on all of them)

That is how I got my homepage menu working!

JK

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