Separate Front Page

Paris

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

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

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

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

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

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

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

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

Paris

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

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

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

Give me some time...

Paris

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

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

OK... published.

Hikin' Mike

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

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

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

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

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

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

Hikin' Mike

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

Looks good!