Анимированные иконки социальных сетей by Бармен - Форум
Четверг
23.09.2021
14:13
 
X-Files
 
Онлайн радио #radiobells_script_hash
Мини-чат ·

Для добавления сообщения зарегистрируйтесь.
Регистрация Вход . Новые сообщения · Участники · Правила форума · RSS

  • Страница 1 из 1
  • 1
Форум »  SOFT, Windows, Android » Веб » Анимированные иконки социальных сетей by Бармен
Анимированные иконки социальных сетей by Бармен
БарменДата: Пятница, 10.09.2021, 15:25 | Сообщение # 1
Группа: Альянс
Сообщений: 43
Статус:


Рипал: Бармен

Ссылка на скачивание!

Вставляем в нижнею часть сайта:

Код
<script type='text/javascript' src='js/jquery-3.4.1.min.js' id='jquery-slim-js'></script>
<div id="mine">
   <div class="soc duration flex">
      <div class="item text">
         <p>подпишитесь</p>
      </div>
      <div class="item on-soc flex">
         <svg class="duration" width="10" height="45" viewBox="0 0 10 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="duration" d="M5.84961 10.2828L5.84961 43.8576C5.84961 43.971 5.40112 44.0702 4.85567 44.0702C4.29809 44.0702 3.84961 43.971 3.84961 43.8576L3.84961 10.2828C3.84961 10.1694 4.29809 10.0702 4.84355 10.0702C5.40112 10.0702 5.84961 10.1694 5.84961 10.2828Z" fill="#none"></path>
            <path class="duration" d="M-1.28074e-07 15.94L4.93 -4.03019e-06L9.85 15.94L4.93 18.87L-1.28074e-07 15.94Z" fill="#none"></path>
         </svg>
      </div>
      <div class="item duration off flex">
         <svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="duration" d="M17.8191 10.002C20.5811 10.002 22.8201 7.76295 22.8201 5.00098C22.8201 2.23902 20.5811 0 17.8191 0C15.0571 0 12.8181 2.23902 12.8181 5.00098C12.8181 7.76295 15.0571 10.002 17.8191 10.002Z" fill="none"></path>
            <path class="duration" d="M13.542 6.04883C13.2814 6.04883 12.8127 6.58934 12.8127 6.88236C12.8127 9.70084 11.6931 12.4039 9.70014 14.3968C7.70717 16.3898 5.00413 17.5094 2.18565 17.5094C1.6476 17.5054 1.11062 17.4605 0.579346 17.3753C2.72745 18.8187 5.22755 19.6509 7.81217 19.7829C10.3968 19.915 12.9687 19.3419 15.2527 18.1249C17.5367 16.9079 19.4469 15.0929 20.7789 12.874C22.1109 10.6551 22.8146 8.11587 22.8147 5.52788C22.8147 4.60816 16.9605 6.04883 13.542 6.04883Z" fill="none"></path>
            <path class="duration" d="M13.5483 6.03869C11.4793 6.03976 9.43489 5.58975 7.55754 4.72001C5.6802 3.85027 4.01502 2.58172 2.67802 1.0027C2.24171 1.74851 2.00939 2.59602 2.00439 3.46006C2.0044 4.7795 2.52854 6.04489 3.46152 6.97788C4.3945 7.91086 5.65989 8.43502 6.97933 8.43503C9.63588 8.43503 14.3538 8.46333 14.6645 5.98231C14.295 6.011 13.9251 6.03869 13.5483 6.03869Z" fill="none"></path>
            <path class="duration" d="M4.36737 7.55724C3.54001 7.55181 2.72739 7.33778 2.0047 6.93494C2.00431 6.96066 1.99707 6.98446 1.99707 7.01025C1.99707 8.3297 2.52122 9.5951 3.45421 10.5281C4.38719 11.4611 5.65259 11.9852 6.97204 11.9852C9.71961 11.9852 13.5671 9.99233 13.5671 7.24473C13.5671 5.35727 7.08916 7.55724 4.36737 7.55724Z" fill="none"></path>
            <path class="duration" d="M7.47412 11.2526C6.91978 11.6118 6.2984 11.8549 5.6475 11.9673C4.9966 12.0796 4.32968 12.0589 3.68701 11.9064C3.98692 12.9345 4.61162 13.8379 5.46767 14.4815C6.32372 15.125 7.36512 15.4741 8.4361 15.4766C9.9295 15.3174 11.3234 14.6517 12.3858 13.5902C13.4483 12.5287 14.1152 11.1354 14.2758 9.64213C14.2758 7.27473 8.85175 10.368 7.47412 11.2526Z" fill="none"></path>
            <path class="duration" d="M19.8401 1.72666C18.1871 1.72666 17.7952 3.80257 19.9338 3.80257C20.9728 3.80026 21.9847 3.47169 22.8269 2.86326C23.669 2.25483 24.2988 1.39726 24.6273 0.411621C23.1787 1.27216 21.525 1.72643 19.8401 1.72666Z" fill="none"></path>
            <path class="duration" d="M21.3527 3.16964C20.0913 3.17127 18.8424 2.91914 17.6805 2.42824C14.2944 0.996073 12.2353 6.60781 17.4456 6.60781C19.0285 6.60778 20.5858 6.20885 21.9738 5.44789C23.3617 4.68692 24.5355 3.58846 25.3867 2.25396C24.1269 2.85558 22.7487 3.16841 21.3527 3.16964Z" fill="none"></path>
         </svg>
         <a href="#" target="_blank" class="link"> </a>
      </div>
      <div class="item duration off flex">
         <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="duration" fill-rule="evenodd" clip-rule="evenodd" d="M11.1648 20.072H14.0872V12.9991H16.0368L16.2951 10.5621H14.0872L14.0903 9.3418C14.0903 8.70653 14.1509 8.3655 15.0627 8.3655H16.2812V5.928H14.3312C11.989 5.928 11.1648 7.11057 11.1648 9.0987V10.5621H9.70494V12.9996H11.1648V20.072ZM13 26C5.82053 26 0 20.1795 0 13C0 5.8201 5.82053 0 13 0C20.1795 0 26 5.8201 26 13C26 20.1795 20.1795 26 13 26Z" fill="none"></path>
         </svg>
         <a href="#" target="_blank" class="link"> </a>
      </div>
      <div class="item duration off flex">
         <svg width="31" height="18" viewBox="0 0 31 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="duration" d="M29.8213 1.49803H24.9468C24.7478 1.49803 24.5526 1.55197 24.3818 1.65411C24.2111 1.75626 24.0712 1.90278 23.9772 2.07809C23.9772 2.07809 22.033 5.65857 21.4085 6.86455C19.7285 10.1088 18.6406 9.09029 18.6406 7.58462V2.39306C18.6406 1.95923 18.4682 1.54318 18.1615 1.23642C17.8547 0.929655 17.4386 0.757319 17.0048 0.757319H13.3398C12.8407 0.720209 12.3404 0.811313 11.8864 1.02198C11.4324 1.23264 11.0398 1.55587 10.7458 1.96097C10.7458 1.96097 12.6069 1.66007 12.6069 4.16766C12.6069 4.78947 12.6389 6.57827 12.6681 8.0786C12.6736 8.29969 12.6111 8.51715 12.4891 8.70161C12.3671 8.88607 12.1914 9.02866 11.9858 9.11011C11.7802 9.19157 11.5546 9.20797 11.3393 9.15711C11.1241 9.10625 10.9297 8.99057 10.7823 8.8257C9.2821 6.73925 8.03947 4.47923 7.08138 2.09474C6.99909 1.91637 6.86737 1.76534 6.70184 1.65957C6.53631 1.55381 6.34391 1.49774 6.14748 1.49803C5.09034 1.49803 2.9749 1.49803 1.71862 1.49803C1.5968 1.4972 1.47659 1.52596 1.36834 1.58183C1.26008 1.63771 1.16701 1.71903 1.09711 1.81881C1.02722 1.91859 0.982594 2.03385 0.967071 2.15468C0.951549 2.27552 0.965593 2.39831 1.008 2.51252C2.35281 6.20134 8.14585 17.7936 14.758 17.7936H17.5411C17.8327 17.7936 18.1123 17.6778 18.3185 17.4716C18.5247 17.2654 18.6406 16.9857 18.6406 16.6941V15.0136C18.6406 14.8028 18.7022 14.5966 18.818 14.4204C18.9337 14.2442 19.0985 14.1057 19.292 14.022C19.4855 13.9383 19.6992 13.9131 19.9069 13.9494C20.1146 13.9856 20.3071 14.0819 20.4607 14.2262L23.7919 17.356C24.091 17.6371 24.4861 17.7936 24.8966 17.7936H29.2709C31.3807 17.7936 31.3807 16.3296 30.2304 15.1968C29.4209 14.3995 26.4997 11.3205 26.4997 11.3205C26.2496 11.0613 26.1004 10.7212 26.0791 10.3617C26.0578 10.0021 26.1658 9.64678 26.3836 9.35991C27.3278 8.11736 28.8722 6.08338 29.5272 5.21204C30.4225 4.02107 32.0428 1.49803 29.8213 1.49803Z" fill="none"></path>
         </svg>
         <a href="#" target="_blank" class="link"> </a>
      </div>
      <div class="item flex">
         <svg width="29" height="22" viewBox="0 0 29 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="duration" d="M28.3487 4.03103C28.0158 2.78523 27.0348 1.80426 25.789 1.4713C23.5308 0.866211 14.4768 0.866211 14.4768 0.866211C14.4768 0.866211 5.42275 0.866211 3.1646 1.4713C1.91903 1.80426 0.937826 2.78523 0.604916 4.03103C0 6.28896 0 11.0001 0 11.0001C0 11.0001 0 15.7112 0.604916 17.9689C0.937826 19.2147 1.91903 20.1959 3.1646 20.5289C5.42275 21.1337 14.4768 21.1337 14.4768 21.1337C14.4768 21.1337 23.5308 21.1337 25.789 20.5289C27.0348 20.1959 28.0158 19.2147 28.3487 17.9689C28.9536 15.7112 28.9536 11.0001 28.9536 11.0001C28.9536 11.0001 28.9536 6.28896 28.3487 4.03103ZM11.5813 15.3432V6.65698L19.1035 11.0001L11.5813 15.3432Z" fill="none"></path>
         </svg>
         <a href="#" target="_blank" class="link"> </a>
      </div>
      <div class="item flex">
         <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="duration" d="M13 2.34325C16.471 2.34325 16.8827 2.35625 18.2542 2.41908C21.7772 2.57942 23.4228 4.251 23.5831 7.748C23.6459 9.11842 23.6578 9.53008 23.6578 13.0011C23.6578 16.4732 23.6448 16.8838 23.5831 18.2542C23.4217 21.7479 21.7804 23.4228 18.2542 23.5831C16.8827 23.6459 16.4732 23.6589 13 23.6589C9.529 23.6589 9.11733 23.6459 7.74692 23.5831C4.21525 23.4217 2.57833 21.7425 2.418 18.2531C2.35517 16.8827 2.34217 16.4721 2.34217 13C2.34217 9.529 2.35625 9.11842 2.418 7.74692C2.57942 4.251 4.22067 2.57833 7.74692 2.418C9.11842 2.35625 9.529 2.34325 13 2.34325ZM13 0C9.46942 0 9.02742 0.0151667 7.64075 0.078C2.91958 0.294667 0.29575 2.91417 0.0790833 7.63967C0.0151667 9.02742 0 9.46942 0 13C0 16.5306 0.0151667 16.9737 0.078 18.3603C0.294667 23.0815 2.91417 25.7053 7.63967 25.922C9.02742 25.9848 9.46942 26 13 26C16.5306 26 16.9737 25.9848 18.3603 25.922C23.0772 25.7053 25.7075 23.0858 25.9209 18.3603C25.9848 16.9737 26 16.5306 26 13C26 9.46942 25.9848 9.02742 25.922 7.64075C25.7097 2.92392 23.0869 0.29575 18.3614 0.0790833C16.9737 0.0151667 16.5306 0 13 0V0ZM13 6.3245C9.31342 6.3245 6.3245 9.31342 6.3245 13C6.3245 16.6866 9.31342 19.6766 13 19.6766C16.6866 19.6766 19.6755 16.6877 19.6755 13C19.6755 9.31342 16.6866 6.3245 13 6.3245ZM13 17.3333C10.6069 17.3333 8.66667 15.3942 8.66667 13C8.66667 10.6069 10.6069 8.66667 13 8.66667C15.3931 8.66667 17.3333 10.6069 17.3333 13C17.3333 15.3942 15.3931 17.3333 13 17.3333ZM19.9398 4.50125C19.0775 4.50125 18.3788 5.2 18.3788 6.06125C18.3788 6.9225 19.0775 7.62125 19.9398 7.62125C20.8011 7.62125 21.4988 6.9225 21.4988 6.06125C21.4988 5.2 20.8011 4.50125 19.9398 4.50125Z" fill="none"></path>
         </svg>
         <a href="#" target="_blank" class="link"> </a>
      </div>
      <div class="item flex">
         <svg width="27" height="20" viewBox="0 0 27 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="duration" d="M23.3182 2.5C23.3182 2.5 20.504 0.25625 17.1818 0L16.8824 0.610625C19.8855 1.36 21.2637 2.43125 22.7045 3.75C20.2212 2.45875 17.7709 1.25 13.5 1.25C9.22909 1.25 6.77884 2.45875 4.29545 3.75C5.73627 2.43125 7.37591 1.24 10.1176 0.610625L9.81818 0C6.33273 0.334375 3.68182 2.5 3.68182 2.5C3.68182 2.5 0.539386 7.14125 0 16.25C3.16636 19.9706 7.97727 20 7.97727 20L8.98364 18.635C7.27527 18.03 5.34845 16.9506 3.68182 15C5.66877 16.5312 8.66761 18.125 13.5 18.125C18.3324 18.125 21.3312 16.5312 23.3182 15C21.6522 16.9506 19.7253 18.03 18.0164 18.635L19.0227 20C19.0227 20 23.8336 19.9706 27 16.25C26.4606 7.14125 23.3182 2.5 23.3182 2.5ZM9.51136 13.75C8.32459 13.75 7.36364 12.6313 7.36364 11.25C7.36364 9.86875 8.32459 8.75 9.51136 8.75C10.6981 8.75 11.6591 9.86875 11.6591 11.25C11.6591 12.6313 10.6981 13.75 9.51136 13.75ZM17.4886 13.75C16.3019 13.75 15.3409 12.6313 15.3409 11.25C15.3409 9.86875 16.3019 8.75 17.4886 8.75C18.6754 8.75 19.6364 9.86875 19.6364 11.25C19.6364 12.6313 18.6754 13.75 17.4886 13.75Z" fill="none"></path>
         </svg>
         <a href="#" target="_blank" class="link"> </a>
      </div>
   </div>
