Как повторить этот css эффект?

148
27 июня 2019, 14:40

Подскажите, как я могу повторить эффект появления блока, как на этом видео?

На данный момент имею что-то вот такое.

Появление реализовано через свойство clip-path. Не могу додуматься как мне повторить эффект растворения.

Сам слайдер при клике на миниатюры открывает секции, а не просто картинки. Т.е. тыкаешь на миниатюру, появляется секция со своим контентом.

Здесь используемые изображения

Это мой HTML

 <body>
<div class="men-block">
    <img src="img/slider/men.png" alt="#">
</div>
<div class="wrapper" id="content">
    <div class="wrap" id="slider">
        <div class="images">
            <div class="pict">
                <div class="list" style="background-image: url(img/slider/1.jpg); background-position: top center; background-size: cover;" id="_0"></div>
            </div>
            <div class="pict">
                <div class="list" style="background-image: url(img/slider/2.jpg); background-position: top center; background-size: cover;" id="_1"></div>
            </div>
            <div class="pict">
                <div class="list" style="background-image: url(img/slider/3.jpg); background-position: top center; background-size: cover;" id="_2"></div>
            </div>
            <div class="pict">
                <div class="list" style="background-image: url(img/slider/1.jpg); background-position: top center; background-size: cover;" id="_3"></div>
            </div>
        </div>
    </div>
    <!-- /.wrap -->
</div>
<!-- /.wrapper -->

<div class="sections">
    <section class="item open" id="one" data-bg="url(img/slider/1.jpg)" data-id="_0"></section>
    <!-- /.one -->
    <section class="item close sec" data-bg="url(img/slider/2.jpg)" data-id="_1">
    </section>
    <!-- /.one -->
    <section class="item close sec" data-bg="url(img/slider/3.jpg)" data-id="_2"></section>
    <!-- /.one -->
    <section class="item close sec" data-bg="url(img/slider/1.jpg)" data-id="_3"></section>
    <!-- /.one -->
</div>
<!-- /.sectios -->
</body>

Это мой scss:

    body {
  position: relative;
}
.wrapper {
  z-index: 5;
}
.wrap {
  width: 100%;
}
.item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-clip-path: circle(13.9% at 50% 50%);
  clip-path: circle(13.9% at 50% 50%);
}
.sec {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
}
#one {
  background-image: url(../img/slider/1.jpg);
  height: 100vh;
  -webkit-clip-path: circle(70.9% at 50% 50%);
  clip-path: circle(70.9% at 50% 50%);
}
.close {
  opacity: 0;
  z-index: 1;
}
.shadow{
  box-shadow: 0 0 16px 16px white inset;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.sections {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
}
.slider {
  z-index: 10;
  overflow: auto;
  white-space: nowrap;
}
.list {
  display: inline-block;
  margin-left: 8rem;
  margin-right: 8rem;
  width: 30rem;
  height: 35rem;
  border-radius: 1rem;
  opacity: 0.9;
  &:hover {
    cursor: pointer;
  }
}
.men-block {
  position: absolute;
  bottom: -50px;
  left: 30%;
  z-index: 10;
  width: 150px;
  img{
    width: 100%;
  }
}
.cut-wrap{
  position: relative;
  height: 500px;
  margin-top: 200px;
}
#content {
  position: absolute;
  right: -5%;
  top: 22.5%;
  height: 500px;
  width: 1000px;
}
#slider{
  width: 100%;
  height: 100%;
  position: relative;
  overflow:hidden;
  -webkit-transition: transform 1.5s;
  -moz-transition: transform 1.5s;
  -ms-transition: transform 1.5s;
  -o-transition: transform 1.5s;
  transition: transform 1.5s;
}
#slider .left,.right{
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  position: absolute;
  top:40%;
  cursor: pointer;
  border: 1px solid #4d4d4d;
}
#slider .left{
  left: 0;
}
#slider .right{
  right: 0;
}
#slider .left img{
  width: 50px;
  height: 50px;
}
#slider .right img{
  width: 50px;
  height: 50px;
  transform: rotate(180deg);
}
#slider .images .pict{
  float: left;
}
.item{
  &-header{
    display: flex;
    justify-content: space-around;
    align-items: center;
    &__item{
      width: 50px;
      height: 50px;
      background-color: darkviolet;
    }
  }
  &-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 auto;
    &__item{
      width: 100px;
      height: 100px;
      margin-left: 20px;
      margin-right: 20px;
      background-color: rosybrown;
    }
  }
  &-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    &__item{
      width: 20px;
      height: 60px;
      background-color: yellowgreen;
    }
  }
}

Это мой js:

   function list() {
      const open = $('.list'); /* переменная открывает блок */
      open.on('click', function () {
         /* блок, на который мы тыкнули прячем в конец слайдера */
      $(this).parent().appendTo('.images').fadeOut;
         const parent = $(this); 
         let prevOpen = $('section.open'),
           sectionItem = $('section.item'),
           slider = $('#slider'),
           nextSection = $('[data-id='+parent.attr('id')+']');
         /* Отодвигаем секцию сослайдами через 500мс на 75% по Х при клике на блок open */
         setTimeout(function () {
            slider.css({"transform": "translateX(75%)"});
         }, 600);
         /*Возвращаем секцию в начальное положение*/
         open.mouseenter(function () {
            slider.css({"transform": "translateX(0)"});
         });
         /* делаем я-index меньше, чем у активного, что бы не было проблем с появлением изображений */
         prevOpen.css({
            "z-index": "1"
         });
            /* Ставим ищем нужную секцию по дата атрибуту */
         if ( parent.attr('id') === nextSection.attr('data-id') ) {
            nextSection.removeClass('close').addClass('open ').css({   
               "background-image": nextSection.attr("data-bg")
            });
            /* увеличиваем область видимости для эффекта появления секции */
            nextSection.css({"clip-path": "circle(70.9% at 50% 50%)", "transition" : "clip-path 1.5s"});
            /* прячем слайдер и отодвигаем его вправо */
            let wrapper = $('.wrapper');
            wrapper.css({"opacity" : "0", "transition" : "opacity 0.5s"});
            setTimeout(function () {
               wrapper.css({"opacity" : "1", "transition" : "opacity 1.5s"});
            }, 1500);
         }
         /* добавляем бэкграунд текущего блока обертке, что бы при смене активног элемента у нас не было белого фона */
         $('.sections').css({
            'background-image': prevOpen.attr("data-bg")
         });
         /* Всем секциям, не являющимся открытой мы меняем классы на нужные   */
         sectionItem.not(nextSection).removeClass('open ').addClass('close').css({"clip-path": "circle(7.9% at 50% 50%)", "transition" : "clip-path 3s"});

      });
   }
   list();
   /* Бесконечный слайдер с возможностью прокрутки колесом мыши (на счет тач устройств пока не известно) */
   function cut() {
    const speed = 500;
    let pictW,imgW,n,pict,img,currentM,end=true;
    pict = $('#slider .pict');
    img = $('#slider .images');
    pictW = parseInt(pict.width());
    n = pict.length;
    imgW=(n+1)*pictW;
    img.width(imgW);
    currentM = -pictW;
    /* Меняем слайды колесиком мыши */
    $('#slider').bind({
        mouseenter: function() {
            $(this).on('wheel', (function(e) {
                e.preventDefault();
                if (e.originalEvent.deltaY < 0) {
                    if(end) {
                        end=false;
                        currentM = currentM + pictW;
                        img.animate({
                            marginLeft: currentM
                        }, speed,  function () {
                            end = true;
                            $('.pict').last().prependTo('.images');
                            currentM = currentM - pictW;
                            img.css('marginLeft',currentM);
                        });
                    }
                } else {
                    if(end) {
                        end=false;
                        currentM = currentM - pictW;
                        img.animate({
                            marginLeft: currentM
                        }, speed,  function () {
                            end = true;
                            $('.pict').first().appendTo('.images');
                            currentM = currentM + pictW;
                            img.css('marginLeft',currentM);
                        });
                    }
                }
            }));
        }
    });
}
   cut ();
Answer 1

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

Чтобы сделать это, вы должны создать простую CSS-маску png-файлом и анимировать её.

Пример небольшой демонстрации, без слайдера и остального вашего кода.

codepen

setTimeout(function() { 
  let animation = document.getElementById('slide1'); 
  animation.setAttribute("style", "-webkit-mask-size:300%;"); 
}, 1000) 
 
setTimeout(function() { 
  let animation = document.getElementById('slide1'); 
 
  animation.setAttribute("style", "-webkit-mask-size:20%;"); 
}, 3000)
* { 
  box-sizing: border-box; 
} 
 
html, 
body, 
.wrapper { 
  height: 100%; 
  margin: 0; 
  position: relative; 
} 
 
.men-block { 
  position: absolute; 
  bottom: -50px; 
  left: 30%; 
  z-index: 10; 
  width: 150px; 
} 
 
.men-block>img { 
  width: 100%; 
} 
 
.landscape { 
  max-width: 100%; 
} 
 
.landscape.closed { 
  position: absolute; 
  top: 0; 
  /* opacity:0;*/ 
  -webkit-mask-image: url("https://i.ibb.co/p2vyKt4/mask.png"); 
  -webkit-mask-repeat: no-repeat; 
  -webkit-mask-size: 20%; 
  -webkit-mask-position: center; 
  transition: all 3s; 
} 
 
.wrapper { 
  background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/mask-demo-lg.jpg'); 
  background-repeat: no-repeat; 
}
<div class="men-block"> 
  <img src="https://i.ibb.co/Fxfkr1V/men.png" alt="#"> 
</div> 
<div> 
  <img src="https://i.ibb.co/q0zJBwx/1.jpg" class="landscape" alt=""> 
  <img src="https://i.ibb.co/rMN0mhk/3.jpg" class="landscape closed" id="slide1" alt=""> 
</div>

Время ожидания не соответствует примеру из-за setTimeout функции, но это должно быть легко настраиваемым. Если Вы хотите решение для всех браузер, нужно не забыть настроить правильные префиксы (в примере префиксы для webkit).

Answer 2

Все-таки решил попробовать, только пошел другим путем.

Все только на масках(mask-image) с градиентами. Zoom не обошелся без mask.png. Так и не пришло ничего в голову - как сделать прямоугольник с градиентом.

Здесь можно видео взять(или просто посмотреть), а здесь файлы, там только пути переписать надо.

Собственно на картинке путь, которым пошел:

1 - слой основного изображения(именно он меняется, но не сразу)

1.1 - временный слой - создается при клике. В месте клика(за иконкой) позиционируется маска вместе с новым изображением(изображение разумеется сразу на все полотно). Маска сразу же начинает расширяться. По окончании заменяем задний фон, с одновременным удалением временного слоя. Вообще надо было его постоянным сделать и установить opacity: 0.

2 - с этим слоем и так все ясно, разделил его просто маской с градиентом, можно и png было сделать. С ним очень легко подобрать нужные фоновые изображения, не надо заморачиваться на счет размеров, масок и т.п. Все равно снизу сзади ничего не видно.

В настройках slider-setting.js (в html я только слои декларировал), добавляем к каждой картинке свой brightness, им затемняем/осветляем передний план и персонажа на дороге, в общем играем с освещенностью.

В итоге получаем нужную форму.

Слайдер, правда, так и не доделал, но для эксперимента кое-как работает.

Answer 3

Автор вопроса, и авторы ответов как-то все усложнили. Ведь сделать это можно с помощью простых анимаций и свойства css -webkit-filter:

.block{ 
    -webkit-filter: blur(0px); 
     -moz-filter: blur(0px); 
       -o-filter: blur(0px); 
      -ms-filter: blur(0px); 
          filter: blur(0px); 
      width: 30%; 
      position: fixed; 
      left: 50%; 
      top: 50%; 
      margin-left: -10%; 
      margin-top: -10%; 
      animation: 2s animate infinite; 
      border-top-left-radius: 10%; 
      border-top-right-radius: 10%; 
} 
@keyframes animate{ 
  from{ 
      -webkit-filter: blur(0px); 
       -moz-filter: blur(0px); 
         -o-filter: blur(0px); 
        -ms-filter: blur(0px); 
            filter: blur(0px); 
      } 
  to{ 
      -webkit-filter: blur(100px); 
       -moz-filter: blur(100px); 
         -o-filter: blur(100px); 
        -ms-filter: blur(100px); 
            filter: blur(100px); 
            opacity: 0; 
           width: 100%; 
      margin-left: -50%; 
      margin-top: -50%; 
  } 
 }
<img src="https://bipbap.ru/wp-content/uploads/2017/04/tigr_morda_listya_vzglyad_polosatyy_1920x1080.jpg" class="block">

READ ALSO
AUTO_INCREMENT по группам
MySQL

AUTO_INCREMENT по группам

Подскажите, как создать авто_инкриментальную колонку в таблице по группе?

 138
Копия вордпресс сайта работает иначе
HTML

Копия вордпресс сайта работает иначе

Я создал 2 сайтаОдин работает давно

 155
Ошибка при чтении HTML-файла
HTML

Ошибка при чтении HTML-файла

Почему не работает, данный код (url не считаем)Вот он:

 179
Проблемы с EncodingFilter
HTML

Проблемы с EncodingFilter

при разработке веб-приложения на java столкнулся с проблемой кодировки при отображении русских символов на страничке в бразуереНаписал EncodingFilter...

 150