Popup when entering the website

LightHunters

Hi guys,

anybody know how I can get a sort of popup image when entering the website? You can find what I mean here: http://www.chrisburkard.com/
When entering the page, the logo is displayed and the header is hidden. After some seconds the logo disappeares and the menu slides down.

Any idea how I can create this popup image and the down-sliding menu also on my site (http://light-hunters.com)?

Thanks a lot in advance,
Tim

Hikin' Mike

I've looked into this in the past as I've had a few people ask about that. It's a bit "over my pay grade" right now. I'm 99% sure that @leftquark was the one that designed that for a client, probably before he joined SmugMug.

LightHunters

Thanks guys, I will give it a try and post my solution here (if i find one and get it working)

Hikin' Mike

@LightHunters said:
Thanks guys, I will give it a try and post my solution here (if i find one and get it working)

I forgot that I had part of it working on a testing page about 6 months ago. I'm in the process of fixing the bugs and when I do, I'll let you know. It's late here, so it will be tomorrow.

LightHunters

Great, thanks a lot Mike! :)

LightHunters

I managed to implement some animation. Instead of sliding the menu in, i chose to fade it in.
You can find the result at light-hunters.com

/Hide logo on mobile/
@media only screen and (max-device-width: 799px) {
.sm-tiles-uncropped {
display:none;}
}

.sm-page-layout-region-header {opacity: 0;}
.sm-page-initialized .sm-page-layout-region-header{
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}

.sm-page-layout-region-bottom {opacity: 0;}
.sm-page-initialized .sm-page-layout-region-bottom{
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}

.sm-page-initialized .sm-tiles-uncropped {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}

Hikin' Mike

@LightHunters said:
I managed to implement some animation. Instead of sliding the menu in, i chose to fade it in.
You can find the result at light-hunters.com

Good job! Since I'm not doing that "live", I put up an example here. Since I wanted text instead of a photo background, I had a few more hurdles to jump. It's a bit rough and I'm going to clean it up and add a tutorial when I'm done. My issue is my computer is OLD and it takes several minutes to load changes. Very frustrating.

http://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Popup-Logo-Page/n-hbbtC2

elmani

Wow, this is really impressive, although possibly beyond my technical skills. How would I actually use this cod to create something similar on my own site? Thanks

LightHunters

@elmani said:
Wow, this is really impressive, although possibly beyond my technical skills. How would I actually use this cod to create something similar on my own site? Thanks

It was easier than you would think. I just googled for an CSS animation generator, there are plenty. I used http://www.theappguruz.com/tag-tools/web/CSSAnimations/

Then you just need to change the class/object on which the animation should take effect.
.sm-page-initialized was already explained by @leftquark

Good luck!

elmani

Thanks @LightHunters... I've managed to add the code and it successfully fades in my menu/logo. However, what I would ideally like is the screen to start completely white except for my logo in the middle of the screen and for this to then fade away to show my normal front front page (i.e logo and menu at the top and carousel of images in the middle. Any advice would be appreciated. Best regards (www.elmani.com - currently with the fading menu)

Hikin' Mike

@elmani said:
Thanks @LightHunters... I've managed to add the code and it successfully fades in my menu/logo. However, what I would ideally like is the screen to start completely white except for my logo in the middle of the screen and for this to then fade away to show my normal front front page (i.e logo and menu at the top and carousel of images in the middle. Any advice would be appreciated. Best regards (www.elmani.com - currently with the fading menu)

You need a different approach to create your popup. I made a tutorial and you can see it here: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Popup-Logo-Page

You need the second option (Text/Gallery). Then you'll need to replace the three instances of .sm-page-widget-galleries to .sm-page-widget.sm-page-widget-17585654 .pic-wrapper. Also when you set the Mask to ON, you can change the color too.

elmani

Thanks Mike, as always, appreciate your time on this. I'm getting closer to making this work, but haven't cracked it yet. I've managed to get a logo to appear and disappear, but my background carousel is showing constantly and isn't appearing only after the logo goes. I've set it up on a test site as I didn't want to screw up my main site . https://test12test12.smugmug.com/ (the logo I'm using is just a temporary photo).. any thoughts? Thanks

Hikin' Mike

