Hello World
This is SoftLanding
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.
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:- 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.
- Drag and drop additional content into the SoftLanding stack, where denoted 'drop stacks here'. This can include simple text, HTML or a small image.
- In the SoftLanding settings, adjust parameters of your animation effect; like the delay, fade speed, and colours.
- 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;
}