Web Studio Next - Animated fade effect
If you are not familiar with web studio refer to the instruction page
The Page we'll be Making
This tutorial we'll look at adding some jQuery to animate a fade for Text and Images a nice effect for photography.
Put this in the HEAD for both effects
Both effects only use a couple of lines of code so I combined them, you can still use them separatly if you like. It won't make any noticable difference in page size.
The Animated Fade In Effect
Put this class inside the Division for text or images
This will slowly fade in any text or image that has this class in it. It uses an animation and changes the object (for all browsers) from 50% faded out to no fading.
Linking an Entire Division
Web studio puts it's text objects inside a division. For each text object we can link that entire division, (like the example). You add one link like you always do to some text inside the text object and that's the link that will be used for the division.
Put this class inside the Division to make it all linked
Go to the HTML tab in Insert Object HTML select Inside DIV paste this class
To use both combine the two classes together like this
Adding the link cursor for the division
You may notice I have the cursor change for the linked division. I do that with css.
That makes the link cursor called a "pointer" show when the mouse is over that division so people know the whole thing is a link.
Adding a border to the text object division
With web studio you could just use "draw" and use a shape to put behind the text but I like to use a bit css to do that. Have a look at the Css Image border tutorial, those use the same border code and has an image border generator on that page.
So hopefully you found something here you can use for your site?
That makes the border, adds padding (a bit of space around the text) and makes the division black
Now to apply that style we again use a class
class="fade Linked textborder"
Finally for all three you would combine the classes like this
What else.. oh yeah, the menu.
For the border like the example, I added this css style above the jQuery inside the HEAD
Every little bit helps to keep this site up and running, thank-you.
Web Studio Next
These effects are not officially part of Web Studio