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,
one created by Yolanda from Santander Design and on the Tim Holland website.

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 5;
  • Stacks Plugin 1.4 or above.

Version information:

For those who are interested in the changes made to the Fancy Intro stacks set.
Compatibility update for the Stacks plugin version 2, released on 27 november 2011.
In version 1.1.0 of the Fancy Intro stack some new options are added and the single text input field from the HUD is moved into two separated styled text fields. One for the text that appears above- and one that appears below the Fancy Intro line. We advice you to save your currently used text (in case this is advanced html code) in a temporary html stack before installing this newer version. After the upgrade you can simple copy and past the text into one of the styled text input fields.

New options:
  • Bold and Italic checkboxes to automatically style both the styled text input element with the selected setting;
  • Start delay, that can be used before the Fancy Intro line appears;
  • Besides hiding the Fancy Intro for a given number of days you are now also able to turn the days into hours with this checkbox;
  • Challenge mode, in case you are using a setup with a lot of other javascript on your pages it sometimes could take a fraction of a second before the Fancy Intro kicks in. In case this happens you can use this new option.
New stack:
Besides upgrading the existing Fancy Intro stack we’ve also added a new intro stack called Fancy Curtain. The stacks HUD is similar to that of the Fancy Intro but this stack has a completely different effect. Based on it’s name you’ve probably already guessed that it has a Curtain effect.

Released on 3 july 2011.
First public release on 19 may 2011.