@elmani said:
Thanks Mike, as always, appreciate your time on this. I'm getting closer to making this work, but haven't cracked it yet. I've managed to get a logo to appear and disappear, but my background carousel is showing constantly and isn't appearing only after the logo goes. I've set it up on a test site as I didn't want to screw up my main site . https://test12test12.smugmug.com/ (the logo I'm using is just a temporary photo).. any thoughts? Thanks

Before I turn into a pumpkin for the night, I took a look and since you've changed to a test site, you're using the old widget numbers. If you replace .sm-page-widget.sm-page-widget-17585654 .pic-wrapper to this .sm-page-widget-18000575 on all three instances, it should work. Not sure why it didn't work on your real site, but without seeing it live, who knows.

It's possible you need to change your real site from .sm-page-widget.sm-page-widget-17585654 .pic-wrapper to this .sm-page-widget-17585654 on all three instances.

elmani

Works perfectly! Thanks. I've taken it down whilst I work on my logo, but really appreciate all the support!

Djm3006

@Hikin' Mike said:

@elmani said:
Thanks @LightHunters... I've managed to add the code and it successfully fades in my menu/logo. However, what I would ideally like is the screen to start completely white except for my logo in the middle of the screen and for this to then fade away to show my normal front front page (i.e logo and menu at the top and carousel of images in the middle. Any advice would be appreciated. Best regards (www.elmani.com - currently with the fading menu)

You need a different approach to create your popup. I made a tutorial and you can see it here: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Popup-Logo-Page

You need the second option (Text/Gallery). Then you'll need to replace the three instances of .sm-page-widget-galleries to .sm-page-widget.sm-page-widget-17585654 .pic-wrapper. Also when you set the Mask to ON, you can change the color too.

Nice work Mike

beardedlogic

@"Hikin' Mike"

Hello, y'all! I am a total newbie when it comes to coding. I've been tinkering on a page for about a week and I found Mike's tutorial on "Create a Popup Logo Page" to be very nearly what I wanted. However, I don't know how to tweak it to make it work right. The Photo Logo I'm using waits too long to appear and the gallery pops up without a fade. The Logo and Menu behave correctly. The photo logo I'm using also inherits the border and drop shadow of the main gallery. Any help would be beneficial. I'm so thankful for all the help y'all provide on this site and elsewhere.

Kase
'www.barefootedintherain.com'

beardedlogic

@"Hikin' Mike" I found your tutorial on "Popup Logo Page" to be exactly what I was looking for. However, I am such a newbie when it comes to coding I don't know what to do to make it work right. The photo block logo doesn't appear soon enough, the gallery shows up abruptly (no fade and too soon). The photo block logo has a border around it like the others on the gallery, which I don't want. I'm sure I can tinker and get it positioned properly, but the rest I'm lost on. I would appreciate any help on this I can get.

Kase
kasejameson.smugmug.com

Hikin' Mike

@beardedlogic said:
@Hikin' Mike I found your tutorial on "Popup Logo Page" to be exactly what I was looking for. However, I am such a newbie when it comes to coding I don't know what to do to make it work right. The photo block logo doesn't appear soon enough, the gallery shows up abruptly (no fade and too soon). The photo block logo has a border around it like the others on the gallery, which I don't want. I'm sure I can tinker and get it positioned properly, but the rest I'm lost on. I would appreciate any help on this I can get.



Kase

kasejameson.smugmug.com

Looks like you've removed the code.

tunasub

Im sorry if this is a dumb question..... Where is the source image coming from?

Hikin' Mike

I don't understand your question.

tunasub

How do i indicate what image will show up?

ps Im having no success with this.

Hikin' Mike

@tunasub said:
How do i indicate what image will show up?



ps Im having no success with this.

You have to add a Single Photo Block on the page you want the popup to show.

beardedlogic

@"Hikin' Mike"

I'm sorry, I've been away from a computer for three days! I know, right? I SURVIVED! Thank you for the response. I had to have the Heroes block out all the CSS before I left because as it was, the pop up logo was blocking the Customize button and I couldn't click it to change it myself. Thus, making it look like none of what I was talking about was showing. Sorry.

I'm slowly catching on. I moved the logo down, away from the Customize button. I still need help knowing which values I need to change in order to fix a couple of other issues. I'd like for there to be no border or drop shadow, the logo centered, and the gallery fade in.

