Как повторить этот css эффект?
1,00
р.
Подскажите, как я могу повторить эффект появления блока, как на этом видео?
На данный момент имею что-то вот такое.
Появление реализовано через свойство clip-path. Не могу додуматься как мне повторить эффект растворения.
Сам слайдер при клике на миниатюры открывает секции, а не просто картинки. Т.е. тыкаешь на миниатюру, появляется секция со своим контентом.
Здесь используемые изображения
Это мой HTML
<!-- /.wrap --> <!-- /.wrapper -->
Это мой 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(../imglider/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 ()
Ответ
Когда вы нажимаете на слайдер, маска со следующего изображения масштабируется на фоне, создавая впечатление затухания.
Чтобы сделать это, вы должны создать простую 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 }
Время ожидания не соответствует примеру из-за setTimeout функции, но это должно быть легко настраиваемым. Если Вы хотите решение для всех браузер, нужно не забыть настроить правильные префиксы (в примере префиксы для webkit).
На данный момент имею что-то вот такое.
Появление реализовано через свойство clip-path. Не могу додуматься как мне повторить эффект растворения.
Сам слайдер при клике на миниатюры открывает секции, а не просто картинки. Т.е. тыкаешь на миниатюру, появляется секция со своим контентом.
Здесь используемые изображения
Это мой HTML
<!-- /.one -->
<!-- /.one --> <!-- /.one --> <!-- /.one -->
<!-- /.sectios --> <!-- /.one --> <!-- /.one --> <!-- /.one -->
Это мой 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(../imglider/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 ()
Ответ
Когда вы нажимаете на слайдер, маска со следующего изображения масштабируется на фоне, создавая впечатление затухания.
Чтобы сделать это, вы должны создать простую 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 }
Время ожидания не соответствует примеру из-за setTimeout функции, но это должно быть легко настраиваемым. Если Вы хотите решение для всех браузер, нужно не забыть настроить правильные префиксы (в примере префиксы для webkit).
