Всем доброго времени суток, люди добрые, подскажи, как я могу повторить эффект появления блока, как на
этом видео?
На данный момент имею что-то
вот такое.
Появление реализовано через свойство 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 ();
Средний
Простой