I'm sorry to present you with a list of demands but I have no one else to turn to. LOL The Heroes have been excellent, don't get me wrong! I just wanted to ask the forum before going to them.

Kase
kasejameson.smugmug.com

Hikin' Mike

@beardedlogic said:
@Hikin' Mike



I'm sorry, I've been away from a computer for three days! I know, right? I SURVIVED! Thank you for the response. I had to have the Heroes block out all the CSS before I left because as it was, the pop up logo was blocking the Customize button and I couldn't click it to change it myself. Thus, making it look like none of what I was talking about was showing. Sorry.



I'm slowly catching on. I moved the logo down, away from the Customize button. I still need help knowing which values I need to change in order to fix a couple of other issues. I'd like for there to be no border or drop shadow, the logo centered, and the gallery fade in.



I'm sorry to present you with a list of demands but I have no one else to turn to. LOL The Heroes have been excellent, don't get me wrong! I just wanted to ask the forum before going to them.



Kase

kasejameson.smugmug.com

I was offline for a few days last week...lol!

The popup logo drop shadow should disappear once you change the code from your other thread.

A few things I noticed. You changed the width to 60% here:

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

You need to change it back to width: 100%. That should center it left-right. Adjust the margin-top to move it top/bottom. Keep in mind that top/bottom is relative to screen size, so really can't center it (top/bottom).

Could be the fact that you are loading a lot of images and/or my computer is old, but it takes a long time to load your home page and I don't see your popup until the gallery images load.

Don't mind the "demands", I get bored and this gives me something to do.

denisegoldberg

@Hikin' Mike said:
Could be the fact that you are loading a lot of images and/or my computer is old, but it takes a long time to load your home page and I don't see your popup until the gallery images load.

My computer is not old and I have a fast internet connection.

The pop-up image shows just before the gallery images load but it stays visible behind the gallery images until the images are all loaded. Then it disappears. This does nothing to enhance the look of the site.

beardedlogic

@denisegoldberg said:

@Hikin' Mike said:
Could be the fact that you are loading a lot of images and/or my computer is old, but it takes a long time to load your home page and I don't see your popup until the gallery images load.

My computer is not old and I have a fast internet connection.

The pop-up image shows just before the gallery images load but it stays visible behind the gallery images until the images are all loaded. Then it disappears. This does nothing to enhance the look of the site.

I believe I'll just have to omit this from my site. I was really looking forward to it, but Ms. Goldberg said, it's not enhancing the site. I'll leave it up for a while and tinker some, but knowing the little I know, I doubt I'll make a difference.

Thank you all for your help. If there is any more wisdom you can share I would love it.

Hikin' Mike

@beardedlogic said:
I believe I'll just have to omit this from my site. I was really looking forward to it, but Ms. Goldberg said, it's not enhancing the site. I'll leave it up for a while and tinker some, but knowing the little I know, I doubt I'll make a difference.

Thank you all for your help. If there is any more wisdom you can share I would love it.

It should work as designed, unless you missed something. It's possible you're using a different gallery that I forgot to account with. I'll double check in my testing page and I'll let you know.

beardedlogic

@Hikin' Mike said:

@beardedlogic said:
I believe I'll just have to omit this from my site. I was really looking forward to it, but Ms. Goldberg said, it's not enhancing the site. I'll leave it up for a while and tinker some, but knowing the little I know, I doubt I'll make a difference.

Thank you all for your help. If there is any more wisdom you can share I would love it.

It should work as designed, unless you missed something. It's possible you're using a different gallery that I forgot to account with. I'll double check in my testing page and I'll let you know.

Thank you, sir. I am mighty appreciative of your help!

Hikin' Mike

@beardedlogic said:
Thank you, sir. I am mighty appreciative of your help!

Looks like when I made the tutorial, I didn't realize the Single/Multiple "galleries" worked different then the slideshow and page/galleries. My testing page works just like your site...broken.

I'll look into it and I'll let you know...

beardedlogic

Sad when part of us is broken. May I recommend the song "Hearts of Olden Glory" by Runrig to remember when things worked and that they may work again one day.

Hikin' Mike

@beardedlogic I've updated the tutorial and I'm 99.9% sure all of the bugs are fixed.

http://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Popup-Logo-Page