{"id":1638,"date":"2023-07-07T15:23:00","date_gmt":"2023-07-07T12:23:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1638"},"modified":"2023-07-07T15:23:02","modified_gmt":"2023-07-07T12:23:02","slug":"animated-tabs","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/sidebar\/1638\/","title":{"rendered":"Animated tabs"},"content":{"rendered":"\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"852\" height=\"442\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/07\/peek-2023-07-07-13-49.gif\" alt=\"Animated tabs \" class=\"wp-image-1639 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;link\n  rel=&quot;stylesheet&quot;\n  href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.1.1\/css\/all.min.css&quot;\n  integrity=&quot;sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==&quot;\n  crossorigin=&quot;anonymous&quot;\n  referrerpolicy=&quot;no-referrer&quot;\n\/&gt;\n \n&lt;body&gt;\n&lt;div class=&quot;overlay&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;nav&quot;&gt;\n  &lt;ul class=&quot;tabs&quot;&gt;\n    &lt;li class=&quot;tabs-item tab tab-comment tab-is-active&quot;&gt;\n      &lt;div class=&quot;tab-circle&quot;&gt;&lt;\/div&gt;\n      &lt;i class=&quot;fa fa-comment tab-icon&quot;&gt;&lt;\/i&gt;\n      &lt;span class=&quot;tab-name&quot;&gt;Comment&lt;\/span&gt;\n    &lt;\/li&gt;\n    \n    &lt;li class=&quot;tabs-item tab tab-clipboard&quot;&gt;\n      &lt;div class=&quot;tab-circle&quot;&gt;&lt;\/div&gt;\n      &lt;i class=&quot;fa fa-clipboard tab-icon&quot;&gt;&lt;\/i&gt;\n      &lt;span class=&quot;tab-name&quot;&gt;Clipboard&lt;\/span&gt;\n    &lt;\/li&gt;\n    &lt;li class=&quot;tabs-item tab tab-burn&quot;&gt;\n      &lt;div class=&quot;tab-circle&quot;&gt;&lt;\/div&gt;\n      &lt;i class=&quot;fa fa-cloud-upload tab-icon cloud&quot; &gt;&lt;\/i&gt;\n      &lt;span class=&quot;tab-name&quot;&gt;Upload&lt;\/span&gt;\n    &lt;\/li&gt;\n    &lt;li class=&quot;tabs-item tab tab-bell&quot;&gt;\n      &lt;div class=&quot;tab-circle&quot;&gt;&lt;\/div&gt;\n      &lt;i class=&quot;fa fa-bell tab-icon&quot;&gt;&lt;\/i&gt;\n      &lt;span class=&quot;tab-name&quot;&gt;Notifications&lt;\/span&gt;\n    &lt;\/li&gt;\n    &lt;li class=&quot;tabs-item tab tab-bookmark &quot;&gt;\n      &lt;div class=&quot;tab-circle&quot;&gt;&lt;\/div&gt;\n      &lt;i class=&quot;fa fa-bookmark tab-icon&quot;&gt;&lt;\/i&gt;\n      &lt;span class=&quot;tab-name&quot;&gt;Bookmark&lt;\/span&gt;\n    &lt;\/li&gt;\n    \n  &lt;\/ul&gt;\n&lt;\/div&gt;\n&lt;br&gt;\n &lt;br&gt;\n \n&lt;\/body&gt;\n \n&lt;script\nsrc=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.10.4\/gsap.min.js&quot;\nintegrity=&quot;sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ\/slxc4Q==&quot;\ncrossorigin=&quot;anonymous&quot;\nreferrerpolicy=&quot;no-referrer&quot;\n&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@import url(&quot;https:\/\/fonts.googleapis.com\/css?family=Ubuntu:300,400,500,700&amp;subset=cyrillic&quot;);\n\nbody {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh;\n    width: 100%;\n    transition: 0.5s;\n    overflow: hidden;\n}\n\n.overlay {\n    height: 200vw;\n    width: 200vw;\n    border-radius: 50%;\n    background-color: #000;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n}\n\n.nav {\n    background-color: #fff;\n    padding: 12px 5px;\n    border-radius: 15px;\n    box-shadow: 3px 3px 15px rgba(179, 179, 179, 0.185);\n    position: relative;\n    z-index: 99;\n}\n\n.tabs {\n    display: flex;\n    width: 490px;\n    justify-content: space-around;\n    list-style-type: none;\n}\n\n.tab {\n    padding: 12px 22px;\n    background-color: #e0efff;\n    color: #58a6ff;\n    margin-right: 15px;\n    border-radius: 55px;\n    text-align: center;\n    white-space: nowrap;\n    transition: 0.3s ease;\n    overflow: hidden;\n    max-width: 0px;\n    cursor: pointer;\n    position: relative;\n    flex-basis: 120px;\n}\n\n.tab-is-active {\n    max-width: 100px;\n    box-shadow: 7px 7px 15px rgba(124, 124, 124, 0.096);\n}\n\n.tab-is-active .tab-name {\n    opacity: 1;\n}\n.cloud {\n  right: 10px !important;\n}\n.tab-circle {\n    position: absolute;\n    height: 20px;\n    width: 20px;\n    border-radius: 50%;\n    border: 2px solid #95c5fd;\n    z-index: 10;\n    opacity: 0;\n    left: 30px;\n    pointer-events: none;\n}\n\n.tab-icon {\n    margin-right: 1px;\n    font-size: 18px;\n    vertical-align: middle;\n    position: relative;\n    right: 6.7px;\n    top: -1px;\n}\n\n.tab-name {\n    font-family: &quot;Ubuntu&quot;, sans-serif;\n    font-size: 15px;\n    font-weight: 500;\n    position: relative;\n    transition: 0.3s ease;\n    top: 1px;\n    opacity: 0;\n}\n\n.tab-bookmark {\n    background: #cffcff;\n    color: #009ffb;\n}\n\n.tab-burn {\n    background: #f1ddff;\n    color: #8f44fd;\n}\n\n\n.tab-clipboard {\n    background: #ecd1dd;\n    color: #d93479;\n}\n\n.tab-comment {\n    background: #eee0ca;\n    color: #d3be3a;\n}\n\n\n\na {\n\tdisplay: block;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcolor: #ffffff;\n\tfont-size: 18px;\n\tbackground-color: rgba(255, 255, 255, 0.06);\n\t-webkit-backdrop-filter: blur(15px);\n\tbackdrop-filter: blur(15px);\n\tpadding: 10px 0;\n\tmargin-top: 20px;\n\t-webkit-box-shadow: 0 25px 23px rgba(0, 0, 0, 0.15);\n\tbox-shadow: 0 25px 23px rgba(0, 0, 0, 0.15);\n\tborder: 1.5px solid rgba(255, 255, 255, 0.06);\n\tborder-radius: 8px;\n}\ni.fab {\n\tcolor: #ff0000;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">let tabs = document.querySelectorAll(&quot;.tab&quot;);\nlet overlay = document.querySelector(&quot;.overlay&quot;);\n\nlet firstActive = document.querySelector(&quot;.tab-is-active&quot;);\nlet activeColor = getComputedStyle(firstActive).color;\noverlay.style.background = activeColor;\ndocument.body.style.background = activeColor;\n\ntabs.forEach((tab) =&gt; {\n  tab.addEventListener(&quot;click&quot;, function () {\n    let tl = new TimelineLite();\n\n    let accentColor = getComputedStyle(this).color;\n    this.children[0].style.borderColor = accentColor;\n    if (!this.classList.contains(&quot;tab-is-active&quot;)) {\n      tl.fromTo(\n        this.children[0],\n        0.1,\n        { scale: 0, opacity: 1 },\n        { scale: 3, opacity: 0 },\n        &quot;0&quot;\n      );\n      overlay.style.background = accentColor;\n      tl.fromTo(\n        overlay,\n        1,\n        { scale: 0, opacity: 0 },\n        { scale: 1, opacity: 1 },\n        &quot;0&quot;\n      );\n    }\n    tabs.forEach((tab) =&gt; {\n      tab.classList.remove(&quot;tab-is-active&quot;);\n      this.classList.add(&quot;tab-is-active&quot;);\n    });\n  });\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1639,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[27,71],"class_list":["post-1638","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sidebar","tag-gsap","tag-tab-bar"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1638"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1638\/revisions"}],"predecessor-version":[{"id":1640,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1638\/revisions\/1640"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1639"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}