Introducing the SoftLanding stack

SoftLanding uses a cross-fade effect to transition between a welcome message / image and the main webpage content. It’s great to use for temporary websites and landing pages.

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.

SoftLanding is quick and easy to setup. The product page provides detailed documentation on how to use this new stack. It is particularly good to use in many of the theme designs provided at ThemeFlood.

SoftLanding is provided as a free stack, but we kindly request a ‘pay what you want’ donation if you find it useful in your projects. All donations help greatly towards offsetting the development and support involved.

7 Likes

Thank you Will.
Made a donation.

1 Like

Hi Will,

I have made use of this stack on our “About us” website and it is quite amazing: https://www.ring-cafe-finsterwalde.de/ueber/ueber.html Thanks a lot!

I am still playing with some CSS parameters and the text in the stack. However, I have implemented it first on our start page where I have also your stacks “AdaptiveGrid” and “HighLight” in usage (https://www.ring-cafe-finsterwalde.de).

Here I perceived that the second grid cell was underlaying the first grid cell when the logo was disappearing. Is such a behavior meant with your compatibility comment: “However it’s worth noting that some stacks you add to a webpage do not like to be hidden”?

Best,
Sebastian

Hi Sebastian,

I don’t really understand the question. Are you claiming AdaptiveGrid breaks when you add SoftLanding?

The two links you posted seemed to be working correctly for me. Only the https://www.ring-cafe-finsterwalde.de/ueber/ueber.html appears to have the SoftLanding stack on it. After the effect has run, I am not seeing any breakage of the page.

If you can try to expand your question to include some more details, I’ll try my best to try and help you.

Incidentally a few users asked if I could add cookie support to this stack, so that once it has ‘landed softly’ once, the same animation sequence is not repeated again for the duration of the cookie (example, for 7 days).

I’ve already sent a copy of this new stack out to a few donors. If anyone else is interested in getting early-bird access to this update with cookie support, you know what to do ;-)

-Will.

1 Like

Hi Will,

I would also be interested in the early-bird access to the additional cookie support :-)

Let me try I to explain the AdaptiveGrid topic:

The AdaptiveGrid Stack has been setup as following according to the first screen shot

. The expected visual affect should be as it is currently implemented on my start page https://www.ring-cafe-finsterwalde.de.

When making use of the SoftLanding stack I perceive it different (see second attached screen shot

). Meaning, the pictures from Grid Cell 2 are hidden by Grid Cell 1 (see third screen shot ).

Hope this helps ;-)

Many thanks for your advice and best regards,
Sebastian

I looked at the website. The content in cell #2 (rightmost) of the grid appears to be a slider. So that is most likely why it doesn’t show after applying this effect. As mentioned already, some stacks do not like being hidden and a slider is a prime example of this. Often because they need to get width / height dimensions of the content they are about to display, and hiding content returns null (or NaN to be technically precise) and the content is not seen by the slider.

This is where you would typically use a ‘callback’. You would add some Javascript code to initiate the slider after the animation sequence has run. Then you are assured that the point at which the slider starts to execute corresponds to the same moment in time that the images are visible within the page.

Possibly if you were to resize the page yourself when the slider is missing, you may see it reappear again. This is an example of reinitializing the plugin - albeit this time responding to a change in screen size.

The temptation would be to go searching online for a pure CSS slider that is immune to this problem. The trouble with CSS sliders is the code can be almighty tedious when you add or remove slides. Plus most of the examples are not responsive / mobile compatible (due to their use of absolute positioning for each slide in the sequence) and lack basic features like pausing on hover. I may be able to engineer something that overcomes these issues.

Hi Will,

Many thanks for your investigation. This was also my assumption when raising the question. Unfortunately, I am not a Javascript expert being able to implement a ‘callback’ routine. So, if you or someone else could assist and support it would be very great. This could probably be used for other use cases as well. Otherwise, I will keep the current status :-)

Best,
Sebastian

The SoftLanding stack would need updating to support callbacks. The exact code to enter would depend on what slider is being used and how it has been configured. It’s a couple of hours work for me to do.

Unless I’m mistaken, it doesn’t look like you made any contribution for this stack yet. Or you donated under a different name? You will have to decide how much budget you have and contact me via email so we can come to an arrangement for updating the stack to include what you want.

Hi Will,

I have just sent you a donation as I did it for several other of your stacks in the past (as you know ;-) ).

Best,
Sebastian

Hi @Sebastian Many thanks for the kind donation.

If you can contact me via email through the website, I can send you an updated copy of the SoftLanding stack with cookie tracking support. PayPal only gave me a ‘no-reply’ email address I can’t contact you at.

Likewise if you still need my help with trying to get a slider to work in conjunction with SoftLanding, you can send me a sample RapidWeaver project file to take a closer look at.