4

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

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

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

1
  • 1
    Класс тут задается просто что бы скролл убрать. Делаете невидимый блок, при клике на градиент ставите его в то место куда кликнули, задаете нужный градиент (узнав его у элемента по которому кликнули), увеличиваете до размеров экрана .... Вроде тут и в js особо лезть не надо, что бы это понять. Что уже пробовали? Какие проблемы возникли? 23 сен 2017 в 23:00

1 ответ 1

6

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

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="block">
    <div class="gradient" style="background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);" data-gradient-css="linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)"></div>
  </div>
  <div class="block">
    <div class="gradient" style="background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);" data-gradient-css="linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)"></div>
  </div>
  <div class="block">
    <div class="gradient" style="background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);" data-gradient-css="linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)"></div>
  </div>
  <div class="block">
    <div class="gradient" style="background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);" data-gradient-css="linear-gradient(to right, #ffecd2 0%, #fcb69f 100%)"></div>
  </div>
  <div class="block">
    <div class="gradient" style="background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);" data-gradient-css="linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)"></div>
  </div>
  <div class="block">
    <div class="gradient" style="background-image: linear-gradient(120deg, rgb(132, 250, 176) 0%, rgb(143, 211, 244) 100%);" data-gradient-css="linear-gradient(120deg, rgb(132, 250, 176) 0%, rgb(143, 211, 244) 100%)"></div>
  </div>
</div>

<div class="ripple"></div>

5
  • Cheg, подскажи, а что-бы менять иконку курсора, можно использовать только SVG или можно иконки другого формата тоже вставлять? читал описание, вроде там расширение иконки "cur".. не могу справиться с ситуацией
    – Air
    24 сен 2017 в 4:08
  • @Air для современных браузеров можно и .png. .cur - для ie
    – Cheg
    24 сен 2017 в 4:14
  • Не хочу хвастаться, но с первой минуты, когда узнал что такое css, у меня по нем не возникало вопросов, он для меня проще пареной репы, а вот единственное с чем не справился.... а размер иконки имеет значение? ну не получается, не видит он у меня картинку, pointer показывает
    – Air
    24 сен 2017 в 4:22
  • @Air думаю, для этого стоит отдельный вопрос опубликовать
    – Cheg
    24 сен 2017 в 4:28
  • Cheg, глянь, вопрос опубликован.
    – Air
    24 сен 2017 в 6:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.