Logo page intro before going to home page

pnewman87

I am using smug mug for my website and need help with customizing an intro for the page. I have a logo that I want to display when the website is first pulled up. I would like for the logo to appear with a darkened picture behind it for approx 2 seconds then turn into my normal home page. Does anyone have any ideas how to accomplish this and what css code would be needed to do that. Any help would be greatly appreciated!

Hikin' Mike

I don't think it's possible w/o Javascript....and JS isn't supported in the new SM.

Richard

Mike could well be correct (he usually is ), but I'd take a look at using a CSS transition on opacity. I think you could use CSS to decrease the opacity of the logo over two seconds. I'm not sure how you would trigger it, though. Sorry, I haven't actually done this, so I have no code to offer, but I think it's worth playing around some to see if you can get the effect you want.

pnewman87

This is one example of something I am interested in doing but not sure how http://www.chrisburkard.com/. I am not very good with css so this will be a challenge. I do appreciate the feedback!

Hikin' Mike

pnewman87 wrote: »

This is one example of something I am interested in doing but not sure how http://www.chrisburkard.com/. I am not very good with css so this will be a challenge. I do appreciate the feedback!

Ask him.

David_S85

For the logo to appear, and then go away, couldn't you just do a full page slideshow with the first two images being the same except the first one also including your logo and the second one without? Then other images could also follow the fist two. No code needed. The only niggle with that is they would all need to play consecutively and couldn't be set to random.

Hikin' Mike

David_S85 wrote: »

For the logo to appear, and then go away, couldn't you just do a full page slideshow with the first two images being the same except the first one also including your logo and the second one without? Then other images could also follow the fist two. No code needed. The only niggle with that is they would all need to play consecutively and couldn't be set to random.

Looking at the source code, he's using @keyframes and that is beyond my "pay grade" at the moment.

Richard

Hikin' Mike wrote: »

Looking at the source code, he's using @keyframes and that is beyond my "pay grade" at the moment.

http://www.w3schools.com/css/css3_animations.asp
This looks more promising as an animation will start as soon as it's loaded (or after a delay that you can specify). The problem is that after the animation is complete, it will revert to its original state, which is not what the OP wants. There may be some clever way around this (set the animation time to a large number and heavily front-load the transition with the right cubic-bezier parameters???)