About Teletype
Join
@onthewaytothesun
February 11, 2022

Виджет "месседжеры"

Обычный вариант:

<label class="menu-checkbox circlepit">
  <input class="alarmed" type="checkbox" onchange="fun1()"><img class="mainimg" src="https://img.icons8.com/ios/40/ffffff/sms.png"/>
  <div class="webs__list">
    <a href="#"><img src="https://img.icons8.com/color/40/000000/whatsapp--v1.png"/></a>
   <a href="#"><img src="https://img.icons8.com/color/40/000000/telegram-app--v1.png"/></a>
    <a href="#"><img src="https://img.icons8.com/color/40/000000/instagram-new--v1.png"/></a>
    <a href="#"><img src="https://img.icons8.com/ios-filled/40/8B49C6/viber--v1.png"/></a>
    <a href="#"><img src="https://img.icons8.com/color/40/000000/vk-circled.png"/></a>
  </div>
</label>

<style>.alarmed {
  position: fixed;
  display: none;
  right: 10px;
  bottom: 10px;
    border-radius: 50%; 
  padding: 10px;
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.3);
  box-sizing: border-box;
} 
.menu-checkbox .webs__list { 
 display: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  color: white;
  padding: 0px;
  filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.3));
  transition: all 0.4s linear;
} 
.alarmed:checked ~ .webs__list { 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 20px;
} 

.menu-checkbox { 
  transition: all 0.1s linear;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  position: fixed;
  right: 10px;
bottom: 10px;
border-radius: 50%;
  /* цвет виджета */
  background: orange;
  padding: 10px;
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.3);
  box-sizing: border-box;
  z-index: 1488;
  }
.circlepit::before {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
   /* цвет анимированной полоски */
  border: 2px solid orange;
  content: " ";
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  box-sizing: border-box;
  animation: circle--anim 1s ease infinite normal;
  /* цвет тени анимированной полоски */
  filter: drop-shadow(0px 0px 3px orange);
}
.unbordered {
  border-radius: 6px !important;
}
.animated--icons {
  animation: 0.2s icon--anim linear 1 forwards;
}
@keyframes icon--anim {
  0% {
    transform: translate(0px, 100px);
  }
 
  90% {
    transform: translate(0px, -15px);
  }
   100% {
    transform: translate(0px, 0px);
  }
}
@keyframes circle--anim {
  from {
  transform: scale(1);}
  to {transform: scale(1.4);}
}
</style>
<script>
  function fun1() {
var chbox = document.querySelector('.alarmed');
  var lbl=document.querySelector('.menu-checkbox');
  if (chbox.checked) {
   lbl.classList.add('unbordered');
     lbl.classList.remove('circlepit');
    var image = document.querySelector('.mainimg');
image.src = "https://img.icons8.com/ios/40/ffffff/close-window.png"
  var icons = document.querySelectorAll('.webs__list a');
    for(var i = 0, len = icons.length; i < len; i++) {
      icons[i].classList.add('animated--icons');
    }
  }
  else { 
    lbl.classList.remove('unbordered');
     lbl.classList.add('circlepit');
    var image = document.querySelector('.mainimg');
image.src = "https://img.icons8.com/ios/40/ffffff/sms.png";
    var icons = document.querySelectorAll('.webs__list a');
    for(var i = 0, len = icons.length; i < len; i++) {
      icons[i].classList.remove('animated--icons');
    }
}
  
}
</script>

Вариант со звуком при нажатии:

 <label class="menu-checkbox circlepit non-animated">
  <input class="alarmed" type="checkbox" onclick="fun1()"><img class="mainimg" src="https://img.icons8.com/ios/40/ffffff/sms.png"/>
  <audio id="audio"  src="https://cc26299.tmweb.ru/files/click.mp3" preload="auto"></audio>
  <div class="webs__list">
    <a href="#"><img src="https://img.icons8.com/color/40/000000/whatsapp--v1.png"/></a>
   <a href="#"><img src="https://img.icons8.com/color/40/000000/telegram-app--v1.png"/></a>
    <a href="#"><img src="https://img.icons8.com/color/40/000000/instagram-new--v1.png"/></a>
    <a href="#"><img src="https://img.icons8.com/ios-filled/40/8B49C6/viber--v1.png"/></a>
    <a href="#"><img src="https://img.icons8.com/color/40/000000/vk-circled.png"/></a>
  </div>
