Шпаргалка для WEB мастера: Раскрывающийся виджет с мессенджерами - скрипт

<!-- ВИДЖЕТЫ МЕССЕНДЖЕРОВ СПРАВА ВНИЗУ НАЧАЛО --> <!-- ВИДЖЕТЫ МЕССЕНДЖЕРОВ СПРАВА ВНИЗУ НАЧАЛО --> <div class="callback-widget"> <div class="item item1"><a class="phone" href="tel:+79800005665" title="Телефон +7 (980) 000-56-65" rel="nofollow" target="_blank"></a></div> <div class="item item2"><a href="https://t.me/NewSeoDay" title="Telegram" target="_blank" rel="nofollow" target="_blank"></a></div> <div class="item item3"><a href="https://api.whatsapp.com/send?phone=79800005665" title="WhatsApp" target="_blank" rel="nofollow" target="_blank"></a></div> <div class="callback-widget-btn"></div> </div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { const callbackBtn = document.querySelector('.callback-widget-btn'); const items = { item1: document.querySelector('.item1'), item2: document.querySelector('.item2'), item3: document.querySelector('.item3') }; callbackBtn.addEventListener('click', function(e) { e.preventDefault(); this.classList.toggle('active'); if (this.classList.contains('active')) { fadeIn(items.item3, 500); setTimeout(() => fadeIn(items.item2, 350), 250); setTimeout(() => fadeIn(items.item1, 450), 550); } else { fadeOut(items.item1, 500); setTimeout(() => fadeOut(items.item2, 350), 250); setTimeout(() => fadeOut(items.item3, 450), 550); } }); function fadeIn(element, duration) { element.style.opacity = 0; element.style.display = 'block'; let start = performance.now(); function animate(time) { let elapsed = time - start; element.style.opacity = Math.min(elapsed / duration, 1); if (elapsed < duration) { requestAnimationFrame(animate); } } requestAnimationFrame(animate); } function fadeOut(element, duration) { element.style.opacity = 1; let start = performance.now(); function animate(time) { let elapsed = time - start; element.style.opacity = Math.max(1 - elapsed / duration, 0); if (elapsed < duration) { requestAnimationFrame(animate); } else { element.style.display = 'none'; } } requestAnimationFrame(animate); } }); </script> <!-- ВИДЖЕТЫ МЕССЕНДЖЕРОВ СПРАВА ВНИЗУ КОНЕЦ -->

.item{position: fixed;display:none;width:70px;height:70px;border-radius:50%;} .item1{bottom:270px;right:20px;background-image: url(/webpmess/telefon-1.webp);background-size:cover;} .item2{bottom:190px;right:20px;background-image: url(/webpmess/telegram-1.webp);background-size:cover;} .item3{bottom:110px;right:20px;background-image: url(/webpmess/whatsup-1.webp);background-size:cover;} .item1 a{display:block;width:70px;height:70px;} .item2 a{display:block;width:70px;height:70px;} .item3 a{display:block;width:70px;height:70px;} .callback-widget-btn{ width: 70px;height: 70px;background-image: url(/webpmess/messagevid-1.webp); background-size:cover;border-radius: 50%;position: fixed;bottom:10px; right:20px;cursor:pointer;animation-duration: 1.5s;animation-iteration-count: infinite;}