Tsooj Media

Stacks, Websites and Office Automation...






Fancy Intro
Price


  € 9,99

Fancy Intro stacks set


The Fancy Intro stacks set creates cross browser animated intro's, so your visitors no longer have to look at that “normally boring page loading” It's just like a Fancy Flash Intro but then without Flash since all it takes is a tiny jQuery script with some magic lines of CSS.

Examples


At the moment we are working on a demonstration video, you can already enjoy the Fancy Intro and Fancy Curtain examples.

More examples
Some other examples of the Fancy Intro stack in action on the Prestigious theme from Henk Vrieselaar

Fancy Intro Manual


For those who think that these stacks need some extra guidelines ... more details about the stack HUD and settings:
Fancy Intro HUD
Overlay colors
Select a start and end color for the Fancy Intro overlay gradient that is placed over the normal content during the Fancy Intro duration. If you don't need a gradient you simply select the same color twice.

Line colors
Select a start and end color for the Fancy Intro line that is used to create the animated effect. Just like the overlay the line also uses a gradient effect, so set select the same color twice in case you don't wan't to use this effect.

Text colors
Select the colors for the Fancy Intro text and the text shadow values that are automatically added to your text.

Font size (px)
Select the font size for the Fancy text.

Bold and Italic
Check if the Newsticker text should appear in Bold and/or Italic.

Custom CSS
Custom CSS to further style the Fancy text, like for example: “font-family: Georgia;“ (without the quotation marks) Remember you should ad the closing ; character.

Start delay
Start delay before the Fancy Intro line appears.
Line speed (ms)
Speed at which the Fancy Intro line appears from left to right.

Grow speed (ms)
Grow speed by which the Fancy Intro line grows from a single line into a complete page overlay gradient.

Fade speed (ms)
Fade speed after which the normal content appears and the Fancy Intro disappears.

Hide for (days)
If you want you can select a number of days before the Fancy Intro appears again.
During the configuration of your Fancy Intro setup the default value of 0 is required.

Hours instead of days
By default you can hide the Fancy Intro for a given number of days, use this checkbox if you would like to change that into hours.

Challenge mode
When the Fancy Intro stack is used in combination with a lot of other (imported) javascript based content it is possible that it takes a fraction of a second before the Fancy Intro is visible. If this is the case with your setup than you might consider this approach.

Note
Note that for all the input fields containing values in ms or px: all it takes is the number so thats without the input of ms or px.
Fancy Curtain HUD
Overlay colors
Select a start and end color for the Fancy Curtain overlay gradient that is placed over the normal content. If you don't need a gradient you simply select the same color twice.

Show overlay shadow
Show the overlay shadow effect while sliding the Fancy Curtain.

Text colors
Select the colors for the Fancy Intro text and the text shadow values that are automatically added to your text.

Font size (px)
Select the font size for the Fancy text.

Bold and Italic
Check if the Newsticker text should appear in Bold and/or Italic.

Custom CSS
Custom CSS to further style the Fancy text, like for example: “font-family: Georgia;“ (without the quotation marks) Remember you should ad the closing ; character.

Start delay
Start delay before the fadeout of the Fancy Curtain text.

Fade speed (ms)
Fade speed after which the Curtain sliding starts.
Hide for (days)
If you want you can select a number of days before the Fancy Curtain appears again.
During the configuration of your Fancy Intro setup the default value of 0 is required.

Hours instead of days
By default you can hide the Fancy Curtain for a given number of days, use this checkbox if you would like to change that into hours.

Challenge mode
When the Fancy Curtain stack is used in combination with a lot of other (imported) javascript based content it is possible that it takes a fraction of a second before the Intro is visible. If this is the case with your setup than you might consider this approach.

Note
Note that for all the input fields containing values in ms or px: all it takes is the number so thats without the input of ms or px.

FAQ


All currently known FAQ items are shown below
As shown in most of the examples the Fancy Intro stack is designed for the immediate available text from your webpage. Of course you can also use custom HTML or even references to Images if that is your cup of tea. But keep in mind that (depending on the internet speed of your visitor and the filesize) it could take just a little longer before an image is shown in the Fancy Intro.

Example code:
<img src="pathto_or_urlto/image.png" width="width" height="height" alt="Fancy Intro">
The Fancy Intro stack uses a Cookie named “atm_FancyIntroDays” to store its settings. This is a common technique used by a large amount of web services like for example Google Analytics or the RealMac Software Forum. The Cookie is automatically generated on a per domain base and detects if you are using it with http or https. So in case you would like to remove the settings by hand, use your browsers preferences dialog and look for the previous named Cookie.

Fancy Intro stacks set information


The Fancy Intro stacks set adds cross browser animated intro's to webpages, so that your visitors don't have to look at that “normally boring page loading”. This stack looks like a Flash based intro but all it takes is a tiny jQuery javascript with some magic CSS. So also iPhone and iPad visitors get to see your Fancy Intro.

All it takes to create a Fancy Intro or Curtain is adding one of the stacks onto your page, set the colors and animation speed ... you are ready to get Fancy.


What you get when purchasing this stack:
  • An installer for the Fancy Intro stacks set;
  • RapidWeaver example projects as shown in the demonstration;

Requirements:
  • RapidWeaver 4 or above;
  • Stacks Plugin 1.4 or above.