Web Studio Next - Animated fade effect
Web Studio Next
$5.00 to help keep this site up and running would be very much appreciated
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
class="fade"
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
class="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
<style>
.textborder {border:1px solid #767570;padding:10px;background:black;}
.linked div {cursor:pointer;}
</style>
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.
<style>
.linked div {cursor:pointer;}
</style>
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
class="textborder"
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
