Подборка эффектов для полноэкранного наложения

Как с любым элементом пользовательского интерфейса, есть популярные тенденции и стили, которые востребованы рынком, на данный момент это напрямую относится к полноэкранным наложениям и мы хотели бы показать некоторые необычные эффекты для подобных наложений.

Особенность этих наложений является то, что они не имеют фиксированный размер, как модальные окна, они занимают всю страницу, поэтому при создании эффектов нужно принимать это во внимание.

Обратите внимание, что эти эффекты были созданы для современных браузеров, и они могут не дать желаемого эффекта в старых браузерах. Поэтому Вы должны обеспечить какой-то запасной вариант для старых браузеров, при использовании на действующем сайте.

На первый пример нас вдохновил утонченный и интересный эффект на сайте одной из веб-студий. Мы упростили и сделали универсальными код и стили для оверлея:

HTML

  <div class="overlay" id="demo1">
    <a href="#" class="overlay-close">Close</a>
    <nav>
      <ul class="list-unstyled mb-0">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;400&display=swap');

body    { font-family: "Lato", sans-serif; }

div.wrapper { transition: all .5s ease; }

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(153, 204, 51, .9);
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease;
}

.overlay.open {
	opacity: 1;
	visibility: visible;
}

.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	text-indent: -9999px;
	z-index: 100;
}

.overlay .overlay-close::before,
.overlay .overlay-close::after {
	content: '';
	height: 2px;
	width: 80px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

.overlay .overlay-close::before {
	rotate: 45deg;
}

.overlay .overlay-close::after {
	rotate: -45deg;
}

.overlay nav {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 3.5rem;
	transform: translate(-50%, -50%);
}

.overlay nav ul {
	transition: all .5s ease;
}

.overlay ul li a {
	font-weight: 100;
	display: block;
	color: #fff;
	text-decoration: none;
}

Анкорами блока навигации мы будем открывать соответствующие им оверлеи с помощью добавления к ним класса .open. В отдельных случаях (примеры 6 и 7) нам придется работать с другими элементами DOM. Для этого элемент html будет получать соответствующий id. Закрывать их будем элементом a внутри каждого из них. Для этого класс .open будет удаляться. Попутно будет удаляться и атрибут id у элемента html. За реализацию всего этого отвечает компактный jQuery код:

$().ready(function() {
  var navv = $('div.overlay');
  var cloz = $('a.overlay-close');

  $('nav.nav a').on('click', function(e) {
    e.preventDefault();
    $('html').attr('id', $(this).attr('href') + 'html');
    $('#' + $(this).attr('href')).addClass('open');
  });

  cloz.on('click', function(e) {
    e.preventDefault();
    $('html').removeAttr('id');
    navv.removeClass('open');
  });
});

Собственно, весь интерес заключается в стилях, с помощью которых открытие и закрытие оверлея получит привлекательную анимацию. Все это можно увидеть в нашем демо. Надеемся, вам понравятся эти эффекты и они будут вам полезны!