Шпаргалка для WEB мастера: Раскрывающийся виджет с мессенджерами - скрипт
При клике на кнопку разворачиваются картинки с мессенджерами, простой скрипт на HTML, JS, CSS - можете добавить любой мессенджер какой хотите.
Это вставлять в HTML
<!-- ВИДЖЕТЫ МЕССЕНДЖЕРОВ СПРАВА ВНИЗУ НАЧАЛО -->
<!-- ВИДЖЕТЫ МЕССЕНДЖЕРОВ СПРАВА ВНИЗУ НАЧАЛО -->
<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>
<!-- ВИДЖЕТЫ МЕССЕНДЖЕРОВ СПРАВА ВНИЗУ КОНЕЦ -->
CSS
.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;}
Демо:
Пак с картинками:
Под номером 4
Больше материалов а моем Телеграме :
1 комментарий