Streaming live at 10am (PST)

How to Create a Splash Intro with Timer and Close Button


#1

I'm building my site using 'Contemplate' template.
I want to create a loading screen (full page) which can be closed with a button and will pull up the home page (l nee a first full page promotion).
I want it to work like the 'Contact' button works in the contemplate template,
meaning - when you close it - it pulls up the rest of the home screen. and never can be open again. only when reloading the website..
AND that it will be pushed up after 3 sec if not pressed..
How should I make it?


Intro page which fades after a few seconds
#2

Hi @tomermelubanm, yes, you can create something like that, if I understand the question correctly smile Is something like this what you are looking for?

http://demokit.webflow.com/interactive-elements/splash-intro-page-load-timer

You can open the demokit to see how the examples work:

Demokit: https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page: Splash Intro (Page Load) Timer
Folder: Interactive Elements

Here the page loads and after 5000ms ( 5sec) will fade to the page. I also put a button that can be clicked at anytime, to fade to the page. You can adjust the timing in the Splash Intro Timer interaction. The Close Splash Intro interaction is assigned to the Button. It simply fades the si-container and sets it to display none.

Using timing is a very cool way to make complex effects smile Cheers, Dave


#3

Thanks Dave!
It really helps.

  • But

How can you make that it will only appear once - That it will not appear every time you will go back to the Homepage.


#4

Hi, @tomermelubanm, thanks, I was thinking load once at each page load with no possibility to open the window again during the same session smile

You would probably have to do something with javascript using custom code, possibly using cookies to get that effect. We do not have the option built in yet, but it is a good idea smile Hopefully that gives you a place to start from in your functional design. Cheers, Dave


#5