{"id":1302,"date":"2023-04-14T10:58:55","date_gmt":"2023-04-14T07:58:55","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1302"},"modified":"2023-04-14T10:58:58","modified_gmt":"2023-04-14T07:58:58","slug":"menu-slider","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1302\/","title":{"rendered":"Menu slider"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"941\" style=\"aspect-ratio: 1444 \/ 941;\" width=\"1444\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/04\/vokoscreenng-2023-04-13_11-39-13.webm\"><\/video><\/figure>\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;svg height=&quot;0&quot; width=&quot;0&quot;&gt;\n    &lt;symbol id=&quot;twitter&quot; viewBox=&quot;0 0 800 800&quot;&gt;\n        &lt;path d=&quot;M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z&quot;\/&gt;\n     &lt;\/symbol&gt; \n     &lt;symbol id=&quot;dribble&quot; viewBox=&quot;0 0 800 800&quot;&gt;\n        &lt;path d=&quot;M400 665c-146 0-265-119-265-265s119-265 265-265 265 119 265 265-119 265-265 265zm223-229s-69-22-140-9c30 81 43 161 43 161s82-49 97-152zM488 609s-15-90-48-172c-132 44-179 142-179 142s96 83 227 30zm-256-57c80-128 193-152 193-152s-12-27-19-39c-124 37-232 32-232 32s-8 87 58 159zm-54-198s102 2 210-28c-38-71-84-130-84-130-107 49-126 158-126 158zm169-174s50 65 85 134c84-31 118-83 118-83s-76-78-203-51zm102 167c6 11 20 44 20 44s64-11 157 7c0-85-51-141-51-141s-38 55-126 90z&quot;\/&gt;\n      &lt;\/symbol&gt;\n     \n     &lt;symbol id=&quot;codepen&quot; viewBox=&quot;0 0 800 800&quot;&gt;\n        &lt;path d=&quot;M140 482V320q0-10 10-18l238-158q12-8 24 0l238 158q9 6 10 19v158q0 10-10 19L412 656q-12 8-24 0L150 497q-9-6-10-15zm282-278v104l97 65 78-52zm-44 104V204L203 321l78 52zm-193 54v75l56-37zm193 234V492l-97-65-78 52zm22-143l79-53-79-53-79 53zm22 143l175-117-78-52-97 64v105zm193-159v-75l-56 38z&quot;\/&gt;\n      &lt;\/symbol&gt;\n  &lt;\/svg&gt;\n  \n  &lt;div class=&quot;slider-content&quot;&gt;\n      &lt;div class=&quot;header-wrapper&quot;&gt;\n        &lt;div class=&quot;header&quot;&gt;\n          &lt;div class=&quot;menu-wrapper&quot;&gt;\n            &lt;div class=&quot;menu-hamburger&quot;&gt;&lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;nav-wrapper&quot;&gt;\n            &lt;nav&gt;\n              &lt;ul&gt;\n                &lt;li&gt;Log In&lt;\/li&gt;\n                &lt;li&gt;Sign Up&lt;\/li&gt;\n                &lt;li&gt;Bag \u20ac0&lt;\/li&gt;\n              &lt;\/ul&gt;\n            &lt;\/nav&gt;  \n          &lt;\/div&gt;\n          \n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    \n    &lt;div class=&quot;slider-wrapper&quot;&gt;\n      &lt;div class=&quot;slider-container&quot;&gt; \n        &lt;div class=&quot;control-nav&quot;&gt;\n          &lt;ul&gt;\n            &lt;li class=&quot;active&quot;&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;number&quot;&gt;1&lt;\/span&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;number&quot;&gt;2&lt;\/span&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;number&quot;&gt;3&lt;\/span&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;number&quot;&gt;4&lt;\/span&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n       &lt;div class=&quot;lines-wrapper&quot;&gt;\n         &lt;div class=&quot;croses&quot;&gt;\n           &lt;span&gt;+&lt;\/span&gt;\n           &lt;span&gt;+&lt;\/span&gt;\n           &lt;span&gt;+&lt;\/span&gt;\n           &lt;span&gt;+&lt;\/span&gt;\n         &lt;\/div&gt;\n         &lt;span class=&quot;vertical&quot;&gt;&lt;\/span&gt;\n         &lt;span class=&quot;horizontal&quot;&gt;&lt;\/span&gt;\n         &lt;span class=&quot;horizontal&quot;&gt;&lt;\/span&gt;\n         &lt;span class=&quot;horizontal&quot;&gt;&lt;\/span&gt;\n         &lt;span class=&quot;horizontal&quot;&gt;&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;image-mask&quot;&gt;\n          &lt;img class=&quot;&quot; src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/karlie-kloss_copy.png&quot; alt=&quot;&quot; \/&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;slide active red&quot; data-order=&quot;1&quot; data-color=&quot;#EE4654&quot; data-img=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/karlie-kloss_copy.png&quot;&gt;\n          \n          &lt;div class=&quot;fake-bg red&quot;&gt;&lt;\/div&gt;\n          &lt;canvas class=&quot;canvas&quot; data-image=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/mask-karlie.jpg&quot;&gt;&lt;\/canvas&gt;\n          &lt;div class=&quot;slide-content &quot;&gt;\n             &lt;div class=&quot;image-caption&quot;&gt;\n               &lt;span class=&quot;line&quot;&gt;&lt;\/span&gt; \n               &lt;span&gt;Spring \/ Summer 2016&lt;\/span&gt;\n               \n              &lt;\/div&gt;\n            &lt;div class=&quot;title-background&quot;&gt;\n              &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Karlie&lt;\/span&gt;\n                &lt;\/span&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Kloss&lt;\/span&gt;\n                &lt;\/span&gt;\n            &lt;\/div&gt;\n            \n            &lt;div class=&quot;title-wrapper&quot;&gt;\n              &lt;h1&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Karlie&lt;\/span&gt;\n                &lt;\/span&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Kloss&lt;\/span&gt;\n                &lt;\/span&gt;\n              &lt;\/h1&gt;\n              &lt;span class=&quot;gallery&quot;&gt;View gallery&lt;\/span&gt;\n            &lt;\/div&gt;\n           \n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        \n       &lt;div class=&quot;slide blue&quot; data-order=&quot;2&quot; data-color=&quot;#EE4654&quot; data-img=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/aline-weber.png&quot;&gt;\n          &lt;div class=&quot;fake-bg blue&quot;&gt;&lt;\/div&gt;\n          &lt;canvas class=&quot;canvas&quot; data-image=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/mask-aline.jpg&quot;&gt;&lt;\/canvas&gt;\n          &lt;div class=&quot;slide-content &quot;&gt;\n            \n            &lt;div class=&quot;image-caption&quot;&gt;\n               &lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;\n                &lt;span&gt;Fall \/ Winter 2016&lt;\/span&gt;\n                \n              &lt;\/div&gt;\n            \n            &lt;div class=&quot;title-background&quot;&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Aline&lt;\/span&gt;\n                &lt;\/span&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Weber&lt;\/span&gt;\n                &lt;\/span&gt;\n            &lt;\/div&gt;\n            \n            &lt;div class=&quot;title-wrapper&quot;&gt;\n              &lt;h1&gt;\n                 &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Aline&lt;\/span&gt;\n                &lt;\/span&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Weber&lt;\/span&gt;\n                &lt;\/span&gt;\n              &lt;\/h1&gt;\n              &lt;span class=&quot;gallery&quot;&gt;View gallery&lt;\/span&gt;\n            &lt;\/div&gt;\n           \n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        \n       &lt;div class=&quot;slide green&quot; data-order=&quot;3&quot; data-color=&quot;#7ffe8e&quot; data-img=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/miranda-kerr-color.png&quot;&gt;\n          &lt;div class=&quot;fake-bg green&quot;&gt;&lt;\/div&gt;\n          &lt;canvas class=&quot;canvas&quot; data-image=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/mask-miranda.jpg&quot;&gt;&lt;\/canvas&gt;\n          &lt;div class=&quot;slide-content &quot;&gt;\n            \n            &lt;div class=&quot;image-caption&quot;&gt;\n               &lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;\n                &lt;span&gt;Spring \/ Summer 2015&lt;\/span&gt;\n                \n              &lt;\/div&gt;\n            \n            &lt;div class=&quot;title-background&quot;&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Miranda&lt;\/span&gt;\n                &lt;\/span&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Kerr&lt;\/span&gt;\n                &lt;\/span&gt;\n            &lt;\/div&gt;\n            \n            &lt;div class=&quot;title-wrapper&quot;&gt;\n              &lt;h1&gt;\n                 &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Miranda&lt;\/span&gt;\n                &lt;\/span&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Kerr&lt;\/span&gt;\n                &lt;\/span&gt;\n              &lt;\/h1&gt;\n              &lt;span class=&quot;gallery&quot;&gt;View gallery&lt;\/span&gt;\n            &lt;\/div&gt;\n           \n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        \n        &lt;div class=&quot;slide grey&quot; data-order=&quot;4&quot; data-color=&quot;#bcbcbc&quot; data-img=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/kate-moss-color.png&quot;&gt;\n          &lt;div class=&quot;fake-bg grey&quot;&gt;&lt;\/div&gt;\n          &lt;canvas class=&quot;canvas&quot; data-image=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/mask-kate.jpg&quot;&gt;&lt;\/canvas&gt;\n          &lt;div class=&quot;slide-content &quot;&gt;\n            \n            &lt;div class=&quot;image-caption&quot;&gt;\n               &lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;\n                &lt;span&gt;Fall \/ Winter 2015&lt;\/span&gt;\n                \n              &lt;\/div&gt;\n            \n            &lt;div class=&quot;title-background&quot;&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Kate&lt;\/span&gt;\n                &lt;\/span&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Moss&lt;\/span&gt;\n                &lt;\/span&gt;\n            &lt;\/div&gt;\n            \n            &lt;div class=&quot;title-wrapper&quot;&gt;\n              &lt;h1&gt;\n                 &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Kate&lt;\/span&gt;\n                &lt;\/span&gt;\n                &lt;span class=&quot;mask-wrap&quot;&gt;\n                  &lt;span class=&quot;mask&quot;&gt;Moss&lt;\/span&gt;\n                &lt;\/span&gt;\n              &lt;\/h1&gt;\n              &lt;span class=&quot;gallery&quot;&gt;View gallery&lt;\/span&gt;\n            &lt;\/div&gt;\n           \n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        \n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n      &lt;div class=&quot;footer-wrapper&quot;&gt;\n        &lt;ul&gt;\n          &lt;li class=&quot;active box&quot; data-id=&quot;1&quot;&gt;\n            &lt;div class=&quot;hover-box&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;box-content&quot;&gt;\n              &lt;span&gt;spring\/summer &lt;\/span&gt;&lt;span&gt;collection&lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/li&gt;\n          &lt;li class=&quot;box&quot; data-id=&quot;2&quot;&gt;\n             &lt;div class=&quot;hover-box&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;box-content&quot;&gt;\n              &lt;span&gt;fall\/winter 2016 &lt;\/span&gt;&lt;span&gt;collection&lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/li&gt;\n          &lt;li class=&quot;box&quot; data-id=&quot;3&quot; &gt; \n            &lt;div class=&quot;hover-box&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;box-content&quot;&gt;\n            &lt;span&gt;spring\/summer 2015&lt;\/span&gt;&lt;span&gt;collection&lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/li&gt;\n          &lt;li class=&quot;box&quot; data-id=&quot;4&quot;  &gt;\n            &lt;div class=&quot;hover-box&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;box-content&quot;&gt;\n            &lt;span&gt;fall\/winter 2015 &lt;\/span&gt;&lt;span&gt;collection&lt;\/span&gt;\n            &lt;\/div&gt;\n           &lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n  &lt;\/div&gt;\n   \n    &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.19.0\/TweenMax.min.js&quot;&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 'https:\/\/fonts.googleapis.com\/css?family=Montserrat';\n@font-face {\n  font-family: Narziss;\n  src: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/Narziss_Bold_Drops.woff2);\n}\n@font-face {\n  font-family: Narziss-medium;\n  src: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/Narziss_Bold_Drops.woff2);\n}\n*, *::after, *::before {\n  box-sizing: border-box;\n}\n\nbody, html {\n  background-color: cadetblue;\n  font-size: 6px;\n  padding: 4rem 2rem;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: &quot;Montserrat&quot;, sans-serif;\n}\n@media (min-width: 860px) {\n  body, html {\n    font-size: 8px;\n    padding: 3rem 5rem;\n  }\n}\n@media (min-width: 1200px) {\n  body, html {\n    font-size: 10px;\n    padding: 2rem 3rem;\n  }\n}\n\n.header-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding: 2rem 3rem 2rem;\n  z-index: 999;\n}\n.header-wrapper .header {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 6rem;\n}\n.header-wrapper .menu-wrapper {\n  position: relative;\n  float: left;\n  display: block;\n  cursor: pointer;\n  width: 2.5rem;\n  height: 3rem;\n  right: 0;\n  margin: 0;\n  text-align: left;\n}\n.header-wrapper .menu-wrapper:after {\n  content: &quot;&quot;;\n  display: table;\n  clear: both;\n}\n.header-wrapper .menu-hamburger {\n  position: relative;\n  width: 1.4rem;\n  display: inline-block;\n  vertical-align: middle;\n  background: white;\n  height: 1px;\n  cursor: pointer;\n  right: 0;\n  top: 1rem;\n}\n.header-wrapper .menu-hamburger::before {\n  content: &quot;&quot;;\n  width: 2.5rem;\n  height: 1px;\n  background: white;\n  position: absolute;\n  top: -0.8rem;\n  left: 0;\n}\n.header-wrapper .menu-hamburger::after {\n  content: &quot;&quot;;\n  width: 2rem;\n  height: 1px;\n  background: white;\n  position: absolute;\n  top: 0.8rem;\n  left: 0;\n}\n.header-wrapper .nav-wrapper {\n  position: relative;\n  float: right;\n}\n.header-wrapper nav {\n  display: block;\n  font-size: 1.2rem;\n  font-weight: bold;\n  line-height: 1;\n  font-weight: 700;\n  color: white;\n}\n.header-wrapper nav ul {\n  padding: 0;\n  display: block;\n  list-style: none;\n}\n.header-wrapper nav ul:after {\n  content: &quot;&quot;;\n  display: table;\n  clear: both;\n}\n.header-wrapper nav li {\n  float: left;\n  margin: 0 1.2rem;\n}\n.header-wrapper nav li:last-child {\n  margin-left: 0;\n}\n\n.lines-wrapper {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 999;\n  pointer-events: none;\n}\n.lines-wrapper span.vertical {\n  position: absolute;\n  height: 1px;\n  width: 100%;\n  background: white;\n  top: 12%;\n  left: 0;\n  z-index: 1;\n  opacity: 0.05;\n}\n.lines-wrapper .croses span {\n  color: white;\n  font-size: 1rem;\n  position: absolute;\n  top: 11%;\n  left: calc(20% - 2px);\n}\n.lines-wrapper .croses span:nth-child(2) {\n  left: calc(40% - 2px);\n}\n.lines-wrapper .croses span:nth-child(3) {\n  left: calc(60% - 2px);\n}\n.lines-wrapper .croses span:nth-child(4) {\n  left: calc(80% - 2px);\n}\n.lines-wrapper span.horizontal {\n  position: absolute;\n  width: 1px;\n  height: 100%;\n  background: white;\n  z-index: 1;\n  left: 20%;\n  opacity: 0.05;\n}\n.lines-wrapper span.horizontal:nth-child(2) {\n  left: 40%;\n}\n.lines-wrapper span.horizontal:nth-child(3) {\n  left: 60%;\n}\n.lines-wrapper span.horizontal:nth-child(4) {\n  left: 80%;\n}\n\n.slider-content {\n  position: relative;\n  max-width: 112rem;\n  min-width: 480px;\n  background: #fff;\n  margin: 0 auto;\n}\n.slider-content .slider-container {\n  position: relative;\n  height: 70rem;\n}\n.slider-content .slide-content {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.slider-content .slide {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-blend-mode: multiply;\n  background-size: auto 125%;\n  background-position: 0px -45px;\n  background-repeat: no-repeat;\n  opacity: 0;\n}\n.slider-content .slide:after {\n  content: &quot;&quot;;\n  display: table;\n  clear: both;\n}\n.slider-content .slide.active {\n  opacity: 1;\n  z-index: 50;\n}\n.slider-content .slide.next {\n  opacity: 1;\n}\n.slider-content .slide.red {\n  background-color: #EE4654;\n}\n.slider-content .slide.blue {\n  background-color: #6989E0;\n}\n.slider-content .slide.green {\n  background-color: #6cd779;\n}\n.slider-content .slide.grey {\n  background-color: #bcbcbc;\n}\n.slider-content .canvas {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.slider-content .fake-bg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-blend-mode: multiply;\n  background-size: auto 125%;\n  background-position: 0px -45px;\n  background-repeat: no-repeat;\n}\n.slider-content .fake-bg.red {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/karlie-kloss.png);\n  background-color: #EE4654;\n}\n.slider-content .fake-bg.blue {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/aline-weber_copy.png);\n  background-color: #6989E0;\n}\n.slider-content .fake-bg.green {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/miranda-kerr.png);\n  background-color: #6cd779;\n}\n.slider-content .fake-bg.grey {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/kate-moss.png);\n  background-color: #bcbcbc;\n}\n.slider-content .image-mask {\n  position: absolute;\n  width: 100%;\n  top: 0;\n  left: 0;\n  height: 125%;\n  overflow: hidden;\n}\n.slider-content .image-mask img {\n  position: absolute;\n  display: block;\n  width: auto;\n  height: 100%;\n  top: -45px;\n}\n.slider-content .mask-animation {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0rem;\n  left: -5rem;\n}\n.slider-content .mask-animation img.clip {\n  width: 100%;\n  -webkit-clip-path: url(#svgPathBig);\n          clip-path: url(#svgPathBig);\n}\n.slider-content .image-caption {\n  position: absolute;\n  color: white;\n  transform: rotate(-90deg);\n  top: 20rem;\n  left: 12rem;\n  font-size: 1.3rem;\n  z-index: 10;\n  clip: rect(0rem, 21rem, 12rem, 0px);\n  display: inline-block;\n  transition: all 0.3s ease;\n}\n.slider-content .image-caption.mask-up {\n  clip: rect(0rem, 0rem, 12rem, 0px);\n}\n.slider-content .image-caption.mask-down {\n  clip: rect(0rem, 21rem, 2rem, 200px);\n}\n.slider-content .image-caption span {\n  display: inline-block;\n  vertical-align: top;\n}\n.slider-content .image-caption .line {\n  position: relative;\n  background: white;\n  height: 1px;\n  width: 5rem;\n  top: 1rem;\n}\n.slider-content .title-background {\n  position: absolute;\n  font-size: 25rem;\n  font-family: Narziss;\n  top: 8rem;\n  left: 4rem;\n  color: black;\n  opacity: 0.03;\n  text-align: right;\n}\n.slider-content .title-background span.mask-wrap {\n  display: block;\n  height: 25rem;\n  position: relative;\n}\n.slider-content .title-background span.mask-wrap span.mask {\n  position: absolute;\n  top: 0;\n  left: 0;\n  clip: rect(0rem, 120rem, 25rem, 0px);\n  transition: all 0.3s ease-in;\n}\n.slider-content .title-background span.mask-wrap:last-child span.mask {\n  transition-delay: 0.15s;\n}\n.slider-content .title-background span.mask-wrap.mask-up span.mask {\n  clip: rect(0rem, 120rem, 0rem, 0px);\n}\n.slider-content .title-background span.mask-wrap.mask-down span.mask {\n  clip: rect(25rem, 44rem, 25rem, 0px);\n}\n.slider-content .title-wrapper {\n  position: relative;\n  color: white;\n  margin-left: auto;\n  margin-right: auto;\n  width: 50%;\n  text-align: right;\n  margin-top: 25rem;\n  z-index: 5;\n}\n.slider-content .title-wrapper h1 {\n  font-size: 12rem;\n  margin: 0;\n  line-height: 1;\n  margin-bottom: 1rem;\n  font-weight: 900;\n  text-align: right;\n  font-family: Narziss-medium;\n  margin-left: 5rem;\n}\n.slider-content .title-wrapper h1 span.mask-wrap {\n  display: block;\n  height: 12rem;\n  position: relative;\n}\n.slider-content .title-wrapper h1 span.mask-wrap span.mask {\n  position: absolute;\n  top: 0;\n  right: 0;\n  clip: rect(0rem, 48rem, 12rem, 0px);\n  transition: all 0.3s ease-in;\n}\n.slider-content .title-wrapper h1 span.mask-wrap:last-child span.mask {\n  transition-delay: 0.15s;\n}\n.slider-content .title-wrapper h1 span.mask-wrap.mask-up span.mask {\n  clip: rect(0rem, 44rem, 0rem, 0px);\n}\n.slider-content .title-wrapper h1 span.mask-wrap.mask-down span.mask {\n  clip: rect(12rem, 44rem, 12rem, 0px);\n}\n.slider-content .title-wrapper span.gallery {\n  position: relative;\n  text-align: right;\n  padding: 0 2rem;\n  cursor: pointer;\n  margin-right: 5rem;\n}\n.slider-content .title-wrapper span.gallery::before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: -2rem;\n  display: block;\n  width: 1px;\n  height: 2.5rem;\n  background: white;\n  top: -0.5rem;\n  opacity: 0.9;\n}\n.slider-content .title-wrapper span.gallery::after {\n  content: &quot;&quot;;\n  position: absolute;\n  right: -2rem;\n  display: block;\n  width: 1px;\n  height: 2.5rem;\n  background: white;\n  top: -0.5rem;\n  opacity: 0.9;\n}\n\n.control-nav {\n  position: absolute;\n  right: 3rem;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 999;\n}\n.control-nav ul {\n  position: relative;\n  list-style: none;\n  padding: 0;\n}\n.control-nav li {\n  position: relative;\n  margin: 0.2rem 0;\n  opacity: 0.5;\n  border-radius: 3rem;\n  color: white;\n  font-size: 1rem;\n}\n.control-nav li.active {\n  opacity: 1;\n}\n.control-nav li.active .line {\n  transform: translateX(-1.2rem);\n  width: 1.8rem;\n}\n.control-nav li.active .number {\n  opacity: 1;\n}\n.control-nav .line {\n  width: 1.5rem;\n  height: 1px;\n  display: block;\n  position: absolute;\n  top: 50%;\n  background: white;\n  left: -1rem;\n  transition: all 0.3s ease;\n}\n.control-nav .number {\n  position: relative;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.footer-wrapper {\n  position: absolute;\n  color: white;\n  bottom: 0rem;\n  right: 0rem;\n  width: 60%;\n  height: 6rem;\n  z-index: 999;\n}\n.footer-wrapper ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  text-align: center;\n  height: 100%;\n}\n.footer-wrapper ul:after {\n  content: &quot;&quot;;\n  display: table;\n  clear: both;\n}\n.footer-wrapper li {\n  position: relative;\n  float: left;\n  width: 25%;\n  padding: 1.5rem;\n  background: rgba(0, 0, 0, 0.1);\n  text-transform: uppercase;\n  height: 100%;\n  border-right: 1px solid rgba(0, 0, 0, 0.2);\n  cursor: pointer;\n}\n.footer-wrapper li:last-child {\n  border: none;\n}\n.footer-wrapper li.active .hover-box {\n  opacity: 1;\n  transform: scale(1.15);\n}\n.footer-wrapper li .hover-box {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: #473243;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  transition: all 0.3s ease-in;\n  z-index: 1;\n}\n.footer-wrapper li .box-content {\n  position: relative;\n  z-index: 5;\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;}\">\/*\nYou can check out original dribble shot here https:\/\/dribbble.com\/shots\/2375246-Fashion-Butique-slider-animation\n\nComments or suggestions are always appreciate it. \n*\/\n\n\n\nvar mySlider = {\n  \n  config: {\n    \n    slider : '.slider-content',\n    activeSlide : '.slide.active',\n    footerButtons: '.footer-wrapper .box',\n    bgPicture: '.image-mask img',\n    nav : '.control-nav',\n    position : {\n        x: 350,\n        alpha:1,\n    },\n   nextPosition :{\n        x: 150,\n        alpha:1,\n    },\n   \n  \n  },\n  \n   init : function(config) {\n     \n     this.canvasInit();\n     $(mySlider.config.footerButtons).\n            click(function() {\n                mySlider.changeButton($(this));\n            });\n    },\n   \n  canvasInit : function() {\n    \n    var canvas = $('.canvas')[0];\n    var ctx = canvas.getContext('2d');\n    var w = $(mySlider.config.activeSlide).width();\n    var h = $(mySlider.config.activeSlide).height();\n    var img = document.createElement('IMG'); \n    img.src = &quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/42764\/mask-karlie.jpg&quot;;\n    var position = {\n        x: 150,\n        alpha:1,\n    }\n    \n    if (window.matchMedia(&quot;(min-width: 860px)&quot;).matches) {\n        position = {\n            x: 200,\n            alpha:1,\n        }\n    }\n    \n    if (window.matchMedia(&quot;(min-width: 1200px)&quot;).matches) {\n        position = {\n            x: 250,\n            alpha:1,\n        }\n    }\n    \n    canvas.width = w;\n    canvas.height = h;\n    mySlider.drawMask(canvas, ctx, position, img);\n    \n  },\n  \n  drawMask : function(canvas, ctx, position,img) {\n    \n    var w = $(mySlider.config.activeSlide).width();\n    var h = $(mySlider.config.activeSlide).height();\n    var cy = 50;\n    var mStroke = 25; \n    var mWidth = 180;\n    var mHeight = 300;\n    \n    if (window.matchMedia(&quot;(min-width: 860px)&quot;).matches) {\n      mStroke = 35; \n      cy = 80;\n      mWidth = 260;\n      mHeight = 380;\n    }\n    \n    if (window.matchMedia(&quot;(min-width: 1200px)&quot;).matches) {\n      \n      mStroke = 40; \n      cy = 120;\n      mWidth = 360;\n      mHeight = 460;\n    }\n\n    ctx.globalAlpha=position.alpha;\n    ctx.clearRect(0,0,w,h);\n    ctx.save();\n    ctx.beginPath();\n    ctx.rect(position.x,cy,mWidth,mStroke);\n    ctx.clip();\n    ctx.drawImage(img,0,0, w, h);\n    ctx.restore();\n    \n    ctx.save();\n    ctx.rect(position.x, cy, mStroke, mHeight);\n    ctx.clip();\n    ctx.drawImage(img,0,0, w, h);\n    ctx.restore();\n    \n    ctx.save();\n    ctx.rect( position.x +mWidth, cy, mStroke, mHeight);\n    ctx.clip();\n     ctx.drawImage(img,0,0, w, h);\n    ctx.restore();\n    \n    ctx.save();\n    ctx.rect(position.x, cy + (mHeight-mStroke), mWidth, mStroke);\n    ctx.clip();\n    ctx.drawImage(img,0,0, w, h);\n    ctx.restore();\n    \n  },\n  \n  changeSlide : function(id) {\n   \n   var activeSlide = $(mySlider.config.activeSlide);\n   var newSlide = $(mySlider.config.slider).find('[data-order=&quot;'+id+'&quot;]');\n    \n    this.animateSlide(activeSlide, newSlide);\n    this.createMask(activeSlide, newSlide);\n    \n  },\n  \n  changeNav : function(id) {\n    \n    var activeNav = $(mySlider.config.nav).find('li');\n    \n    activeNav.removeClass('active');\n    activeNav.eq(id-1).addClass('active');\n    \n  },\n  \n  changeButton : function(el) {\n    \n    var activeButton = $(mySlider.config.slider).find('.box.active');\n    var target = el.data('id');\n    \n    if( !(el.hasClass('active')) ){\n     \n      activeButton.removeClass('active');\n      el.addClass('active');\n      this.changeSlide(target); \n      this.changeNav(target); \n    }\n},\n  \n  createMask : function(active, newSlide) {\n    \n    var currentCanvas = active.find('.canvas')[0];\n    var nextCanvas = newSlide.find('.canvas')[0];\n    var position = mySlider.config.position;\n    var positionNext =  mySlider.config.nextPosition;  \n    \n    var currentctx = currentCanvas.getContext('2d');\n    var nextctx = nextCanvas.getContext('2d');\n    \n    var w = $(mySlider.config.activeSlide).width();\n    var h = $(mySlider.config.activeSlide).height();\n    \n    var currentImg = document.createElement('IMG'); \n    var nextImg = document.createElement('IMG'); \n    var movex = 200;\n\n    var position = {\n        x: 350,\n        alpha:1,\n    }\n   var nextPosition={\n        x: 150,\n        alpha:1,\n    }\n      \n     TweenMax.set(positionNext, {x:&quot;150&quot;});\n    \n    if (window.matchMedia(&quot;(min-width: 860px)&quot;).matches) {\n      \n      position = {\n         x: 400,\n        alpha:1,\n      };\n      \n      nextPosition = {\n          x: 200,\n          alpha:1,\n      };\n      \n        movex = 200;\n      \n       TweenMax.set(positionNext, {x:&quot;200&quot;});\n    }\n    \n    if (window.matchMedia(&quot;(min-width: 1200px)&quot;).matches) {\n        position = {\n         x: 450,\n        alpha:1,\n      };\n      \n      nextPosition = {\n          x: 250,\n          alpha:1,\n      };\n      \n       movex = 200; \n       TweenMax.set(positionNext, {x:&quot;250&quot;});\n    }\n    \n    currentImg.src = active.find('canvas').data('image');\n    nextImg.src = newSlide.find('canvas').data('image');\n    \n    currentCanvas.width = nextCanvas.width = w;\n    currentCanvas.height = nextCanvas.height = h;\n     \n    TweenMax.to(newSlide.find('.canvas'),0.3,{autoAlpha:1, delay:1.5});\n    \n    TweenMax.to(positionNext, 0.5, {x:&quot;-=&quot;+movex+&quot;&quot;, onUpdate: function() {\n     \n       mySlider.drawMask(currentCanvas, currentctx, positionNext, currentImg);\n\n     },  onComplete: function() {\n       \n       TweenMax.to(active.find('.canvas'), 0.3, {autoAlpha:0}, &quot;-=0.2&quot;);\n       TweenMax.to(newSlide.find('.canvas'), 0.3, {autoAlpha:0}, &quot;-=0.2&quot;);\n     }});\n    \n    \n    nextImg.onload = function() {\n      mySlider.drawMask(nextCanvas, nextctx, positionNext, nextImg);\n      \n       TweenMax.to(position, 1, {x:&quot;-=&quot;+movex+&quot;&quot;, delay:1.3, onUpdate: function() {\n     \n           mySlider.drawMask(nextCanvas, nextctx, position, nextImg);\n\n         }});\n      \n      console.log(position)\n    }\n    \n  },\n  \n  animateSlide : function(active, newSlide) {\n      \n      var w = $(mySlider.config.slider).width();\n      var backgroundImg = $(mySlider.config.bgPicture);\n      var activeTitleBg = active.find('.title-background .mask-wrap');\n      var activeMainTitle = active.find('.title-wrapper h1 .mask-wrap');\n      var activeSlideContent = active.find('.slide-content'); \n      var activefakeBg = active.find('.fake-bg');\n      var activeImageCaption = active.find('.image-caption');\n\n      var newTitleBg = newSlide.find('.title-background .mask-wrap');\n      var newTitle = newSlide.find('.title-wrapper h1 .mask-wrap');\n      var newBgPicture = newSlide.data('img');\n      var newfakeBg = newSlide.find('.fake-bg');\n      var nextImageCaption = newSlide.find('.image-caption');\n      var img = $('&lt;img \/&gt;')\n      \n      newSlide.addClass('next');\n      \n      activeMainTitle.addClass('mask-up')\n      activeTitleBg.addClass('mask-down')\n      activeImageCaption.addClass('mask-up');\n      newTitle.addClass('mask-down');\n      newTitleBg.addClass('mask-up');\n      nextImageCaption.addClass('mask-down');\n      \n      \n      TweenMax.set(activeSlideContent, {width:w});\n      TweenMax.set(activefakeBg, {width:w});\n      TweenMax.set(newfakeBg, {autoAlpha:0});\n      \n      TweenMax.to(active, 0.8, {width:'0%', ease: Power4.easeIn});\n      TweenMax.to(activefakeBg, 0.3, {autoAlpha: 0, delay:0.4});\n      TweenMax.to(backgroundImg, 0.3, {autoAlpha: 0, delay:0.4});\n    \n      setTimeout(function() {\n        backgroundImg.remove();\n        img.attr('src', newBgPicture).css('opacity',0);\n        \n        $('.image-mask').append(img);\n        \n      },600)\n    \n      TweenMax.to(newfakeBg, 0.5, {autoAlpha: 1, delay:1});\n      TweenMax.to(img, 0.5, {autoAlpha: 1, delay:1});\n      \n      setTimeout(function() {\n        newTitle.removeClass('mask-down');\n        newTitleBg.removeClass('mask-up');\n        \n      },800);\n      \n    \n      \n      setTimeout(function() {\n         active.removeClass('active');\n         newSlide.addClass('active').removeClass('next');\n         TweenMax.set(active, {width:'100%'});\n         activeMainTitle.removeClass('mask-up');\n         activeTitleBg.removeClass('mask-down');\n        activeImageCaption.removeClass('mask-up');\n        nextImageCaption.removeClass('mask-down');\n\n      },1500)\n  }\n  \n}\n\nfunction debounce(func, wait, immediate) {\n\tvar timeout;\n\treturn function() {\n\t\tvar context = this, args = arguments;\n\t\tvar later = function() {\n\t\t\ttimeout = null;\n\t\t\tif (!immediate) func.apply(context, args);\n\t\t};\n\t\tvar callNow = immediate &amp;&amp; !timeout;\n\t\tclearTimeout(timeout);\n\t\ttimeout = setTimeout(later, wait);\n\t\tif (callNow) func.apply(context, args);\n\t};\n};\n\n\n\n\n$(document).ready(function() { \n\nmySlider.init(); \n\nvar fn = debounce(function() {\n\n\t mySlider.init()\n\n}, 250);\n\n$(window).on('resize', fn);\n\n});\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1304,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[17,39],"class_list":["post-1302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-jquery","tag-tweenmax"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1302","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=1302"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1302\/revisions"}],"predecessor-version":[{"id":1305,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1302\/revisions\/1305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1304"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}