</label>

<style>.alarmed {
  position: fixed;
  display: none;
  right: 10px;
  bottom: 10%;
    border-radius: 50%;
  padding: 10px;
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.3);
  box-sizing: border-box;

} 
.menu-checkbox .webs__list { 
 display: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  color: white;
  padding: 0px;
  filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.3));
  transition: all 0.4s linear;
} 
.alarmed:checked ~ .webs__list { 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 20px;
} 

.menu-checkbox { 
  transition: all 0.1s linear;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  position: fixed;
  right: 10px;
bottom: 10%;
border-radius: 50%;
  /* Цвет виджета */
  background: #0F97DC;
  padding: 10px;
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.3);
  box-sizing: border-box;
  z-index: 1488;
  cursor: pointer;
  }
.circlepit::before {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Цвет полоски виджета */
  border: 2px solid #0F97DC;
  content: " ";
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  box-sizing: border-box;
  animation: circle--anim 1s ease infinite normal;
  /* Цветь тени виджета */
  filter: drop-shadow(0px 0px 3px #0F97DC);
}
.unbordered {
  border-radius: 6px !important;
}
.animated--icons {
  animation: 0.2s icon--anim linear 1 forwards;
}
@keyframes icon--anim {
  0% {
    transform: translate(0px, 100px);
  }
 
  90% {
    transform: translate(0px, -15px);
  }
   100% {
    transform: translate(0px, 0px);
  }
}
@keyframes circle--anim {
  from {
  transform: scale(1);}
  to {transform: scale(1.4);}
}
</style>

<script>
   
  function fun1() {

    const soundEffect = new Audio();
soundEffect.autoplay = true;
    soundEffect.src = "data:audio/mpeg;base64,SUQzAwAAAAAHdlRDT04AAAAPAAAB//5PAHQAaABlAHIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/74gAAAA/8AEuAAAAJnIAJcAAAAQqgAS4UAAAgAAAlwoAABP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////++IAAAAKbVBNblvAhPiqCa3LeBCaqTdPuP2AA1Um6fcfsAAKh4LB0Oh4LBYLAwBgDSMQMR4tQMV4M8cYn8DGYLADrm8PJg0AyIneA0rEo/2msOMfA2Y0lERv/y6BMAImuZRQWBxBJ7GC0Mz//7EI9GXHBRUxmoibmQkZgZfQwX//+37+Y0+B5jwemQtK8dVS3BqiIoGQwLX/////MrE5fMpUXswCBKTIHIjMasL0yoi7DLGGO////+xev2L2VgwYQmTLWJCMZoQoWDYMX4dgyOiFjFWBo//////53//vf8wigbDBMAsFgFEUAYAMYCAABgWgPmAmAG2D//////////////zABABMAsBcBAXoUPxtXEli7LL3//9ToP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////4VDwWDodDwWCwWBgDAGkYgYjxagYrwZ44xP4GMwWAHXN4eTBoBkRO8BpWJR/tNYcY+BsxpKIjf/l0CYARNcyigsDiCT2MFoZn//2IR6MuOCipjNRE3MhIzAy+hgv//9v38xp8DzHg9MhaV46qluDVERQMhgWv////+ZWJy+ZSovZgECUmQORGY1YXplRF2GWMMd////9i9fsXsrBgwhMmWsSEYzQhQsGwYvw7BkdELGKsDR//////zv//e/5hFA2GCYBYLAKIoAwAYwEAADAtAfMBMANsH//////////////mACACYBYC4CAvQofjauJLF2WXv//6nQfiiTWxKaKRZKTUkkktuLgJ8PUylqOkJoCoQJaTJUhHgZLWOxAlWspHOSuLGGWArdOGORIHFRAUAAcBIPvpHYWYKFCIMAgNAzcBCDGDhDruDPsXMgKjaTgzYxLhiABijXar5vqz9huUusCAAT3kKl6ukeYyzqXQT2zKqCRPVKqzQH5hl3WdTLEYbjEtf2GorTSmllsDuzDN90JBOwmD7Urn5FhA01Ryulk252P5UWFW/VuWqr+zWWuWcf3yNSWN5XcM9ZfyX1Z+ir27hhBubPHvagX7cID4ok1sSmikWSk1JJJLbi4CfD1MpajpCaAqECWkyVIR4GS1jsQJVrKRzkrixhlgK3ThjkSBxUQFAAHASD76R2FmChQiDAIDQM3AQgxg4Q67gz7FzICo2k4M2MS4YgAYo12q+b6s/YblLrAgAE95CperpHmMs6l0E9syqgkT1Sqs0B+YZd1nUyxGG4xLX9hqK00ppZbA7swzfdCQTsJg+1K5+RYQNNUcrpZNudj+VFhVv1blqq/s1lrlnH98jUljeV3DPWX8l9Wfoq9u4YQbmzx72oF+3CA8//viAAAADahLz+c/AAjOiXn85+ABFtkZIafjC4rbIyQ0/GFxcjbbZK3/ybxVi9XJKTkP84CXJkmqqJEmzSOEsRnJvMrbs3GQhUDO24hwUUWJRh72MNTjyCFPBpteKu08LktMLpAgbzQO3jL1PLzRpjcmVWQBI/KHI1M5hh01oN5my5yVsq4bZMaHVhWIwVD0Fv4/7u0CwTrvU/z9Lye90q84ic78oWi3Rym+Xwxx13NUyhtI5pbYIvDTdXgbu4j9zjAYTXclwbD8vMsWGUlnMYDLGZMrai+zbQh5ZfAD/w5R3IBfJ2aLuq9TMItBkVr1ct6f//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9yNttkrf/JvFWL1ckpOQ/zgJcmSaqokSbNI4SxGcm8ytuzcZCFQM7biHBRRYlGHvYw1OPIIU8Gm14q7TwuS0wukCBvNA7eMvU8vNGmNyZVZAEj8ocjUzmGHTWg3mbLnJWyrhtkxodWFYjBUPQW/j/u7QLBOu9T/P0vJ73SrziJzvyhaLdHKb5fDHHXc1TKG0jmltgi8NN1eBu7iP3OMBhNdyXBsPy8yxYZSWcxgMsZkytqL7NtCHll8AP/DlHcgF8nZou6r1Mwi0GRWvVy3pMt1sid11rQDdDPFDi+ry5N4JKGKNgWdQROMvymMhiQgTQSzLiioGBr8SSLOg2RCwtWgopMoAqJgsuhqAo3GXoXehaAlGKYX0SqLrqaMPchy34huGIw2ycrCFjq0pXImoNJ6JZl2S8y+2CLeSJSOXwxdkrlQbGIPd1kTwPe4rhQXDEKf2ApRFojKJG6rWmQwZHJfLZVXsT0pmqCnvd129TVatTO9apa12phapblPetUsqoKexf4/Iy3WyJ3XWtAN0M8UOL6vLk3gkoYo2BZ1BE4y/KYyGJCBNBLMuKKgYGvxJIs6DZELC1aCikygComCy6GoCjcZehd6FoCUYphfRKouupow9yHLfiG4YjDbJysIWOrSlciag0nolmXZLzL7YIt5IlI5fDF2SuVBsYg93WRPA97iuFBcMQp/YClEWiMokbqtaZDBkcl8tlVexPSmaoKe93Xb1NVq1M71qlrXamFqluU961Syqgp7F/j8v/74gAAAA/8AEuAAAAJnIAJcAAAAQqgAS4AAAAgAAAlwAAABP////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9UQUcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADA==";
var chbox = document.querySelector('.alarmed');
  var lbl=document.querySelector('.menu-checkbox');
  if (chbox.checked) {
     
   lbl.classList.add('unbordered');
     lbl.classList.remove('circlepit');
    var image = document.querySelector('.mainimg');
image.src = "https://img.icons8.com/ios/40/ffffff/close-window.png"
  var icons = document.querySelectorAll('.webs__list a');
    for(var i = 0, len = icons.length; i < len; i++) {
      icons[i].classList.add('animated--icons');
    }
  }
  else { 
    lbl.classList.remove('unbordered');
     lbl.classList.add('circlepit');
    var image = document.querySelector('.mainimg');
image.src = "https://img.icons8.com/ios/40/ffffff/sms.png";
    var icons = document.querySelectorAll('.webs__list a');
    for(var i = 0, len = icons.length; i < len; i++) {
      icons[i].classList.remove('animated--icons');
    }
}
  
}
</script>
@onthewaytothesun
February 11, 2022, 05:52
0 views
2 reactions
0 replies
0 reposts