Results 1 to 5 of 5

Thread: Fullpage overlay effect when entering a page?

  1. #1
    Join Date
    Nov 2009
    Posts
    43
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default Fullpage overlay effect when entering a page?

    Hi,

    Does anyone know how I can create a full page overlay effect with the text "welcome!" when a person is entering my page?

    This page have the exact effect I'm after (just click on the menu): http://www.hyperkit.co.uk

    Would anyone be kind enough to tell how they did this?

    I want it to appear when a person is entering my site and I want it to stay for a sec and then fade out (if possible).


    Any help is highly appreciated!

    -Pookey

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,337
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

  3. The Following User Says Thank You to molendijk For This Useful Post:

    mlegg (02-22-2013)

  4. #3
    Join Date
    Nov 2009
    Posts
    43
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    That is the fading part, but not the overlay effect, right? My number 1 priority is the overlay effect with typography on top. Thanks a lot for the link though!

  5. #4
    Join Date
    May 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Check this code..A full screen overlay using CSS code only....

    http://www.corelangs.com/css/box/fulloverlay.html

    charles
    Last edited by jscheuer1; 05-31-2014 at 02:38 PM. Reason: format

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,194 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by pookeyblow View Post
    This page have the exact effect I'm after (just click on the menu): http://www.hyperkit.co.uk

    Would anyone be kind enough to tell how they did this?
    Usually we do not reverse engineer or otherwise reveal other's code. But this is so basic as to reasonably be considered ordinary HTML, CSS, and jQuery javascript.

    The html:

    HTML Code:
    <body>
    <div id="overlay-preload"><span>Welcome</span></div>
    Initial styles:

    Code:
    #overlay-preload {
    	background: #f44805;
    	background: rgba(244,72,5,0.6);
    	height: 100%;
    	width: 100%;
    	position: fixed;
    	z-index: 999999;
    	color: #ffffff;
    	font-size: 72px;
    	text-align: center;
    }
    
    #overlay-preload span {
    	position: relative;
    	display: block;
    	top: 50%;
    	margin-top: -70px;
    }
    Uses jQuery 1.8.3, so the scripting required is:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript">
    // Overlay fade out on load
    $(window).load(function(i) {
    	$('#overlay-preload').delay(5000).fadeOut('slow');
    });
    </script>
    This is an old thread, so I'm closing it. If anyone has further questions, please start a new thread. You may refer back to this one if you like.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Wait for page load before entering
    By Lestatt in forum HTML
    Replies: 0
    Last Post: 07-18-2012, 07:02 AM
  2. Replies: 1
    Last Post: 01-17-2012, 07:40 PM
  3. creating a splash screen before entering home page
    By hakimuddink in forum Looking for such a script or service
    Replies: 6
    Last Post: 12-16-2008, 05:54 AM
  4. Lightbox 2.03 overlay not over whole page
    By elmo115 in forum Dynamic Drive scripts help
    Replies: 12
    Last Post: 07-31-2008, 03:44 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •