@Kraysik
Осваиваю сайтостроение

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

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

Появление реализовано через свойство 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 ();
  • Вопрос задан
  • 3858 просмотров
Пригласить эксперта
Ответы на вопрос 1
@shure348
по моему все круто
скорость только побыстрее и границу у круга размазаннее
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Amigoweb Магнитогорск
от 30 000 до 40 000 руб.
Datcroft Games Воронеж
от 120 000 до 150 000 руб.
22 апр. 2019, в 00:21
5000 руб./за проект
21 апр. 2019, в 21:02
1000 руб./за проект
21 апр. 2019, в 19:41
5000 руб./за проект