</div>
CSS:

Код
@import url('https://fonts.googleapis.com/css2?family=Philosopher&display=swap');
body a {
    cursor: pointer;
}

* {
    margin: 0;
    padding: 0;
    line-height: 1;
    border: 0;
    font-weight: 400;
    outline: none;
    border-collapse: collapse;
    text-decoration: none;
    list-style: none;
    cursor: default;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: normal;
    -ms-flex-align: normal;
    align-items: normal;
}

/* soc */

.soc {
    justify-content: center;
    align-items: center;
    height: 58px;
}

.soc.text {
    height: 25px;
}

.soc .item {
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 10px 0 0;
}

.soc .item.flex {
    justify-content: center;
    align-items: center;
    /*margin: 0 16px 0 16px;*/
    position: relative;
}

.soc .item.flex a.link {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/* /soc */

/* soc */

.soc {
    position: absolute;
    left: 60px;
    bottom: 60px;
    width: 32px;
    margin: 80px 130px;
    font-family: 'Philosopher', sans-serif;
    /*height: 320px;*/
    height: auto;
    /*overflow: hidden;*/
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-end;
}

.soc {
    left: 0;
}

.soc.open {
    /*height: 400px;*/
}

.soc .item {
    font-size: 18px;
    line-height: 25px;
    color: #3F3421;
    margin: 18px 0 0 0;
    color: #B3944B;
}

.soc .item svg,
.soc .item svg path {
    cursor: pointer;
}

.soc .item.off {
    max-height: 0;
    overflow: hidden;
    margin: 0;
}

.soc.open .item.off {
    max-height: 50px;
    margin: 18px 0 0 0;
}

.soc.open .item.on-soc {
    transform: scale(-1, -1);
    /*display: none;*/
}

.soc .item.text {
    width: 18px;
    position: relative;
    flex-shrink: 0;
    margin: 0;
}

.soc .item.text p {
    position: absolute;
    transform-origin: 0 0;
    white-space: nowrap;
    transform: rotate(270deg);
    margin: 0;
    bottom: -18Р·С‡;
    left: 0;
}

.soc .item.flex path {
    fill: #B3944B;
}

.soc .item.flex:hover path {
    fill: #FFF;
}

/* /soc */

.duration {
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
}
JS:

Код
$( document ).ready(function() {
    // открыть/закрыть соцсети
    $( "body" ).on( "click", ".on-soc", function() {
  let soc = $( "#mine .soc" );
  soc.toggleClass( "open" ); // сварачиваем/разворачиваем список
  $(document).on('click', function(e) { // сварачиваем список кликом вне элемента
   if ( !soc.is(e.target) && soc.hasClass("open") && soc.has(e.target).length === 0 ) {
    soc.toggleClass( "open" ); // сварачиваем/разворачиваем список
   } else {
    null;
   }
  });
    });
});
 
Форум »  SOFT, Windows, Android » Веб » Анимированные иконки социальных сетей by Бармен
  • Страница 1 из 1
  • 1
Поиск:


СЕЗОН КАТАСТРОФ © 2021