Hello World
This is SoftLanding
Options exist to customise the style and transitional effects. This is very-much a stack you can modify to match almost any website. More importantly, there are special safe-guards in place to protect against rare instances; like a person landing on your website without Javascript support.

The initial content shown as the page starts can comprise of either text or an image. Typically most users of this stack use it to display their company logo. This content is always centred both vertically and horizontally on the screen.

If you are seeking a stack that offers more complex animation sequences, take a look at the Curtains or FancyIntro stacks.

Example

Reload this webpage to see a simple example of SoftLanding.
 

Setup

Follow these instructions for getting SoftLanding setup in a project:
  1. Once installed into RapidWeaver, open your Stacks Library and drag and drop a copy of SoftLanding into your webpage. For best results, place it towards the top of a webpage, so that its code can run sooner.
  2. Drag and drop additional content into the SoftLanding stack, where denoted 'drop stacks here'. This can include simple text, HTML or a small image.
  3. In the SoftLanding settings, adjust parameters of your animation effect; like the delay, fade speed, and colours.
  4. Preview your webpage to see the result. Publish your webpage when done.

As normal, hovering your mouse over each setting displays a small informational tooltip about what it does.

To accomplish a cross-fade effect, you need to tell SoftLanding the class or ID selector that encloses all the content on your webpage. It is this class or ID selector that will be set to 'hidden' as the page loads, and then fades into view. In many ThemeFlood themes, the enclosing container is called #pageWrapper or #main. This may differ for themes from another company. You will either need to look at the page source code yourself to ascertain the name of the enclosing content container or hire us to help you. In some instances, it may be necessary to provide a comma-separated list of multiple page elements you need to start hidden.

Modifying content styling with CSS

It's easy to modify common aspects of styling with custom CSS code like this:

.soft_landing {
font-size: 5vw;
line-height: 2;
}
In this instance, the font size and line height of the content will be increased responsively in size, to suit different screen sizes. Enter custom CSS code in the RapidWeaver General Settings or Page Inspector boxes.

Compatibility

SoftLanding uses simple jQuery and CSS to achieve its effect. However it's worth noting that some stacks you add to a webpage do not like to be hidden. This is particularly true of any stack checking for visibility or making calculations. If you find other stacks in your webpage break after using SoftLanding, you will have to forego using it on this occasion. There are no quick workaround solutions and support or compatibility of other stacks is outside of our free support remit.
 

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.