Fullscreen Overlay Effects

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

FullscreenOverlayStyles

View demo Download source

Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects for overlays. The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. But that does not mean that we can’t go crazy and use some fresh and interesting effects, like, for example, morphing SVG shapes.

Note that these effects were created with modern browsers in mind so they might not show the desired effect in older ones. You should, of course, provide some kind of fallback for older browsers.

An example for a subtle, yet interesting effect is the first one which got inspired by the same effect on Huge. The idea is to fade in the overlay and to rotate what’s inside slightly in 3D:

.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s;
}

.overlay-hugeinc nav {
	perspective: 1200px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	transform: translateY(-25%) rotateX(35deg);
	transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
	opacity: 1;
	transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
	transform: translateY(25%) rotateX(-35deg);
}

We use the visibility trick to make the overlay disappear completely: we set a transition delay for the visibility property which allows the opacity to be transitioned first.

For some of the SVG examples we use Snap.svg to morph a path into another one. For the “little boxes” example we used SVG with some JS to control the appearing of the boxes, but you could of course also use CSS for the control or not use SVG at all.

We hope you enjoy these effects and find them inspiring!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 127

  1. 2

    Hi,
    anyone know how to make items appearance change (underline, blur or … whatever) of the current page?

    Many thanks.

  2. 3

    This is awesome and works great. However, my nav is a bit long and can get cutoff if it’s a smaller viewport. Is there any tweak to allow for scrolling if need be? When i use my scrollbar, it’s just scrolling the site behind the overlay.

    Thanks!

  3. 5

    Here is how I managed to have more than one buttons/overlays per page:


    function fullScreenOverlay() {
    var overlayQty = document.querySelectorAll('div.overlay').length;
    for (i = 1; i <= overlayQty; i++) {
    (function() {
    var container = document.getElementById( 'main-container' ),
    triggerBttn = document.getElementById( 'trigger-overlay' + i ),
    overlay = document.querySelector( '.overlay'+ i ),
    closeBttn = overlay.querySelector( '.overlay-close' );
    transEndEventNames = {
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'msTransition': 'MSTransitionEnd',
    'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions };

    function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
    classie.remove( overlay, 'open' );
    classie.remove( container, 'overlay-open' );
    classie.add( overlay, 'close' );
    var onEndTransitionFn = function( ev ) {
    if( support.transitions ) {
    if( ev.propertyName !== 'visibility' ) return;
    this.removeEventListener( transEndEventName, onEndTransitionFn );
    }
    classie.remove( overlay, 'close' );
    };
    if( support.transitions ) {
    overlay.addEventListener( transEndEventName, onEndTransitionFn );
    }
    else {
    onEndTransitionFn();
    }
    }
    else if( !classie.has( overlay, 'close' ) ) {
    classie.add( overlay, 'open' );
    classie.add( container, 'overlay-open' );
    }
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );

    })();

    }
    }

    • 6

      Hey great, I’m looking for a solution like this but it doesn’t work. Can you tell me which Code I have to replace or what do I have to do with my HTM/CSS tags? Sorry but JS is totally new for me.

    • 7

      Great, that is what I was looking for. Unfortunately, I do not get it to work. Can you tell me what I have to change in the html or css code? Am a total newbie in js.

    • 8

      Hello Jose,

      i have tried using your example code, however it does not seem to work. I have adjusted the names of the id’s in the html page to match trigger-overlay1, trigger-overlay2 etc. and when i test it in the debugger or the console it does not show any errors either.
      Do you happen to have a link to a working example with your code so i can compare and have a look?

      Many thanks

  4. 10

    Hi,

    for Miha and those who want to disable scroll when it’s visible, here’s my way, simple but pretty efficient:

    $.fn.fullpage.setKeyboardScrolling(false);
    $.fn.fullpage.setAllowScrolling(false);
    $.fn.fullpage.setMouseWheelScrolling(false);

    and

    $.fn.fullpage.setKeyboardScrolling(false);
    $.fn.fullpage.setAllowScrolling(false);
    $.fn.fullpage.setMouseWheelScrolling(false);


    ...

    function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
    $.fn.fullpage.setKeyboardScrolling(true);
    $.fn.fullpage.setAllowScrolling(true);
    $.fn.fullpage.setMouseWheelScrolling(true);
    classie.remove( overlay, 'open' );
    ...


    ...

    else if( !classie.has( overlay, 'close' ) ) {
    $.fn.fullpage.setKeyboardScrolling(false);
    $.fn.fullpage.setAllowScrolling(false);
    $.fn.fullpage.setMouseWheelScrolling(false);
    classie.add( overlay, 'open' );
    ...

    I think it could help ;)

  5. 12

    In case there still someone figure out how to make an overlay works with multiple button. Here is my code:

    var triggerBttn = document.querySelectorAll( '.trigger-overlay' );

    var overlay = document.querySelector( 'div.overlay' ),
    closeBttn = overlay.querySelector( 'a.overlay-close' );
    transEndEventNames = {
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'msTransition': 'MSTransitionEnd',
    'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions };

    function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
    classie.remove( overlay, 'open' );
    classie.add( overlay, 'close' );
    var onEndTransitionFn = function( ev ) {
    if( support.transitions ) {
    if( ev.propertyName !== 'visibility' ) return;
    this.removeEventListener( transEndEventName, onEndTransitionFn );
    }
    classie.remove( overlay, 'close' );
    };
    if( support.transitions ) {
    overlay.addEventListener( transEndEventName, onEndTransitionFn );
    }
    else {
    onEndTransitionFn();
    }
    }
    else if( !classie.has( overlay, 'close' ) ) {
    classie.add( overlay, 'open' );
    }
    }

    var i;
    for (i = 0; i < triggerBttn.length; i++) {
    triggerBttn[i].addEventListener( 'click', toggleOverlay );
    }
    closeBttn.addEventListener( 'click', toggleOverlay );

  6. 13

    Hello!

    Has anyone had any issues where their needs to be content being position:relative or position:absolute on their page. When I set my content with these styles it will show up when the overlay is active. Is there a quick fix for this? There must be a way to keep that content hidden when overlay is showing.

    Any advice would be appreciated

    Thanks. M

  7. 14

    I’ve been trying to adapt this to use with my WordPress portfolio. Obviously this will require opening numerous instances of the window from different links in my grid. I’ve tried replacing the demo1.js code with the examples given above but nothing pops up at all when I do that. Help? Pretty please? I’m soooooo close!

  8. 15

    Trying to figure out how to make this work in mobile browsers. Clicking the button does nothing on my iPhone 6+.

    Also, I understand the different posts for creating different ids. But I’m trying to implement this for a WordPress portfolio. How can I do this dynamically?

  9. 16

    This is really great! I’m having one problem and I haven’t seen any solutions in the comment section yet. When you hit the back arrow on Safari and Firefox browsers it returns the user to the opened overlay menu. I would like it to close once a user hits clicks their desired navigation link. On Chrome that overlay is removed and it works perfectly. Does anybody know how I might remedy this? Thanks for any help.

  10. 17

    Hello,
    I am trying to disable page scroll when overlay is visible. I tried the code suggested by dybo (comment #10) but it does not work. I put a wrapper div on my content and add/remove class to it when menu is opened/closed. It works except every time the menu button is clicked the page goes to the top. Any ideas how to fix that.


    <b>CSS</b>
    .noscroll { overflow:auto; height:100%; }

    <b>JS</b>
    function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
    classie.remove( overlay, 'open' );
    classie.add( overlay, 'close' );
    $('#wrapper').removeClass( 'noscroll' );

    var onEndTransitionFn = function( ev ) {
    classie.remove( overlay, 'close' );
    };

    path.animate( { 'path' : pathConfig.from }, 400, mina.linear, onEndTransitionFn );
    }
    else if( !classie.has( overlay, 'close' ) ) {
    classie.add( overlay, 'open' );
    $('#wrapper').addClass( 'noscroll' );

    path.animate( { 'path' : pathConfig.to }, 400, mina.linear );
    }
    }

    <b>HTML</b>
    <div class="menubtn">
    ... here goes my menu button
    </div>
    <div class="overlay overlay-cornershape" data-path-to="m 0,0 1439.999975,0 0,805.99999 -1439.999975,0 z">
    ... the overlay code from the example
    </div>

    <div id="wrapper">
    ... some scrollable content
    </div>

  11. 18

    Any ideas how to disable scroll on the background when menu is opened? The suggested code from dybo (comment #10 on this page) seems to not work.

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>