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