{"id":1424,"date":"2023-05-12T11:50:13","date_gmt":"2023-05-12T08:50:13","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1424"},"modified":"2023-05-12T11:50:15","modified_gmt":"2023-05-12T08:50:15","slug":"slider-4","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1424\/","title":{"rendered":"Slider"},"content":{"rendered":"<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Slider HTML CSS Javascript\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/NJ74eaPgn0U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/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;link href=&#039;https:\/\/fonts.googleapis.com\/css?family=Roboto:400,500,700&#039; rel=&#039;stylesheet&#039; type=&#039;text\/css&#039;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.6.1\/css\/font-awesome.min.css&quot;&gt;\n \n  &lt;div class=&quot;con&quot;&gt;\n    &lt;div class=&quot;con__slide  con__slide--1&quot;&gt;\n      &lt;div class=&quot;con__slide-top con__slide--1-top active-slide-left-top&quot;&gt;\n        &lt;div class=&#039;con__slide-top-inner con__slide--1-top-inner&#039;&gt;\n          &lt;div class=&#039;con__slide-top-inner-text con__slide--1-top-inner-text active-slide1-top-text&#039;&gt;\n            &lt;h1 class=&#039;con__slide-h con__slide--1-top-h&#039;&gt;some nice slider&lt;br&gt; here wow&lt;\/h1&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!--     slide--1 top end --&gt;\n      &lt;div class=&quot;con__slide-bot  con__slide--1-bot active-slide-left-bot&quot;&gt;\n        &lt;div class=&#039;con__slide-bot-text con__slide--1-bot-text active-slide1-bot-text&#039;&gt;\n          &lt;h1 class=&#039;con__slide-h con__slide--1-bot-h&#039;&gt;some nice slider&lt;br&gt; here wow&lt;\/h1&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!--    slide--1 bot end --&gt;\n      &lt;div class=&quot;con__slide-content con__slide--1-content active-slide-left-content&quot;&gt;\n        &lt;svg class=&#039;con__slide--1-content-logo&#039; version=&quot;1&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; width=&quot;500&quot; height=&quot;500&quot; viewbox=&quot;0 0 600.000000 600.000000&quot;&gt;&lt;path d=&quot;M280.5 13.6c-19 1.9-25.9 2.9-38.5 5.4-73.3 14.6-139.2 59.2-181.4 122.8-24.5 36.8-40.2 79.8-45.8 125.2-1.6 13.5-1.6 51.5 0 65 5.6 45.4 21.3 88.4 45.8 125.2 47.1 70.9 121.3 116.5 206.4 127 5.8.7 20.4 1.3 32.5 1.3 12.1 0 26.7-.6 32.5-1.3 115.7-14.2 209.7-93.7 242.6-205.1 3.8-12.9 7.7-31.8 9.6-47.1 1.6-13.5 1.6-51.4 0-65-5.6-45.4-21.3-88.4-45.8-125.2-46.2-69.6-118.6-115-201.5-126.3-10.9-1.5-48.1-2.7-56.4-1.9zm39 47.4c63.6 5.9 120.7 35.1 161.2 82.4 33.4 39.1 52.5 84.4 57.3 136.1 4.2 45.6-6.5 95.6-29 135.7-29.5 52.4-75.8 91.3-131.5 110.5-72.2 24.8-149.5 14.4-213.1-28.8-30.3-20.6-55.7-48.5-74.4-81.7-22.5-40.1-33.2-90.1-29-135.7 6.2-67.1 37.6-125.6 90-167.5 46.5-37.4 109.5-56.4 168.5-51z&quot;\/&gt;&lt;path d=&quot;M295 123.3c-1.9.7-40.7 26.1-86.2 56.5-64.5 43-83.1 55.9-84.5 58.4-1.7 3.1-1.8 7.5-1.8 61.3 0 53.9.1 58.2 1.8 61.3 1.4 2.5 20.1 15.5 85.5 59.1 49.2 32.8 85.1 56 87 56.4 1.9.4 4.9.1 7-.6 2-.7 40.9-26.1 86.4-56.5 64.5-43 83.1-55.9 84.5-58.4 1.7-3.1 1.8-7.5 1.8-61.3 0-53.9-.1-58.2-1.8-61.3-1.4-2.5-20.1-15.5-85.8-59.2-46.1-30.8-84.5-56-85.2-56-.6 0-2.1-.2-3.2-.5s-3.6.1-5.5.8zm-11 78.9l-.1 35.3-32.8 21.8-32.9 21.9-26.6-17.8-26.6-17.7 58.7-39.3c32.4-21.6 59.1-39.3 59.6-39.3.4-.1.7 15.8.7 35.1zm91 4.1l59 39.4-26.6 17.7-26.6 17.8-32.9-21.9-32.8-21.8-.1-35.3c0-19.3.2-35.2.5-35.2s27.1 17.7 59.5 39.3zm-49.2 74.8c14.1 9.4 26 17.5 26.5 17.8 1 1-52.1 36.4-53.6 35.8-3.2-1.4-52.1-34.8-51.8-35.5.5-.9 51.3-35 52.4-35.1.4-.1 12.3 7.6 26.5 17zm-135.2 18.5s-8.5 5.8-18.8 12.8L153 325.1V274l18.9 12.7c10.4 7.1 18.8 12.8 18.7 12.9zm255.4-.1V325l-18.8-12.7-18.8-12.8 18.5-12.7c10.3-6.9 18.7-12.7 18.9-12.7.1-.1.2 11.4.2 25.4zm-194.8 40.2l32.7 21.8.1 35.2c0 19.4-.2 35.3-.5 35.3s-27.1-17.7-59.5-39.3l-59-39.4 26.2-17.6c14.5-9.6 26.5-17.6 26.8-17.6.3-.1 15.2 9.7 33.2 21.6zm156.3-4l26.5 17.6-59 39.4c-32.4 21.6-59.2 39.3-59.5 39.3-.3 0-.5-15.9-.5-35.3l.1-35.2 32.7-21.7c18-12 32.8-21.8 33-21.8.1 0 12.1 7.9 26.7 17.7z&quot;\/&gt;&lt;\/svg&gt;\n      &lt;\/div&gt;\n      &lt;!--     slide--1 content end --&gt;\n    &lt;\/div&gt;\n    &lt;!-- slide--1 end --&gt;\n  \n    &lt;!--   slide 2 --&gt;\n    &lt;div class=&quot;con__slide con__slide--right con__slide--2&quot;&gt;\n      &lt;div class=&quot;con__slide-top con__slide--right-top con__slide--2-top active-slide-right-top&quot;&gt;\n        &lt;div class=&#039;con__slide-top-inner con__slide--right-top-inner con__slide--2-top-inner&#039;&gt;\n          &lt;div class=&#039;con__slide-top-inner-text con__slide--right-top-inner-text con__slide--2-top-inner-text active-slide2-top-text&#039;&gt;\n            &lt;h1 class=&#039;con__slide-h con__slide--right-top-h con__slide--2-top-h&#039;&gt;another slide&lt;br&gt; such wow&lt;\/h1&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!--     slide--2 top end --&gt;\n      &lt;div class=&quot;con__slide-bot con__slide--right-bot con__slide--2-bot active-slide-right-bot&quot;&gt;\n        &lt;div class=&#039;con__slide-bot-text con__slide--right-bot-text con__slide--2-bot-text active-slide2-bot-text&#039;&gt;\n          &lt;h1 class=&#039;con__slide-h con__slide--right-bot-h con__slide--2-bot-h&#039;&gt;another slide&lt;br&gt; such wow&lt;\/h1&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!--     slide--2 bot end --&gt;\n      &lt;div class=&quot;con__slide-content con__slide--right-content con__slide--2-content active-slide-right-content&quot;&gt;\n        &lt;img class=&#039;con__slide--right-content-image con__slide--2-content-image&#039; src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/537051\/doge_snow.png&quot; alt=&quot;&quot; \/&gt;\n      &lt;\/div&gt;\n      &lt;!--     slide--2 content end --&gt;\n    &lt;\/div&gt;\n    &lt;!-- slide--2 end --&gt;\n    \n    &lt;div class=&quot;con__slide con__slide--3&quot;&gt;\n      &lt;div class=&quot;con__slide-top  con__slide--3-top active-slide-left-top&quot;&gt;\n        &lt;div class=&#039;con__slide-top-inner con__slide--3-top-inner&#039;&gt;\n          &lt;div class=&#039;con__slide-top-inner-text con__slide--3-top-inner-text active-slide3-top-text&#039;&gt;\n            &lt;h1 class=&#039;con__slide-h con__slide--3-top-h&#039;&gt;half collored&lt;br&gt; text so nice&lt;\/h1&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!--    slide--3 top end --&gt;\n      &lt;div class=&quot;con__slide-bot  con__slide--3-bot active-slide-left-bot&quot;&gt;\n        &lt;div class=&#039;con__slide-bot-text con__slide--3-bot-text active-slide3-bot-text&#039;&gt;\n          &lt;h1 class=&#039;con__slide-h  con__slide--3-bot-h&#039;&gt;half collored&lt;br&gt; text so nice&lt;\/h1&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!--    slide--3 bot end --&gt;\n      &lt;div class=&quot;con__slide-content con__slide--3-content active-slide-left-content&quot;&gt;\n        &lt;img class=&#039;con__slide--right-content-image con__slide--3-content-image&#039; src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/537051\/butterfly_(1).png&quot; alt=&quot;&quot; \/&gt;\n      &lt;\/div&gt;\n      &lt;!--     slide--3 content end --&gt;\n    &lt;\/div&gt;\n    &lt;!-- slide--3 end --&gt;\n    \n    &lt;div class=&quot;con__slide con__slide--right con__slide--4&quot;&gt;\n      &lt;div class=&quot;con__slide-top con__slide--right-top con__slide--4-top active-slide-right-top&quot;&gt;\n        &lt;div class=&#039;con__slide-top-inner con__slide--right-top-inner con__slide--4-top-inner&#039;&gt;\n          &lt;div class=&#039;con__slide-top-inner-text con__slide--right-top-inner-text con__slide--4-top-inner-text active-slide4-top-text&#039;&gt;\n            &lt;h1 class=&#039;con__slide-h con__slide--right-top-h con__slide--4-top-h&#039;&gt;&lt;a class=&#039;con__slide--4-top-h-link&#039; href=&quot;https:\/\/codepen.io\/mrspok407\/&quot; target=&quot;_blank&quot;&gt;checkout my&lt;br&gt; other pens&lt;\/a&gt;&lt;\/h1&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!--     slide--4 top end --&gt;\n      &lt;div class=&quot;con__slide-bot con__slide--right-bot con__slide--4-bot active-slide-right-bot&quot;&gt;\n        &lt;div class=&#039;con__slide-bot-text con__slide--right-bot-text con__slide--4-bot-text active-slide4-bot-text&#039;&gt;\n          &lt;h1 class=&#039;con__slide-h con__slide--right-bot-h con__slide--4-bot-h&#039;&gt;&lt;a class=&#039;con__slide--4-bot-h-link&#039; href=&quot;#&quot; target=&quot;_blank&quot;&gt;checkout my&lt;br&gt; other pens&lt;\/a&gt;&lt;\/h1&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!--     slide--4 bot end --&gt;\n      &lt;div class=&quot;con__slide-content con__slide--right-content con__slide--4-content active-slide-right-content&quot;&gt;\n        &lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;&lt;img class=&#039;con__slide--right-content-image con__slide--4-content-image&#039; src=&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/537051\/twi_(1).png&quot; alt=&quot;&quot; \/&gt;&lt;\/a&gt; \n      &lt;\/div&gt;\n      &lt;!--     slide--4 content end --&gt;\n    &lt;\/div&gt;\n    &lt;!-- slide--4 end --&gt;\n    \n    &lt;div class=&quot;con__nav&quot;&gt;\n      &lt;div data-target=&#039;up&#039; class=&#039;con__nav-scroll con__nav-scroll--goup&#039;&gt;&lt;\/div&gt;\n      &lt;div data-target=&#039;down&#039; class=&#039;con__nav-scroll con__nav-scroll--godown&#039;&gt;&lt;\/div&gt;\n      &lt;ul class=&#039;con__nav-list&#039;&gt;\n        &lt;li data-target=&quot;1&quot; class=&#039;con__nav-item con__nav-item--1 nav-active&#039;&gt;&lt;\/li&gt;\n        &lt;li data-target=&quot;2&quot; class=&#039;con__nav-item con__nav-item--2&#039;&gt;&lt;\/li&gt;\n        &lt;li data-target=&quot;3&quot; class=&#039;con__nav-item con__nav-item--3&#039;&gt;&lt;\/li&gt;\n        &lt;li data-target=&quot;4&quot; class=&#039;con__nav-item con__nav-item--4&#039;&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  &lt;!--   nav end --&gt;\n  &lt;\/div&gt;\n\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.2.2\/jquery.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;}\">html {\n\tbox-sizing: border-box;\n  }\n  \n  *,\n  *:before,\n  *:after {\n\tbox-sizing: inherit;\n\tmargin: 0;\n\tpadding: 0;\n  }\n  \n  body {\n\tfont-family: &quot;Roboto&quot;, sans-serif;\n  }\n  \n  .con {\n\tposition: relative;\n\theight: 100vh;\n\tbackground: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/537051\/image.jpg&quot;) center center no-repeat;\n\tbackground-size: cover;\n\toverflow: hidden;\n  }\n  .con__slide {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tleft: 0;\n  }\n  .con__slide-h {\n\tdisplay: inline-block;\n\ttext-align: center;\n\ttext-transform: uppercase;\n\tfont-size: 60px;\n  }\n  .con__slide-top, .con__slide-bot {\n\tposition: absolute;\n\tbackground: rgba(0, 0, 0, 0.4);\n  }\n  .con__slide-top {\n\ttop: -200px;\n\tleft: -836px;\n\theight: 1235px;\n\twidth: 550px;\n\ttransform: rotate(25deg);\n\ttransition: transform 650ms 1000ms;\n  }\n  .con__slide-top-inner {\n\tposition: fixed;\n\ttop: -59px;\n\tright: -175px;\n\twidth: 100%;\n\theight: 500px;\n\ttransform: rotate(20deg);\n\toverflow: hidden;\n  }\n  .con__slide-top-inner-text {\n\tposition: absolute;\n\tright: 21px;\n\ttop: 649px;\n\ttransform: rotate(-45deg);\n\ttransition: transform 1000ms;\n  }\n  .con__slide-bot {\n\ttop: -50px;\n\tleft: -884px;\n\twidth: 700px;\n\theight: 1700px;\n\ttransform: rotate(-45deg);\n\toverflow: hidden;\n\ttransition: transform 1000ms 1100ms;\n  }\n  .con__slide-bot-text {\n\tposition: absolute;\n\tright: -440px;\n\ttop: 430px;\n\ttransform: rotate(45deg);\n\ttransition: transform 1000ms;\n  }\n  .con__slide--1-top-h {\n\ttext-shadow: 0 0 1px #c43838;\n\tcolor: #c43838;\n  }\n  .con__slide--1-bot-h {\n\ttext-shadow: 0 0 1px #fff;\n\tcolor: #fff;\n  }\n  .con__slide--1-content {\n\tposition: absolute;\n\tright: 300px;\n\ttop: 50%;\n\ttransform: translateY(-55%);\n\topacity: 0;\n\ttransition: transform 1000ms, opacity 1000ms;\n  }\n  @media screen and (max-width: 1350px) {\n\t.con__slide--1-content {\n\t  right: 15%;\n\t}\n  }\n  @media screen and (max-width: 1160px) {\n\t.con__slide--1-content {\n\t  right: 5%;\n\t}\n  }\n  .con__slide--1-content-logo {\n\tfill: #e5e5e5;\n  }\n  @media screen and (max-height: 730px) {\n\t.con__slide--1-content-logo {\n\t  width: 300px;\n\t}\n  }\n  @media screen and (max-width: 1350px) {\n\t.con__slide--1-content-logo {\n\t  width: 300px;\n\t}\n  }\n  .con__slide--right-top {\n\tleft: initial;\n\tright: -195px;\n\tright: -780px;\n\ttransform: rotate(-25deg);\n\ttransition: transform 650ms 1000ms;\n  }\n  .con__slide--right-top-inner {\n\ttop: -31px;\n\tleft: -249px;\n\ttransform: rotate(-20deg);\n\toverflow: overflow;\n  }\n  .con__slide--right-top-inner-text {\n\tright: 10px;\n\ttop: 620px;\n\ttransform: rotate(45deg);\n\t-webkit-animation: initial;\n\t\t\tanimation: initial;\n\ttransition: transform 1000ms 0s;\n  }\n  .con__slide--right-top-h {\n\twidth: 450px;\n\ttext-shadow: 0 0 1px #2d48e2;\n\tcolor: #2d48e2;\n  }\n  .con__slide--right-bot {\n\tleft: initial;\n\tright: -84px;\n\tright: -884px;\n\ttransform: rotate(45deg);\n\t-webkit-animation: initial;\n\t\t\tanimation: initial;\n\toverflow: hidden;\n\ttransition: transform 1000ms 1100ms;\n  }\n  .con__slide--right-bot-text {\n\tleft: -560px;\n\ttop: 150px;\n\ttransform: rotate(-45deg);\n\t-webkit-animation: initial;\n\t\t\tanimation: initial;\n\ttransition: transform 1000ms 0s;\n  }\n  .con__slide--right-bot-h {\n\ttext-shadow: 0 0 1px #fff;\n\tcolor: #fff;\n  }\n  .con__slide--right-content {\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\ttransform: translate(-95%, -45%);\n\topacity: 0;\n\ttransition: transform 1400ms 0s, opacity 1400ms 0s, z-index 0s 2.2s;\n\tz-index: -9999;\n  }\n  @media screen and (max-height: 730px) {\n\t.con__slide--right-content-image {\n\t  width: 80%;\n\t}\n  }\n  @media screen and (max-width: 1366px) {\n\t.con__slide--right-content-image {\n\t  width: 80%;\n\t}\n  }\n  .con__slide--3-top-h {\n\ttext-shadow: 0 0 1px #e0bb28;\n\tcolor: #e0bb28;\n  }\n  .con__slide--3-bot-h {\n\ttext-shadow: 0 0 1px #fff;\n\tcolor: #fff;\n  }\n  .con__slide--3-content {\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\ttransform: translateY(-45%);\n\topacity: 0;\n\ttransition: transform 1400ms 0s, opacity 1400ms 0s, z-index 0s 2.2s;\n  }\n  @media screen and (max-width: 1366px) {\n\t.con__slide--3-content {\n\t  left: 60%;\n\t}\n  }\n  .con__slide--3-content-image {\n\twidth: 500px;\n  }\n  @media screen and (max-height: 730px) {\n\t.con__slide--3-content-image {\n\t  width: 400px;\n\t}\n  }\n  @media screen and (max-width: 1366px) {\n\t.con__slide--3-content-image {\n\t  width: 400px;\n\t}\n  }\n  .con__slide--4-top-h-link {\n\tposition: relative;\n\ttext-decoration: none;\n\ttext-shadow: 0 0 1px #3ee84f;\n\tcolor: #3ee84f;\n  }\n  .con__slide--4-bot-h-link {\n\ttext-decoration: none;\n\ttext-shadow: 0 0 1px #fff;\n\tcolor: #fff;\n\tz-index: 20;\n  }\n  .con__nav {\n\tposition: fixed;\n\tbottom: 3%;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n  }\n  .con__nav-list {\n\tlist-style-type: none;\n  }\n  .con__nav-item {\n\tdisplay: inline-block;\n\tposition: relative;\n\tmargin-left: 8px;\n\twidth: 20px;\n\theight: 20px;\n\tborder-radius: 50%;\n\tborder: 2px solid #e5e5e5;\n\tcursor: pointer;\n  }\n  .con__nav-item:after {\n\tcontent: &quot; &quot;;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%) scale(0, 0);\n\twidth: 75%;\n\theight: 75%;\n\tborder-radius: 50%;\n\tbackground: #e5e5e5;\n\ttransition: 300ms;\n\topacity: 0;\n\toverflow: hidden;\n  }\n  .con__nav-item:hover:after {\n\ttransform: translate(-50%, -50%) scale(1, 1);\n\topacity: 1;\n  }\n  .con__nav-item--1 {\n\tmargin-left: 0;\n  }\n  .con__nav-scroll {\n\tposition: absolute;\n\ttop: 1px;\n\ttransform: rotate(-45deg);\n\twidth: 17px;\n\theight: 17px;\n\tborder: 2px solid #e5e5e5;\n\tborder-right: transparent;\n\tborder-bottom: transparent;\n\tcursor: pointer;\n\ttransition: 300ms;\n  }\n  .con__nav-scroll:hover {\n\ttransform: rotate(-45deg) scale(1.2, 1.2);\n  }\n  .con__nav-scroll--goup {\n\tleft: -20px;\n  }\n  .con__nav-scroll--godown {\n\ttransform: rotate(-225deg);\n\tright: -20px;\n  }\n  .con__nav-scroll--godown:hover {\n\ttransform: rotate(-225deg) scale(1.2, 1.2);\n  }\n  \n  .nav-active:after {\n\ttransform: translate(-50%, -50%) scale(1, 1);\n\topacity: 1;\n  }\n  \n  .active .active-slide-left-top {\n\ttransform: translate(640px, 0) rotate(25deg);\n\ttransition: transform 650ms cubic-bezier(0, 0, 0.21, 1.02);\n  }\n  .active .active-slide-left-bot {\n\ttransform: translateX(800px) rotate(-45deg);\n\ttransition: transform 1000ms 350ms;\n  }\n  .active .active-slide-left-content {\n\ttransform: translateY(-50%);\n\topacity: 1;\n\ttransition: transform 1000ms 1350ms, opacity 1000ms 1350ms;\n  }\n  .active .active-slide-right-top {\n\ttransform: translateX(-585px) rotate(-25deg);\n\ttransition: transform 650ms;\n  }\n  .active .active-slide-right-bot {\n\ttransform: translateX(-800px) rotate(45deg);\n\ttransition-delay: 350ms;\n  }\n  .active .active-slide-right-content {\n\ttransform: translate(-95%, -50%);\n\topacity: 1;\n\tz-index: 10;\n\ttransition: transform 1400ms 1350ms, opacity 1400ms 1350ms, z-index 0s 1s;\n  }\n  .active .active-slide1-top-text {\n\ttransform: translate(75px, -282px) rotate(-45deg);\n\ttransition: transform 1000ms 1350ms;\n  }\n  .active .active-slide1-bot-text {\n\ttransform: translate(-117px, 31px) rotate(45deg);\n\ttransition: transform 1000ms 1350ms;\n  }\n  .active .active-slide2-top-text {\n\ttransform: translate(-43px, -219px) rotate(45deg);\n\ttransition-delay: 1350ms;\n  }\n  .active .active-slide2-bot-text {\n\ttransform: translate(127px, -116px) rotate(-45deg);\n\ttransition-delay: 1350ms;\n  }\n  .active .active-slide3-top-text {\n\ttransform: translate(54px, -241px) rotate(-45deg);\n\ttransition: transform 1000ms 1350ms;\n  }\n  .active .active-slide3-bot-text {\n\ttransform: translate(-190px, 43px) rotate(45deg);\n\ttransition: transform 1000ms 1350ms;\n  }\n  .active .active-slide4-top-text {\n\ttransform: translate(-55px, -231px) rotate(45deg);\n\ttransition: transform 1000ms 1350ms;\n  }\n  .active .active-slide4-bot-text {\n\ttransform: translate(127px, -116px) rotate(-45deg);\n\ttransition: transform 1000ms 1350ms;\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;}\">$(document).ready(function () {\n\n    var $slides = $('.con__slide').length,\n    topAnimSpd = 650,\n    textAnimSpd = 1000,\n    nextSlideSpd = topAnimSpd + textAnimSpd,\n    animating = true,\n    animTime = 4000,\n    curSlide = 1,\n    nextSlide,scrolledUp;\n  \n    setTimeout(function () {\n      animating = false;\n    }, 2300);\n  \n    function navigateUp() {\n      if (curSlide &gt; 1) {\n        scrolledUp = true;\n        pagination(curSlide);\n        curSlide--;\n      }\n    }\n  \n    function navigateDown() {\n      if (curSlide &lt; $slides) {\n        scrolledUp = false;\n        pagination(curSlide);\n        curSlide++;\n        console.log(curSlide);\n      }\n    }\n  \n    $(window).on('load', function () {\n      $('.con__slide--1').addClass('active');\n    });\n  \n    function pagination(slide, target) {\n      animating = true;\n      \/\/ Check if pagination was triggered by scroll\/keys\/arrows or direct click. If scroll\/keys\/arrows then check if scrolling was up or down.\n      if (target === undefined) {\n        nextSlide = scrolledUp ? slide - 1 : slide + 1;\n      } else {\n        nextSlide = target;\n      }\n      \/\/\/\/\/\/\/\/\/\/ Slides \/\/\/\/\/\/\/\/\/\/\n      $('.con__slide--' + slide).removeClass('active');\n  \n      setTimeout(function () {\n        $('.con__slide--' + nextSlide).addClass('active');\n      }, nextSlideSpd);\n  \n      \/\/\/\/\/\/\/\/\/\/ Nav \/\/\/\/\/\/\/\/\/\/\n      $('.con__nav-item--' + slide).removeClass('nav-active');\n      $('.con__nav-item--' + nextSlide).addClass('nav-active');\n  \n      setTimeout(function () {\n        animating = false;\n      }, animTime);\n    }\n  \n    \/\/ Mouse wheel trigger\n    $(document).on('mousewheel DOMMouseScroll', function (e) {\n      var delta = e.originalEvent.wheelDelta;\n      if (animating) return;\n      \/\/ Mouse Up\n      if (delta &gt; 0 || e.originalEvent.detail &lt; 0) {\n        navigateUp();\n      } else {\n        navigateDown();\n      }\n    });\n  \n    \/\/ Direct trigger\n    $(document).on(&quot;click&quot;, &quot;.con__nav-item:not(.nav-active)&quot;, function () {\n      \/\/ Essential to convert target to a number with +, so curSlide would be a number\n      var target = +$(this).attr('data-target');\n      if (animating) return;\n      pagination(curSlide, target);\n      curSlide = target;\n    });\n  \n    \/\/ Arrow trigger\n    $(document).on('click', '.con__nav-scroll', function () {\n      var target = $(this).attr('data-target');\n      if (animating) return;\n      if (target === 'up') {\n        navigateUp();\n      } else {\n        navigateDown();\n      }\n    });\n  \n    \/\/ Key trigger\n    $(document).on(&quot;keydown&quot;, function (e) {\n      if (animating) return;\n      if (e.which === 38) {\n        navigateUp();\n      } else if (e.which === 40) {\n        navigateDown();\n      }\n    });\n  \n    var topLink = $(&quot;.con__slide--4-top-h-link&quot;),\n    botLink = $(&quot;.con__slide--4-bot-h-link&quot;);\n    $(&quot;.con__slide--4-top-h-link, .con__slide--4-bot-h-link&quot;).on({\n      mouseenter: function () {\n        topLink.css('text-decoration', 'underline');\n        botLink.css('text-decoration', 'underline');\n      },\n      mouseleave: function () {\n        topLink.css('text-decoration', 'none');\n        botLink.css('text-decoration', 'none');\n      } });\n  \n  });<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1425,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-1424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1424","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=1424"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1424\/revisions"}],"predecessor-version":[{"id":1426,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1424\/revisions\/1426"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1425"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}