Separate Front Page

Paris · November 25, 2017

Hey guys,
I would like to create a stand alone front page that just displays my logo (no menu or other clutter) for a few seconds before the Homepage/slide show appears.
Suggestions?

Hikin' Mike · November 25, 2017

Like these:
http://gallery.imagesinthebackcountry.com/Gallery-Examples/Logo-Entry-Page-with-Slideshow/n-cp6XGx
http://gallery.imagesinthebackcountry.com/Gallery-Examples/Logo-Entry-Page-with-Content/n-2m66Cq

Those are two examples I have because I don't use it on my site. Here is how to do it: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Popup-Logo-Page

Paris · November 25, 2017

Mike you are a coding machine.

It's like the second example without the transition - logo on screen then immediately to homepage/slideshow.

Hikin' Mike · November 25, 2017

I can't take credit for the code, I just made it available.

The two example are the same. They both should have a transition.

Paris · November 25, 2017

Okay... I'm lost already.
Since I already have an existing Homepage with a Menu and SlideShow do I work on HomePage or start from scratch?

Hikin' Mike · November 25, 2017

You don't "start from scratch" ie new page. All you're doing is delaying your home page (your slideshow) so you're logo will show first.

Hikin' Mike · November 25, 2017

In the example I posted, I DID create two pages because I DON'T use that on my site. I just wanted to have a "live example".

Paris · November 25, 2017

Okay... got this working after a bit of trial and error.

Paris · November 27, 2017

I'm back... tweaking the 'popup' logo.

QUESTION 1
Since my application is very basic.
1. Logo appears for a few seconds then disappears (no fade)
2. Slide show starts. (No fade in)
Question: There seems to be a lot of code in Hikin' Mike's CSS - is this all necessary?

QUESTION 2
How do I get the Logo to stay on screen longer?

FYI - I have not published this yet.

Hikin' Mike · November 27, 2017

Since you haven't published it, can you post the whole code you're using? I can then use that code on my testing page.

Paris · November 27, 2017

This is what I am using...

.sm-page-widget-image,
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer {
opacity: 0;
}

.sm-page-initialized .sm-page-layout-region-header,
.sm-page-initialized .sm-page-layout-region-footer {
position: relative;
z-index: 10;
opacity: 1;
}

.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer {
-webkit-transition: opacity 5s ease-in-out 2s;
-moz-transition: opacity 5s ease-in-out 2s;
-o-transition: opacity 5s ease-in-out 2s;
transition: opacity 5s ease-in-out 2s;
}

.sm-page-widget-image {
width: 100%;
margin-top: 0px;
position: absolute;
top: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

.sm-user-ui .sm-page-widget-content .sm-tile-single.sm-tile-center .sm-tile-wrapper {
border: 0;
box-shadow: none;
}

.sm-page-initialized .sm-page-widget-image {
-webkit-animation: 3s ease-in-out 0s normal none 1 running logoFade;
-moz-animation: 3s ease-in-out 0s normal none 1 running logoFade;
-o-animation: 3s ease-in-out 0s normal none 1 running logoFade;
animation: 3s ease-in-out 0s normal none 1 running logoFade;
}

.sm-page-initialized .sm-page-widget-image .sm-tile-single {
-webkit-animation: 0.1s ease-in-out 0s normal none 1 running logoHide;
-moz-animation: 0.1s ease-in-out 0s normal none 1 running logoHide;
-o-animation: 0.1s ease-in-out 0s normal none 1 running logoHide;
animation: 0.1s ease-in-out 0s normal none 1 running logoHide;
-webkit-transition-delay: 3s;
-moz-ransition-delay: 3s;
-o-transition-delay: 3s;
transition-delay: 3s;
}

.sm-user-ui .sm-page-background-mask {
opacity: 1 !important;
}

.sm-page-initialized .sm-page-background-mask {
opacity: 0 !important;
-webkit-transition: opacity 1s ease-in-out 3s;
-moz-transition: opacity 1s ease-in-out 3s;
-o-transition: opacity 1s ease-in-out 3s;
transition: opacity 1s ease-in-out 3s;
}

@keyframes logoFade {
0% { opacity: 0; }
33% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}

@-webkit-keyframes logoFade {
    0% { opacity: 0; }
    33% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
    }
@-moz-keyframes logoFade {
    0% { opacity: 0; }
    33% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
    }
@-o-keyframes logoFade {
    0% { opacity: 0; }
    33% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
    }

@keyframes logoHide {
0% { width: 100%; height: 100%; }
100% { visibility: hidden; }
}

@-webkit-keyframes logoHide {
    0% { width: 100%; height: 100%; }
    100% { visibility: hidden; }
    }

@-moz-keyframes logoHide {
    0% { width: 100%; height: 100%; }
    100% { visibility: hidden; }
    }
@-o-keyframes logoHide {
    0% { width: 100%; height: 100%; }
    100% { visibility: hidden; }
    }

@media only screen and ( max-width: 670px ) {

.sm-page-widget-image { 
    display: none; 
    }

}

Hikin' Mike · November 27, 2017

Give me some time...

Paris · November 27, 2017

No rush Mike appreciate the help.

Can I throw in one more thing pls.

When the logo first appears the 'menu' also appears - is there a way to have the logo appears on a clean page?

Hikin' Mike · November 27, 2017

Looks like you have the correct CSS. Just to be sure, I copied your code into the example page and it works.

Without seeing your site, I can't help anymore.

Paris · November 27, 2017

OK... published.

Hikin' Mike · November 27, 2017

Forgot you are using a left-menu and not top menu. I'll have to do some testing and I'll get back to you.

Hikin' Mike · November 28, 2017

I'm kind of flying blind here because I can't change my site to a left menu like your site.

One thing I noticed is you have two sets of code. You will need to remove both sets and use this instead:

.sm-page-widget-image,  
.sm-user-ui .sm-tiles-cover .sm-image,
.sm-user-ui .sm-page-layout-region-left,
.sm-user-ui .sm-page-layout-region-center .sm-page-widget-slideshow {
    opacity: 0;
    }       

    .sm-user-ui .sm-page-layout-region-left,
    .sm-user-ui .sm-page-layout-region-center .sm-page-widget-slideshow {
        -webkit-transition: opacity 5s ease-in-out 2s; 
           -moz-transition: opacity 5s ease-in-out 2s; 
             -o-transition: opacity 5s ease-in-out 2s; 
                transition: opacity 5s ease-in-out 2s; 
        }

.sm-page-initialized .sm-page-layout-region-left,
.sm-page-initialized .sm-page-layout-region-center .sm-page-widget-slideshow {
    position: relative;
    z-index: 10;
    opacity: 1;
    }   

.sm-page-widget-image {
    width: 100%;
    margin-top: 0px;/* adjust top logo */
    margin-left: -240;/* adjusts for left menu */
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-50%);    
       -moz-transform: translateY(-50%);    
         -o-transform: translateY(-50%);    
            transform: translateY(-50%);    
    }   

