Помогите разобраться
Делаю слайдер, суть его в том, что когда правый блок скрывается меняется слово, у меня ни как не получается настроить. Помогите пожалуйста разобраться как это сделать.
https://jsfiddle.net/2zhj0xdm/4/ |
l_mke,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.one_row_content_banner{
display: flex;
transform: translateY(0);
animation: top_one 1s ease-in-out;
}
.one_row_text-style{
font-family: 'Raleway', sans-serif;
font-weight: 900;
font-size: 3rem;
text-transform: uppercase;
color: #000;
}
.one_row_content_banner-text{
display: block;
margin: 0 10px;
}
.one_row_content_banner-clip_text{
position: relative;
overflow: hidden;
border-right: 1px solid #000;
font-weight: 700;
padding-right: 218px;
}
.is_visible.slide_banner{
opacity: 1;
position: absolute;
display: block;
}
.slide_banner{
display: none;
}
</style>
</head>
<body>
<section class="banner">
<div class="banner_content">
<div class="one_row_content_banner">
<span class="one_row_content_banner-text one_row_text-style">Lorem</span>
<span class="one_row_content_banner-clip_text one_row_text-style">
<b class="is_visible slide_banner">слово1</b>
<b class="slide_banner">слово2</b>
</span>
</div>
</div>
</section>
<script>
let slide = document.querySelectorAll('.slide_banner');
let len = slide.length;
let index = 0;
let b = document.querySelector('.one_row_content_banner-clip_text'), m = 218, n = 1;
function c(){
m -= n;
if(m == 218 || m == 0) n = -n;
b.style.paddingRight = m + 'px';
if(!m) {
slide[index].classList.remove('is_visible');
index = ++index % len;
slide[index].classList.add('is_visible');
};
if(m == 218) setTimeout(c, 1200);
else requestAnimationFrame(c)
}
requestAnimationFrame(c);
</script>
</body>
</html>
|
Спасибо! А еще вопрос, а как сделать, что бы когда он полностью раскрывался как бы останавливался на пару секунд и потом опять закрывался?
|
Цитата:
|
Спасибо!
|
| Часовой пояс GMT +3, время: 01:22. |