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.
We'll make a page like the example add a border around the text and learn how to make that entire division a link.
Plus we'll use the Image border tutorial for the images and CSS link tutorial to make the menu.

Put this in the HEAD for both effects

The main focus will be the animated fade in effect then I'll show you how to make an entire division a link using a link in the text. We've covered the css links and
image borders so this time we'll do text borders.

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.
Go to the HTML tab in Insert Page HTML select Inside Head

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.
Go to the HTML tab in Insert Object HTML select Inside DIV paste this class

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

class="fade Linked"

Adding the link cursor for the division

You may notice I have the cursor change for the linked division. I do that with css.
Add this style above the jQuery link inside the HEAD

.textborder {border:1px solid #767570;padding:10px;background:black;}
.linked div {cursor:pointer;}

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?
If I made it too confusing combining too many things at once just ask me on the forum.

.linked div {cursor:pointer;}

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
Go to the HTML tab in Insert Object HTML select Inside DIV paste this class

class="fade Linked textborder"

Finally for all three you would combine the classes like this


What else.. oh yeah, the menu.

I just added some different colors to "linked boxes" I show you how to make in the
More than one link color on a page tutorial. That and added some image borders using the Adding borders to images using css tutorial.

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
If you have questions see the custom coding page