.sm-user-ui .sm-page-widget-content .sm-tile-single.sm-tile-center .sm-tile-wrapper {
    border: 0;
    box-shadow: none;
    }

.sm-page-initialized .sm-page-widget-image { 
    -webkit-animation: 3s ease-in-out 0s normal none 1 running logoFade;
       -moz-animation: 3s ease-in-out 0s normal none 1 running logoFade;
         -o-animation: 3s ease-in-out 0s normal none 1 running logoFade;
            animation: 3s ease-in-out 0s normal none 1 running logoFade;
    }

.sm-page-initialized .sm-page-widget-image .sm-tile-single { 
    -webkit-animation: 0.1s ease-in-out 0s normal none 1 running logoHide; 
       -moz-animation: 0.1s ease-in-out 0s normal none 1 running logoHide; 
         -o-animation: 0.1s ease-in-out 0s normal none 1 running logoHide; 
            animation: 0.1s ease-in-out 0s normal none 1 running logoHide; 
    -webkit-transition-delay: 3s; 
       -moz-transition-delay: 3s; 
         -o-transition-delay: 3s; 
            transition-delay: 3s;   
    }

.sm-user-ui .sm-page-background-mask { 
    opacity: 1 !important; 
    }

.sm-page-initialized .sm-page-background-mask { 
    opacity: 0 !important; 
    -webkit-transition: opacity 1s ease-in-out 3s; 
       -moz-transition: opacity 1s ease-in-out 3s; 
         -o-transition: opacity 1s ease-in-out 3s; 
            transition: opacity 1s ease-in-out 3s; 
    }

@keyframes logoFade {
    0% { opacity: 0; }
    33% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
    }

    @-webkit-keyframes logoFade {
        0% { opacity: 0; }
        33% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
        }
    @-moz-keyframes logoFade {
        0% { opacity: 0; }
        33% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
        }
    @-o-keyframes logoFade {
        0% { opacity: 0; }
        33% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
        }

@keyframes logoHide {
    0% { width: 100%; height: 100%; }
    100% { visibility: hidden; }
    }

    @-webkit-keyframes logoHide {
        0% { width: 100%; height: 100%; }
        100% { visibility: hidden; }
        }

    @-moz-keyframes logoHide {
        0% { width: 100%; height: 100%; }
        100% { visibility: hidden; }
        }
    @-o-keyframes logoHide {
        0% { width: 100%; height: 100%; }
        100% { visibility: hidden; }
        }

@media only screen and ( max-width: 670px ) {

    .sm-page-widget-image { 
        display: none; 
        }       

}

There are two spots you may need to adjust here:

.sm-page-widget-image {
    width: 100%;
    margin-top: 0px;/* adjust top logo */
    margin-left: -240px;/* adjusts for left menu */
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-50%);    
       -moz-transform: translateY(-50%);    
         -o-transform: translateY(-50%);    
            transform: translateY(-50%);    
    }

The margin-left: -240px should center your logo when displayed.

Paris · November 28, 2017

Holy CSS Batman! You are the bomb Mike!

I will play with the adjustments you suggest tomorrow but for now...WOW!

Is there an adjustment I can make so the transition to the Slide Show is not a fade but a hard cut?

I published so you can see it.

Hikin' Mike · November 28, 2017

My computer is older than dirt. So trying to set timing accurately is hard. You can try changing opacity 5s to opacity 0s. Other than that you'll just have to "play around".

Paris · November 28, 2017

Thank you Mike.
You have gone above and beyond and I really appreciate it.
I am going to work on the actual popup graphic today and head back into the studio for some camera time.

Paris · November 28, 2017

Update:
New popup page design is done and in place.
Played with some code numbers as suggested to modify positioning
Looking good!

Hikin' Mike · November 29, 2017

Had a chuckle!! You must be fun at parties...lol!

Looks good!

Separate Front Page

Comments