Friday, February 14, 2014

Tutorial Fullscreen Overlay Effects

Do you want to share?

Do you like this story?

DEMO         DOWNLOAD

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.

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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.

YOU MIGHT ALSO LIKE

0 komentar:

Post a Comment

Advertisements

Advertisements