{"id":572,"date":"2023-03-11T01:50:27","date_gmt":"2023-03-10T22:50:27","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=572"},"modified":"2023-03-28T23:46:27","modified_gmt":"2023-03-28T20:46:27","slug":"originalnyj-slajder","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/572\/","title":{"rendered":"The original slider"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"957\" style=\"aspect-ratio: 1808 \/ 957;\" width=\"1808\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-10_23-46-40.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;div class=&quot;container&quot;&gt;\n  &lt;div class=&quot;section sec-1&quot;&gt;\n    &lt;div class=&quot;word&quot;&gt;\n      &lt;div class=&quot;letter&quot;&gt;f&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;i&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;r&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;s&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;t&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;span class=&quot;close-btn&quot;&gt;+&lt;\/span&gt;\n    &lt;div class=&quot;inner&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;text&quot;&gt;\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;section sec-2&quot;&gt;\n    &lt;div class=&quot;word&quot;&gt;\n      &lt;div class=&quot;letter&quot;&gt;s&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;e&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;c&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;o&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;n&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;d&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;span class=&quot;close-btn&quot;&gt;+&lt;\/span&gt;\n    &lt;div class=&quot;inner&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;text&quot;&gt;\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;section sec-3&quot;&gt;\n    &lt;div class=&quot;word&quot;&gt;\n      &lt;div class=&quot;letter&quot;&gt;t&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;h&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;i&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;r&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;d&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;span class=&quot;close-btn&quot;&gt;+&lt;\/span&gt;\n    &lt;div class=&quot;inner&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;text&quot;&gt;\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque.\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;section sec-4&quot;&gt;\n    &lt;div class=&quot;word&quot;&gt;\n      &lt;div class=&quot;letter&quot;&gt;f&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;o&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;u&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;r&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;t&lt;\/div&gt;\n      &lt;div class=&quot;letter&quot;&gt;h&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;span class=&quot;close-btn&quot;&gt;+&lt;\/span&gt;\n    &lt;div class=&quot;inner&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;text&quot;&gt;\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\/\/\u0421\u043a\u0440\u0438\u043f\u0442 js \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c\n\/\/\u0410\u0432\u0442\u043e\u0440: Nikolay Talanov. @suez<\/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;}\">@font-face {\n  src: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/PFSquareSansPro-Medium.otf&quot;);\n  font-family: pfs-medium;\n}\n@font-face {\n  src: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/decade.ttf&quot;);\n  font-family: decade;\n}\n*, *:before, *:after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml, body {\n  height: 100%;\n  overflow: hidden;\n}\n\nbody {\n  position: relative;\n  z-index: 10;\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/sections-bg.jpg&quot;);\n  background-size: cover;\n  font-family: pfs-medium;\n}\nbody:after {\n  content: &quot;&quot;;\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.6);\n  z-index: -10;\n}\n\n.container {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 40rem;\n  height: 150%;\n  font-size: 0;\n  z-index: 15;\n  transform: translate3d(-50%, -50%, 0) rotate(-10deg);\n  transition: transform 1s, width 1s, height 1s;\n  will-change: transform, width, height;\n}\n.container.ready .section {\n  transform: translate3d(0, 0, 0);\n}\n.container.phase-2 .section {\n  transition-delay: 0s;\n}\n.container.phase-2 .section:after {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.container.phase-2 .section:hover:after {\n  background-color: transparent;\n}\n.container.phase-2 .section.sec-1:hover .letter {\n  color: #ec5362;\n}\n.container.phase-2 .section.sec-2:hover .letter {\n  color: #1B5469;\n}\n.container.phase-2 .section.sec-3:hover .letter {\n  color: #759e3b;\n}\n.container.phase-2 .section.sec-4:hover .letter {\n  color: #7C3486;\n}\n.container.phase-2 .word {\n  opacity: 1;\n}\n.container.active {\n  width: 100%;\n  height: 100%;\n  transform: translate3d(-50%, -50%, 0);\n}\n.container.active .section.active {\n  width: calc(100% - 30rem);\n  cursor: auto;\n}\n.container.active .section.active .word {\n  opacity: 0;\n}\n.container.active .section.active .inner {\n  z-index: -5;\n}\n.container.active .section.active:after {\n  z-index: -3;\n}\n.container.active .section.active:hover:after {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.container.active .section.active .close-btn {\n  opacity: 1;\n  z-index: 100;\n}\n.container.active .section.active .text {\n  opacity: 1;\n  z-index: 50;\n  transition-delay: 1s;\n}\n.container.active .section:not(.active) .word .letter {\n  transform: translate3d(0, 0, 0) rotate(0deg);\n}\n\n.section {\n  position: relative;\n  display: inline-block;\n  width: 10rem;\n  height: 100%;\n  background: #fff;\n  overflow: hidden;\n  z-index: 20;\n  transition: transform 1s, width 1s;\n  cursor: pointer;\n}\n.section:nth-child(even) {\n  transform: translate3d(0, 100%, 0);\n}\n.section:nth-child(odd) {\n  transform: translate3d(0, -100%, 0);\n}\n.section.sec-1 .inner {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/sections-1.jpg&quot;);\n}\n.section.sec-2 {\n  transition-delay: 0.5s;\n}\n.section.sec-2 .inner {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/sections-2.jpg&quot;);\n}\n.section.sec-3 {\n  transition-delay: 1s;\n}\n.section.sec-3 .inner {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/sections-3.jpg&quot;);\n}\n.section.sec-4 {\n  transition-delay: 1.5s;\n}\n.section.sec-4 .inner {\n  background-image: url(&quot;https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/sections-4.jpg&quot;);\n}\n.section:after {\n  content: &quot;&quot;;\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: background-color 0.5s;\n  will-change: background-color;\n}\n.section .close-btn {\n  position: absolute;\n  top: -0.5rem;\n  right: 1.1rem;\n  opacity: 0;\n  z-index: -100;\n  transition: z-index 0.5s, opacity 0.5s, color 0.5s, transform 0.5s;\n  will-change: opacity, color;\n  transform: rotate(45deg);\n  color: #fff;\n  font-size: 5rem;\n  cursor: pointer;\n}\n.section .close-btn:hover {\n  color: red;\n  transform: rotate(225deg);\n}\n.section .text {\n  height: 100%;\n  color: #fff;\n  padding: 3rem;\n  opacity: 0;\n  font-size: 3rem;\n  transition: opacity 0.5s, z-index 0.5s;\n  will-change: opacity;\n  z-index: -150;\n  overflow-y: auto;\n}\n\n.inner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n}\n\n.word {\n  position: absolute;\n  z-index: 50;\n  top: 50%;\n  left: 50%;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-50%);\n  transition: opacity 0.5s;\n  will-change: opacity;\n}\n.word .letter {\n  color: #fff;\n  font-size: 4rem;\n  text-transform: uppercase;\n  transform: rotate(10deg);\n  transition: color 0.5s, transform 0.5s;\n  will-change: transform, color;\n  font-family: decade;\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  var $cont = $(&quot;.container&quot;);\n\n  $cont.addClass(&quot;ready&quot;);\n\n  setTimeout(function () {\n    $cont.addClass(&quot;phase-2&quot;);\n\n    $(document).on(&quot;click&quot;, &quot;.section:not(.active)&quot;, function () {\n      $(&quot;.section.active&quot;).removeClass(&quot;active&quot;);\n      $cont.addClass(&quot;active&quot;);\n      $(this).addClass(&quot;active&quot;);\n    });\n\n    $(document).on(&quot;click&quot;, &quot;.close-btn&quot;, function () {\n      $cont.removeClass(&quot;active&quot;);\n      $(&quot;.section&quot;).removeClass(&quot;active&quot;);\n    });\n  }, 2500);\n});<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[17],"class_list":["post-572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/572","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=572"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/572\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/573"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}