Развертывание на весь экран блока

#javascript #html #jquery #css #css3

Приветствую. 

На сайте https://webgradients.com/ если кликнуть по любому из градиентов - он развернется
на весь экран с анимацией. Как сделать подобный эффект для блока?

Заметил, что при клике в body добавляется класс state-fixed к уже существующему state-show,
но разобраться с js-кодом, когда он еще и сжат, мне сложно. Помогите пожалуйста. 
    

Ответы

Ответ 1

Я бы сделал так:



var ripple = $('.ripple'), // "капля"
  rippleSize = screenProp(), // размер капли
  posLeft = 0,
  posTop = 0;

ripple.outerWidth(rippleSize * 2).outerHeight(rippleSize * 2); // задаем капле размер
в 2 раза больше размера экрана, чтобы "покрыть" всю видимую область страницы

$('.gradient').click(function(e) { // клик на градиент
  $('body').addClass('fixed'); // блокируем прокрутку экрана
  posLeft = e.pageX - rippleSize - $(window).scrollLeft(); // положение капли слева
  posTop = e.pageY - rippleSize - $(window).scrollTop(); // положение капли сверху
  var gradient = $(this).attr('data-gradient-css'); // получаем код градиента
  ripple.addClass('ripple--active').css({ // добавляем класс для увеличения и прописываем
стили
    'left': posLeft + 'px',
    'top': posTop + 'px',
    'background-image': gradient
  });
  setTimeout(function() { // после увеличения
    ripple.addClass('ripple--complete'); // добавляем класс, который выровнит каплю
точно по краям экрана
  }, 500); // время анимации увеличения
});

ripple.on('click', function() { // при клике на каплю
  if (ripple.hasClass('ripple--complete')) { // если анимация закончилась
    $('body').removeClass('fixed'); // возвращаем странице прокрутку
    ripple.removeClass('ripple--complete ripple--active'); // удаляем классы
  }
});

$(window).on('resize', function() { // при ресайзе окна
  rippleSize = screenProp(); // пересчитываем размер капли
  ripple.outerWidth(rippleSize * 2).outerHeight(rippleSize * 2); // и задаем ей полученные
значения
});

// функция для определения максимального значения из высоты и ширины экрана
function screenProp() {
  if ($(window).width() > $(window).height()) {
    return $(window).width();
  } else {
    return $(window).height();
  }
}
html,
body {
  padding: 0;
  margin: 0;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

body.fixed {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 31%;
  margin: 0 1%;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

.gradient {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  background: #000;
  cursor: url(https://i.imgur.com/wz8iY4B.png) 16 16, pointer;
}

.ripple {
  width: 200%;
  height: 200%;
  position: fixed;
  z-index: 9999;
  transition: transform .5s linear;
  transform: scale(0);
  transform-origin: center;
  border-radius: 100%;
  cursor: url(https://i.imgur.com/NRHTafk.png) 16 16, crosshair;
}

.ripple--active {
  transform: scale(1);
}

.ripple--complete {
  left: 0!important;
  top: 0!important;
  width: 100%!important;
  height: 100%!important;
  border-radius: 0!important;
}