Welcome to Curtains!
Although a somewhat gimmicky effect, there's certainly lots of instances where Curtains could actually prove to be fun stack to use. For example, if you were building a website for a special event (like a wedding or product launch) this could be a clever effect to use for displaying a prominent title heading or date. Likewise if your website was running a special promotion, this is a good way to grab the attention of site visitors.

Note: if you're looking for a more advanced page loading effect with many more options, be sure to look at our FancyIntro and PageLoader stacks too!

As you'd expect, Curtains is a fully responsive stack; meaning that it will work with newer smartphones, tablets, laptops and desktop computers. A generous array of customisable options are built into the stack. Curtains is compatible with all ThemeFlood themes. Compatibility with themes and addons from other developers varies. This stack requires a minimum of RapidWeaver 6 and Stacks 3.

Example

You have probably already seen the curtains stack on this webpage! It was the sliding clouds effect as the page loaded. You can reload this page to see it again if you missed it.

Setup

Follow these instructions carefully for using the Curtains stack...
  1. Once installed into Stacks, navigate onto a Stacks page type or add a Stacks page type to your project, if you've not done so already
  2. Open your Stacks Library. Search for 'curtains'
  3. Drag and drop a copy of the Curtains stack into the page. We recommend that you put Curtains at the top of the page, above any other stacks already on the page
  4. Double click the 'Welcome to Curtains' text to replace the text with your own message. Or you can leave the text blank, if no message is to be shown
  5. Keep the stack selected in edit mode, to view the choice of customisable options available for Curtains. For example, you can change the animation speeds, the overlay style and the text styling
  6. Preview your webpage in RapidWeaver to see how the effect works. Export or publish your website when done.

Important: We recommend that Curtains is the first stack you add to the page, so that it can be the first to load. Obviously if you are using images for the curtain drapes, it is recommend you keep these as small as possible; to promote faster loading. The CSS gradient requires the least bandwidth. Only add a single Curtain stack to each webpage. It is advisable not to mix Curtains with other theme or stack page loading effects.

When working with images in Curtains, you are provided with the option to specify images for both the left and right drapes. This allows you to use separate images for the left and right sides; to give the illusion of an image splitting into two and parting down the middle. But if you choose to, you can use a simple repeating pattern image for both sizes. A checkbox option is also provided, to let you toggle between tiled or non-repeating images.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.