{"id":186,"date":"2023-03-05T20:02:50","date_gmt":"2023-03-05T17:02:50","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=186"},"modified":"2023-07-25T20:51:07","modified_gmt":"2023-07-25T17:51:07","slug":"slajder-3","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/186\/","title":{"rendered":"Slider"},"content":{"rendered":"\n<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 with jquery\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/EFyd8bEZ4_8?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;main role=&quot;main&quot;&gt;\n\n  &lt;!-- Slider --&gt;\n  &lt;section class=&quot;velo-slides&quot; data-velo-slider=&quot;on&quot; data-velo-theme=&quot;light&quot;&gt;\n\n    &lt;!-- Slide --&gt;\n    &lt;section class=&quot;velo-slide&quot;&gt;\n      \n      &lt;!-- Pretitle Hint --&gt;\n      &lt;span class=&quot;velo-slider__hint&quot;&gt;&lt;span&gt;&lt;span&gt;Check Them Bldgs&lt;\/span&gt;&lt;\/span&gt;&lt;\/span&gt; \n      &lt;!-- Slide BG --&gt;\n      &lt;div class=&quot;velo-slide__bg&quot;&gt;      \n        &lt;!-- Img --&gt;\n        &lt;figure class=&quot;velo-slide__figure&quot; style=&quot;background-image: url(http:\/\/stephenscaff.com\/wp-content\/uploads\/2017\/05\/post-velo.jpeg)&quot;&gt;&lt;\/figure&gt;\n      &lt;\/div&gt;\n    \n      &lt;!-- Header --&gt;\n      &lt;header class=&quot;velo-slide__header&quot;&gt;\n        &lt;h3 class=&quot;velo-slide__title&quot;&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;The Name Is&lt;\/span&gt;&lt;\/span&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;Stephen Scaff&lt;\/span&gt;&lt;\/span&gt;&lt;\/h3&gt;\n        &lt;p class=&quot;velo-slide__text&quot;&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;I'm a Creative Developer currently building fine internet goods at the Seattle Branding + Interactive firm, Urban Influence.&lt;\/span&gt;&lt;\/span&gt;&lt;\/p&gt;\n        &lt;span class=&quot;velo-slide__btn&quot;&gt;&lt;a class=&quot;btn-draw btn--white&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;btn-draw__text&quot;&gt;&lt;span&gt;View Work&lt;\/span&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/span&gt;\n      &lt;\/header&gt;\n    &lt;\/section&gt;\n\n    &lt;!-- Slide --&gt;\n    &lt;section class=&quot;velo-slide&quot;&gt;\n      &lt;!-- Pretitle Hint --&gt;\n      &lt;span class=&quot;velo-slider__hint&quot;&gt;&lt;span&gt;&lt;span&gt;What's up Playas&lt;\/span&gt;&lt;\/span&gt;&lt;\/span&gt; \n      &lt;!-- Slide BG --&gt;\n      &lt;div class=&quot;velo-slide__bg&quot;&gt;\n        &lt;!-- Img --&gt;\n        &lt;figure class=&quot;velo-slide__figure&quot; style=&quot;background-image: url(http:\/\/stephenscaff.com\/wp-content\/uploads\/2017\/07\/post-nested.jpg)&quot;&gt;&lt;\/figure&gt;\n      &lt;\/div&gt;\n    \n      &lt;!-- Header --&gt;\n      &lt;header class=&quot;velo-slide__header&quot;&gt;\n        &lt;h3 class=&quot;velo-slide__title&quot;&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;Another Day&lt;\/span&gt;&lt;\/span&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;Another Slide&lt;\/span&gt;&lt;\/span&gt;&lt;\/h3&gt;\n        &lt;p class=&quot;velo-slide__text&quot;&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;This slider component thing uses Velocity for enhance animation performance. Nav slides via scroll, click or arrow keys.&lt;\/span&gt;&lt;\/span&gt;&lt;\/p&gt;\n        &lt;span class=&quot;velo-slide__btn&quot;&gt;&lt;a class=&quot;btn-draw btn--white&quot; href=&quot;#\/&quot;&gt;&lt;span class=&quot;btn-draw__text&quot;&gt;&lt;span&gt;View Project&lt;\/span&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/span&gt;\n      &lt;\/header&gt;\n    &lt;\/section&gt;\n    \n    &lt;!-- Slide - with Video --&gt;\n    &lt;section class=&quot;velo-slide&quot;&gt;\n      &lt;!-- Pretitle Hint --&gt;\n      &lt;span class=&quot;velo-slider__hint&quot;&gt;&lt;span&gt;&lt;span&gt;Urban Influence&lt;\/span&gt;&lt;\/span&gt;&lt;\/span&gt; \n      &lt;!-- Slide BG --&gt;\n      &lt;div class=&quot;velo-slide__bg&quot;&gt;\n        &lt;!-- Img --&gt;\n        &lt;figure class=&quot;velo-slide__figure&quot; style=&quot;background-image: url()&quot;&gt;&lt;\/figure&gt;\n        &lt;div class=&quot;velo-slide__vid-wrap&quot;&gt;\n          &lt;video autoplay=&quot;&quot; class=&quot;velo-slide__vid&quot; loop=&quot;&quot; poster=&quot;&quot;&gt;\n            &lt;source src=&quot;http:\/\/uiclients.com\/assets\/videos\/ui-chaun.mp4&quot; type=&quot;video\/mp4&quot;&gt; Wait, are you still using IE? Bruv. Go get Chrome, or kick rocks.&lt;\/video&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;!-- Header --&gt;\n      &lt;header class=&quot;velo-slide__header&quot;&gt;\n        &lt;h3 class=&quot;velo-slide__title&quot;&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;Pigeon Wisdom&lt;\/span&gt;&lt;\/span&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;Agency Site&lt;\/span&gt;&lt;\/span&gt;&lt;\/h3&gt;\n        &lt;p class=&quot;velo-slide__text&quot;&gt;&lt;span class=&quot;oh&quot;&gt;&lt;span&gt;Live from the Coop, SOTD rocking, folio and storytelling joint for the Pigeon Wizzy squad. Coo Coo.&lt;\/span&gt;&lt;\/span&gt;&lt;\/p&gt;\n        &lt;span class=&quot;velo-slide__btn&quot;&gt;&lt;a class=&quot;btn-draw btn--white&quot; href=&quot;http:\/\/urbaninfluence.com&quot;&gt;&lt;span class=&quot;btn-draw__text&quot;&gt;&lt;span&gt;View Project&lt;\/span&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/span&gt;\n      &lt;\/header&gt;\n    &lt;\/section&gt;\n    \n    &lt;!-- Slides Nav --&gt;\n    &lt;nav class=&quot;velo-slides-nav&quot;&gt;\n      &lt;ul class=&quot;velo-slides-nav__list&quot;&gt;\n        &lt;li&gt;\n          &lt;a class=&quot;js-velo-slides-prev velo-slides-nav__prev inactive&quot; href=&quot;#0&quot;&gt;&lt;i class=&quot;icon-up-arrow&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li&gt;\n          &lt;a class=&quot;js-velo-slides-next velo-slides-nav__next&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;icon-down-arrow&quot;&gt;&lt;\/i&gt;&lt;\/a&gt;\n        &lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/nav&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/velocity\/1.3.0\/velocity.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/velocity\/1.3.0\/velocity.ui.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\/\/\u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u0435\u043d \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\n\/\/\u0410\u0432\u0442\u043e\u0440: Stephen Scaff. @StephenScaff<\/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;}\">@charset &quot;UTF-8&quot;;\n.velo-slider__hint &gt; span, .btn-draw {\n  font-family: &quot;Montserrat&quot;, Helvetica, sans-serif;\n  font-size: 0.8em;\n  font-weight: 400;\n  text-transform: uppercase;\n  letter-spacing: 0.2em;\n}\n\n\/** \n * Default to Border Box\n *\/\n*,\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  width: 100%;\n  font-family: &quot;Montserrat&quot;, Georgia, serif;\n  font-weight: 400;\n  font-style: normal;\n  line-height: 1.6;\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n}\n\nbody {\n  font-family: &quot;Montserrat&quot;, Georgia, serif;\n  line-height: 1.6;\n}\n\nbody {\n  font-size: 100%;\n}\n@media (min-width: 32em) {\n  body {\n    font-size: 102%;\n  }\n}\n@media (min-width: 54em) {\n  body {\n    font-size: 103%;\n  }\n}\n@media (min-width: 65em) {\n  body {\n    font-size: 107%;\n  }\n}\n@media (min-width: 75em) {\n  body {\n    font-size: 110%;\n  }\n}\n@media (min-width: 91em) {\n  body {\n    font-size: 120%;\n  }\n}\n@media (min-width: 115em) {\n  body {\n    font-size: 130%;\n  }\n}\n@media (min-width: 130em) {\n  body {\n    font-size: 140%;\n  }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: &quot;Montserrat&quot;, Helvetica, sans-serif;\n  font-weight: 700;\n}\n\n\/**\n * Links\n *\/\na {\n  text-decoration: none;\n  background-color: transparent;\n  outline: 0;\n}\n\n.btn-draw {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  width: auto;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  border: 0;\n  text-decoration: none;\n  text-align: center;\n  cursor: pointer;\n  -webkit-appearance: none;\n  transition: all 0.4s ease-in-out;\n}\n\n.btn-draw {\n  color: #00ffc8;\n  margin-left: 2.3em;\n}\n.btn-draw:after {\n  content: &quot;&quot;;\n  top: 0;\n  right: 0;\n  height: 1px;\n  width: 100%;\n  background-color: #00ffc8;\n}\n.btn-draw:before {\n  content: &quot;&quot;;\n  position: absolute;\n  top: 50%;\n  left: -2.4em;\n  height: 1px;\n  width: 3em;\n  background-color: #00ffc8;\n  transition: all 0.25s ease;\n}\n.btn-draw .btn-draw__text {\n  position: relative;\n  display: block;\n  padding: 0.7555em 2.29em;\n  line-height: 1.5;\n  transition: transform 0.5s ease;\n}\n.btn-draw .btn-draw__text:before, .btn-draw .btn-draw__text:after {\n  content: &quot;&quot;;\n  position: absolute;\n  height: 1px;\n  width: 0;\n  background-color: #00ffc8;\n}\n.btn-draw .btn-draw__text:before {\n  top: 0;\n  left: 0;\n  transition: width 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);\n}\n.btn-draw .btn-draw__text:after {\n  bottom: 0;\n  right: 0;\n  transition: width 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);\n}\n.btn-draw .btn-draw__text &gt; span:before, .btn-draw .btn-draw__text &gt; span:after {\n  content: &quot;&quot;;\n  position: absolute;\n  height: 0;\n  width: 1px;\n  background-color: #00ffc8;\n  transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);\n}\n.btn-draw .btn-draw__text &gt; span:before {\n  left: 0;\n  bottom: 0;\n  transition: height 0.15s 0 cubic-bezier(0.77, 0, 0.175, 1);\n}\n.btn-draw .btn-draw__text &gt; span:after {\n  right: 0;\n  top: 0;\n  transition: height 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);\n}\n@media (hover) {\n  .btn-draw:hover, a:hover .btn-draw {\n    cursor: pointer;\n    color: #00ffc8;\n  }\n  .btn-draw:hover:before, a:hover .btn-draw:before {\n    width: 0;\n    transition: all 0.4s ease;\n  }\n  .btn-draw:hover .btn-draw__text, a:hover .btn-draw .btn-draw__text {\n    transform: translateX(-2.2em);\n    transition: transform 0.5s ease, width 1s ease;\n  }\n  .btn-draw:hover .btn-draw__text:before, a:hover .btn-draw .btn-draw__text:before {\n    width: 100%;\n    max-width: 100%;\n    transition: width 0.15s cubic-bezier(0.77, 0, 0.175, 1);\n  }\n  .btn-draw:hover .btn-draw__text:after, a:hover .btn-draw .btn-draw__text:after {\n    width: 100%;\n    transition: width 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);\n  }\n  .btn-draw:hover .btn-draw__text &gt; span:before, a:hover .btn-draw .btn-draw__text &gt; span:before {\n    left: 0;\n    height: 100%;\n    transition: height 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);\n  }\n  .btn-draw:hover .btn-draw__text &gt; span:after, a:hover .btn-draw .btn-draw__text &gt; span:after {\n    right: 0;\n    height: 100%;\n    transition: height 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);\n  }\n}\n\n.btn-draw.btn--white {\n  color: #fff;\n}\n.btn-draw.btn--white:before, .btn-draw.btn--white:after,\n.btn-draw.btn--white .btn-draw__text:before,\n.btn-draw.btn--white .btn-draw__text:after,\n.btn-draw.btn--white .btn-draw__text &gt; span:before,\n.btn-draw.btn--white .btn-draw__text &gt; span:after {\n  background-color: #fff;\n}\n.btn-draw.btn--white:hover, a:hover .btn-draw.btn--white {\n  color: #fff;\n}\n\n.velo-slides {\n  z-index: 8;\n  position: relative;\n  height: 100vh;\n  background-color: #111;\n}\n.velo-slides[data-velo-slider=on] {\n  overflow: hidden;\n}\n\n.velo-slide {\n  height: 100vh;\n  z-index: 4;\n}\n@media (min-width: 54em) and (max-width: 65em) {\n  .velo-slide {\n    font-size: 80%;\n  }\n}\n@media (min-width: 54em) and (min-height: 0) and (max-height: 45em) {\n  .velo-slide {\n    font-size: 70%;\n  }\n}\n[data-velo-slider=on] .velo-slide {\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n.velo-slide.is-active {\n  z-index: 8;\n}\n.velo-slide__bg {\n  z-index: 7;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  color: #111;\n  transform: translateZ(0);\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  background-color: #111;\n  overflow: hidden;\n}\n.velo-slide__bg:after {\n  z-index: 0;\n  content: &quot;&quot;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0.4;\n  background: #111;\n}\n.velo-slide__figure {\n  z-index: 0;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  transform: scale(1);\n  transition: transform 0.5s ease;\n}\n.is-hovering .velo-slide__figure {\n  transform: scale(1.1);\n  transition: transform 0.5s ease;\n}\n.velo-slide__vid-wrap {\n  z-index: 5;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  transform: scale(1);\n  transition: transform 0.5s ease;\n}\n.velo-slide__vid-wrap:after {\n  z-index: 0;\n  content: &quot;&quot;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0.4;\n  background: #111;\n}\n.is-hovering .velo-slide__vid-wrap {\n  transform: scale(1.1);\n  transition: transform 0.5s ease;\n}\n.velo-slide__vid {\n  z-index: -1;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 100%;\n  max-width: none;\n  height: auto;\n  min-height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n.velo-slide__header {\n  z-index: 9;\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  flex-direction: column;\n  overflow-y: hidden;\n  padding: 6%;\n}\n.velo-slide__pretitle {\n  color: #fff;\n  max-width: 22em;\n}\n@media (min-width: 54em) {\n  .velo-slide__pretitle {\n    margin-left: 7%;\n  }\n}\n.velo-slide__title {\n  margin-bottom: 0.1em;\n  line-height: 1.1;\n  color: #fff;\n  letter-spacing: -0.025em;\n  font-weight: 700;\n  font-size: 2em;\n}\n@media (min-width: 54em) {\n  .velo-slide__title {\n    font-size: 3.5em;\n  }\n}\n@media (min-width: 65em) {\n  .velo-slide__title {\n    font-size: 4.5em;\n  }\n}\n@media (min-width: 91em) {\n  .velo-slide__title {\n    font-size: 5em;\n  }\n}\n.velo-slide__text {\n  color: #fff;\n  max-width: 35em;\n  display: block;\n  margin: 1em 0 1.5em 1%;\n  line-height: 1.8;\n  font-weight: 300;\n  font-size: 0.9em;\n}\n@media (min-width: 54em) {\n  .velo-slide__text {\n    font-size: 1.1em;\n  }\n}\n.velo-slide__btn {\n  opacity: 0;\n}\n@media (min-width: 54em) {\n  .velo-slide__btn {\n    margin-left: 1vw;\n  }\n}\n.is-active .velo-slide__btn {\n  opacity: 1;\n}\n.velo-slide__btn &gt; a &gt; span {\n  opacity: 0;\n  overflow-y: hidden;\n  transform: translate3d(0, 100%, 0);\n}\n.is-active .velo-slide__btn &gt; a &gt; span {\n  opacity: 1;\n  z-index: 9999;\n  transform: translate3d(0, 0, 0);\n  transition: transform 0.4s ease, opacity 0.8s ease;\n}\n\n.velo-slides[data-velo-theme=light] {\n  background: #212121;\n  border: 1em solid #c5cac5;\n}\n.velo-slides[data-velo-theme=light] .velo-slide {\n  margin-top: -1em;\n}\n.velo-slides[data-velo-theme=light] .velo-slide__bg {\n  color: #c5cac5;\n}\n\n[data-velo-theme=dark] {\n  background: #111;\n}\n[data-velo-theme=dark] .velo-slides__bg {\n  background-color: #111;\n  filter: grayscale(100%);\n}\n\n.oh {\n  display: block;\n  overflow-y: hidden;\n  padding: 0.02em 0;\n}\n\n.oh span {\n  display: inline-block;\n  transform: translate3d(0, 140%, 0);\n  opacity: 0;\n  transition: transform 0.4s ease, opacity 0.8s ease;\n}\n\n.is-active .oh span {\n  transform: translate3d(0, 0%, 0);\n  opacity: 1;\n  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;\n}\n\n.is-active .oh:nth-of-type(2n) span {\n  transition-delay: 0.2s;\n}\n\n.velo-slider__hint {\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  left: 0.5em;\n  display: none;\n  height: 100vh;\n  width: 4em;\n  font-size: 0.9em;\n  color: #fff;\n}\n@media (min-width: 54em) {\n  .velo-slider__hint {\n    display: block;\n  }\n}\n.velo-slider__hint &gt; span {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  white-space: nowrap;\n  transform: translate(-50%, -50%) rotate(-90deg);\n  overflow: hidden;\n}\n.velo-slider__hint &gt; span &gt; span {\n  display: inline-block;\n  transform: translateY(-110%);\n}\n.is-active .velo-slider__hint &gt; span &gt; span {\n  opacity: 1;\n  top: 50%;\n  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: translateY(0%);\n  transition: 0.4 ease;\n}\n\n.velo-slides-nav {\n  \/* lateral navigation *\/\n  position: fixed;\n  z-index: 91;\n  right: 2em;\n  bottom: 3em;\n}\n@media (min-width: 54em) {\n  .velo-slides-nav {\n    top: 50%;\n    bottom: auto;\n    transform: translateY(-50%);\n  }\n}\n.velo-slides-nav__list {\n  list-style: none;\n}\n.velo-slides-nav li:first-child {\n  margin-bottom: 0.25em;\n}\n.velo-slides-nav a {\n  display: block;\n  color: rgba(255, 255, 255, 0.9);\n  transition: color 0.5s ease, text-shadow 0.5s ease;\n}\n.velo-slides-nav a:hover {\n  color: white;\n  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6);\n  transition: color 0.5s ease, text-shadow 0.5s ease;\n}\n.velo-slides-nav a.inactive {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.2s 0s, visibility 0s 0.2s;\n}\n.velo-slides-nav i {\n  font-size: 2.2em;\n}\n@media (min-width: 54em) {\n  .velo-slides-nav i {\n    font-size: 1.5em;\n  }\n}\n\n@font-face {\n  font-family: &quot;ssicons&quot;;\n  src: url(&quot;data:application\/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfgAAAC8AAAAYGNtYXAXVtKOAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZiOKaFQAAAF4AAADTGhlYWQNcwRaAAAExAAAADZoaGVhB6EDzQAABPwAAAAkaG10eCYAA2sAAAUgAAAAMGxvY2EETAN0AAAFUAAAABptYXhwAA4AIQAABWwAAAAgbmFtZbVmJhcAAAWMAAABhnBvc3QAAwAAAAAHFAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBwPA\/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qf\/\/f\/\/AAAAAAAg6QD\/\/f\/\/AAH\/4xcEAAMAAQAAAAAAAAAAAAAAAQAB\/\/8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAArgPFAp8AFgAAEzQ2NzYyFwkBNjIXFhQHAQYiJwEuATUABAMIFQgBugG7CBUHCAj+MwcVCP4zAwQCjQUJBAcH\/kUBuwcHCBUH\/jMICAHNAwoFAAAAAQDu\/8AC3wOFABYAAAUiJicmNDcJASY0NzYyFwEWFAcBDgEjAQAFCQQICAG7\/kUICAcWBwHNBwf+MwQJBUAEAwgVCAG6AbsIFQcICP4zBxUI\/jMDBAAAAAEAAACuA8UCnwAWAAA3FBYXFjI3CQEWMjc2NCcBJiIHAQ4BFQAEAwgVCAG6AbsIFQcICP4zBxUI\/jMDBMAFCQQICAG7\/kUICAcWBwHNBwf+MwQJBQAAAAABAO7\/wALfA4UAFgAABTI2NzY0JwkBNjQnJiIHAQYUFwEeATMCzQUJBAcH\/kUBuwcHCBUH\/jMICAHNAwoFQAQDCBUIAboBuwgVBwgI\/jMHFQj+MwMEAAAAAQCh\/\/MDMwOfAB4AAAkBBhQXFjI3AREUFjMyNjURARYyNz4BNTQmJwEmIgcB1P7NBwcIFQcBCA8KCw8BBwgVCAMEBAP+zAcVCAOf\/s0IFQcICAEH\/L4LDw8LA0L++QgIAwoFBQkEATMHBwAAAQCa\/+EDLAONAB4AAAUBNjQnJiIHARE0JiMiBhURASYiBw4BFRQWFwEWMjcB+QEzBwcIFQf++A8LCg\/++AcVCAQDAwQBMwgVCB8BMwgVBwgI\/vkDQgsPDwv8vgEHCAgDCgUFCQT+zQcHAAAAAQAhAFoDzQLsAB4AABMBNjIXFhQHASEyFhUUBiMhARYUBw4BIyImJwEmNDchATMIFQcICP75A0ILDw8L\/L4BBwgIAwoFBQkE\/s0HBwG5ATMHBwgVB\/74DwsKD\/74BxUIBAMDBAEzCBUIAAAAAQAzAFoD3wLsAB4AAAkBJiIHBhQXASEiBhUUFjMhAQYUFx4BMzI2NwE2NCcD3\/7NCBUHCAgBB\/y+Cw8PCwNC\/vkICAMKBQUJBAEzBwcBuQEzBwcIFQf++A8LCg\/++AcVCAQDAwQBMwgVCAAAAQAAAAEAAMChG+1fDzz1AAsEAAAAAADVOl\/\/AAAAANU6X\/8AAP\/AA98DnwAAAAgAAgAAAAAAAAABAAADwP\/AAAAEAAAAAAAD3wABAAAAAAAAAAAAAAAAAAAADAQAAAAAAAAAAAAAAAIAAAAEAAAABAAA7gQAAAAEAADuBAAAoQQAAJoEAAAhBAAAMwAAAAAACgAUAB4ASgB2AKIAzgEEAToBcAGmAAAAAQAAAAwAHwABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApHNzaWNvbnMAcwBzAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMHNzaWNvbnMAcwBzAGkAYwBvAG4Ac3NzaWNvbnMAcwBzAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcnNzaWNvbnMAcwBzAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=&quot;) format(&quot;truetype&quot;);\n  font-weight: normal;\n  font-style: normal;\n}\n[class^=icon-],\n[class*=&quot; icon-&quot;] {\n  \/* use !important to prevent issues with browser extensions that change fonts *\/\n  font-family: &quot;ssicons&quot; !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  \/* Better Font Rendering =========== *\/\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.icon-down-chev:before {\n  content: &quot;\ue900&quot;;\n}\n\n.icon-right-chev:before {\n  content: &quot;\ue901&quot;;\n}\n\n.icon-up-chev:before {\n  content: &quot;\ue902&quot;;\n}\n\n.icon-left-chev:before {\n  content: &quot;\ue903&quot;;\n}\n\n.icon-up-arrow:before {\n  content: &quot;\ue904&quot;;\n}\n\n.icon-down-arrow:before {\n  content: &quot;\ue905&quot;;\n}\n\n.icon-left-arrow:before {\n  content: &quot;\ue906&quot;;\n}\n\n.icon-right-arrow:before {\n  content: &quot;\ue907&quot;;\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;}\">\/**\n * Velocity Effects\n *\/\n\nvar scaleDownAmnt = 0.7;\nvar boxShadowAmnt = &quot;40px&quot;;\n\n\/\/scale down\n$.Velocity.RegisterEffect(&quot;scaleDown&quot;, {\n  defaultDuration: 1,\n  calls: [\n    [\n      {\n        opacity: &quot;0&quot;,\n        scale: &quot;0.7&quot;\n      },\n      1\n    ]\n  ]\n});\n\n\/\/gallery\n$.Velocity.RegisterEffect(&quot;scaleDown.moveUp&quot;, {\n  defaultDuration: 1,\n  calls: [\n    [\n      {\n        translateY: &quot;0%&quot;,\n        scale: scaleDownAmnt\n      },\n      0.2\n    ],\n    [\n      {\n        translateY: &quot;-100%&quot;\n      },\n      0.6\n    ],\n    [\n      {\n        translateY: &quot;-100%&quot;,\n        scale: &quot;1&quot;\n        \/\/ boxShadowBlur: '0'\n      },\n      0.2\n    ]\n  ]\n});\n$.Velocity.RegisterEffect(&quot;scaleDown.moveUp.scroll&quot;, {\n  defaultDuration: 1,\n  calls: [\n    [\n      {\n        translateY: &quot;-100%&quot;,\n        scale: scaleDownAmnt\n      },\n      0.6\n    ],\n    [\n      {\n        translateY: &quot;-100%&quot;,\n        scale: &quot;1&quot;\n        \/\/ boxShadowBlur: '0'\n      },\n      0.4\n    ]\n  ]\n});\n$.Velocity.RegisterEffect(&quot;scaleUp.moveUp&quot;, {\n  defaultDuration: 1,\n  calls: [\n    [\n      {\n        translateY: &quot;90%&quot;,\n        scale: scaleDownAmnt\n        \/\/ boxShadowBlur: boxShadowAmnt\n      },\n      0.2\n    ],\n    [\n      {\n        translateY: &quot;0%&quot;\n      },\n      0.6\n    ],\n    [\n      {\n        translateY: &quot;0%&quot;,\n        scale: &quot;1&quot;\n        \/\/ boxShadowBlur: '0'\n      },\n      0.2\n    ]\n  ]\n});\n$.Velocity.RegisterEffect(&quot;scaleUp.moveUp.scroll&quot;, {\n  defaultDuration: 1,\n  calls: [\n    [\n      {\n        translateY: &quot;0%&quot;,\n        scale: scaleDownAmnt\n        \/\/ boxShadowBlur: boxShadowAmnt\n      },\n      0.6\n    ],\n    [\n      {\n        translateY: &quot;0%&quot;,\n        scale: &quot;1&quot;\n        \/\/ boxShadowBlur: '0'\n      },\n      0.4\n    ]\n  ]\n});\n$.Velocity.RegisterEffect(&quot;scaleDown.moveDown&quot;, {\n  defaultDuration: 1,\n  calls: [\n    [\n      {\n        translateY: &quot;0%&quot;,\n        scale: scaleDownAmnt\n        \/\/ boxShadowBlur: boxShadowAmnt\n      },\n      0.2\n    ],\n    [\n      {\n        translateY: &quot;100%&quot;\n      },\n      0.6\n    ],\n    [\n      {\n        translateY: &quot;100%&quot;,\n        scale: &quot;1&quot;\n        \/\/ boxShadowBlur: '0'\n      },\n      0.2\n    ]\n  ]\n});\n$.Velocity.RegisterEffect(&quot;scaleDown.moveDown.scroll&quot;, {\n  defaultDuration: 1,\n  calls: [\n    [{}, 0.6],\n    [\n      {\n        translateY: &quot;100%&quot;,\n        scale: &quot;1&quot;\n        \/\/ boxShadowBlur: '0'\n      },\n      0.4\n    ]\n  ]\n});\n$.Velocity.RegisterEffect(&quot;scaleUp.moveDown&quot;, {\n  defaultDuration: 1,\n  calls: [\n    [\n      {\n        translateY: &quot;-90%&quot;,\n        scale: scaleDownAmnt\n        \/\/ boxShadowBlur: boxShadowAmnt\n      },\n      0.2\n    ],\n    [\n      {\n        translateY: &quot;0%&quot;\n      },\n      0.6\n    ],\n    [\n      {\n        translateY: &quot;0%&quot;,\n        scale: &quot;1&quot;\n        \/\/ boxShadowBlur: '0'\n      },\n      0.2\n    ]\n  ]\n});\n\n\/**\n * Velo Slider\n * A Custom Slider using Velocity and Velocity UI effects\n *\/\n\nvar VeloSlider = (function () {\n  \/**\n   * Global Settings\n   *\/\n  var settings = {\n    veloInit: $(&quot;.velo-slides&quot;).data(&quot;velo-slider&quot;),\n    veloSlide: $(&quot;.velo-slide&quot;),\n    veloSlideBg: &quot;.velo-slide__bg&quot;,\n    navPrev: $(&quot;.velo-slides-nav&quot;).find(&quot;a.js-velo-slides-prev&quot;),\n    navNext: $(&quot;.velo-slides-nav&quot;).find(&quot;a.js-velo-slides-next&quot;),\n    veloBtn: $(&quot;.velo-slide__btn&quot;),\n    delta: 0,\n    scrollThreshold: 7,\n    currentSlide: 1,\n    animating: false,\n    animationDuration: 2000\n  };\n\n  \/\/ Flags\n  var delta = 0,\n    animating = false;\n\n  return {\n    \/**\n     * Init\n     *\/\n    init: function () {\n      this.bind();\n    },\n\n    \/**\n     * Bind our click, scroll, key events\n     *\/\n    bind: function () {\n      \/\/  Add active to first slide to set it off\n      settings.veloSlide.first().addClass(&quot;is-active&quot;);\n\n      \/\/  Init with a data attribute,\n      \/\/  Binding the animation to scroll, arrows, keys\n      if (settings.veloInit == &quot;on&quot;) {\n        VeloSlider.initScrollJack();\n        $(window).on(&quot;DOMMouseScroll mousewheel&quot;, VeloSlider.scrollJacking);\n      }\n\n      \/\/ Arrow \/ Click Nav\n      settings.navPrev.on(&quot;click&quot;, VeloSlider.prevSlide);\n      settings.navNext.on(&quot;click&quot;, VeloSlider.nextSlide);\n\n      \/\/ Key Nav\n      $(document).on(&quot;keydown&quot;, function (e) {\n        var keyNext = e.which == 39 || e.which == 40,\n          keyPrev = e.which == 37 || e.which == 38;\n\n        if (keyNext &amp;&amp; !settings.navNext.hasClass(&quot;inactive&quot;)) {\n          e.preventDefault();\n          VeloSlider.nextSlide();\n        } else if (keyPrev &amp;&amp; !settings.navPrev.hasClass(&quot;inactive&quot;)) {\n          e.preventDefault();\n          VeloSlider.prevSlide();\n        }\n      });\n\n      \/\/set navigation arrows visibility\n      VeloSlider.checkNavigation();\n\n      \/\/ Call Button Hover animation\n      VeloSlider.hoverAnimation();\n    },\n\n    \/**\n     * Hover Animation\n     * Adds 'is-hovering' class to the current slide\n     * when hovering over the button.\n     *\/\n    hoverAnimation: function () {\n      settings.veloBtn.hover(function () {\n        $(this).closest(settings.veloSlide).toggleClass(&quot;is-hovering&quot;);\n      });\n    },\n\n    \/**\n     * Set Animation\n     * Defines the animation sequence, calling our registered velocity effects\n     * @see js\/components\/_velocity-effects.js\n     *\/\n    setAnimation: function (midStep, direction) {\n      \/\/ Vars for our velocity effects\n      var animationVisible = &quot;translateNone&quot;,\n        animationTop = &quot;translateUp&quot;,\n        animationBottom = &quot;translateDown&quot;,\n        easing = &quot;ease&quot;,\n        animDuration = settings.animationDuration;\n\n      \/\/ Middle Step\n      if (midStep) {\n        animationVisible = &quot;scaleUp.moveUp.scroll&quot;;\n        animationTop = &quot;scaleDown.moveUp.scroll&quot;;\n        animationBottom = &quot;scaleDown.moveDown.scroll&quot;;\n      } else {\n        animationVisible =\n          direction == &quot;next&quot; ? &quot;scaleUp.moveUp&quot; : &quot;scaleUp.moveDown&quot;;\n        animationTop = &quot;scaleDown.moveUp&quot;;\n        animationBottom = &quot;scaleDown.moveDown&quot;;\n      }\n\n      return [\n        animationVisible,\n        animationTop,\n        animationBottom,\n        animDuration,\n        easing\n      ];\n    },\n\n    \/**\n     * Init Scroll Jaclk\n     *\/\n    initScrollJack: function () {\n      var visibleSlide = settings.veloSlide.filter(&quot;.is-active&quot;),\n        topSection = visibleSlide.prevAll(settings.veloSlide),\n        bottomSection = visibleSlide.nextAll(settings.veloSlide),\n        animationParams = VeloSlider.setAnimation(false),\n        animationVisible = animationParams[0],\n        animationTop = animationParams[1],\n        animationBottom = animationParams[2];\n      console.log(animationParams);\n      console.log(animationParams[4]);\n\n      visibleSlide.children(&quot;div&quot;).velocity(animationVisible, 1, function () {\n        visibleSlide.css(&quot;opacity&quot;, 1);\n        topSection.css(&quot;opacity&quot;, 1);\n        bottomSection.css(&quot;opacity&quot;, 1);\n      });\n\n      topSection.children(&quot;div&quot;).velocity(animationTop, 0);\n      bottomSection.children(&quot;div&quot;).velocity(animationBottom, 0);\n    },\n\n    \/**\n     * Scroll Jack\n     * On Mouse Scroll\n     *\/\n    scrollJacking: function (e) {\n      if (e.originalEvent.detail &lt; 0 || e.originalEvent.wheelDelta &gt; 0) {\n        delta--;\n        Math.abs(delta) &gt;= settings.scrollThreshold &amp;&amp; VeloSlider.prevSlide();\n      } else {\n        delta++;\n        delta &gt;= settings.scrollThreshold &amp;&amp; VeloSlider.nextSlide();\n      }\n      return false;\n    },\n\n    \/**\n     * Previous Slide\n     *\/\n    prevSlide: function (e) {\n      \/\/go to previous section\n      typeof e !== &quot;undefined&quot; &amp;&amp; e.preventDefault();\n\n      var visibleSlide = settings.veloSlide.filter(&quot;.is-active&quot;),\n        animationParams = VeloSlider.setAnimation(midStep, &quot;prev&quot;),\n        midStep = false;\n\n      visibleSlide = midStep\n        ? visibleSlide.next(settings.veloSlide)\n        : visibleSlide;\n\n      console.log(midStep);\n\n      if (!animating &amp;&amp; !visibleSlide.is(&quot;:first-child&quot;)) {\n        animating = true;\n\n        visibleSlide\n          .removeClass(&quot;is-active&quot;)\n          .children(settings.veloSlideBg)\n          .velocity(animationParams[2], animationParams[3], animationParams[4])\n          .end()\n          .prev(settings.veloSlide)\n          .addClass(&quot;is-active&quot;)\n          .children(settings.veloSlideBg)\n          .velocity(\n            animationParams[0],\n            animationParams[3],\n            animationParams[4],\n            function () {\n              animating = false;\n            }\n          );\n        currentSlide = settings.currentSlide - 1;\n      }\n      VeloSlider.resetScroll();\n    },\n\n    \/**\n     * Next Slide\n     *\/\n    nextSlide: function (e) {\n      \/\/go to next section\n      typeof e !== &quot;undefined&quot; &amp;&amp; e.preventDefault();\n\n      var visibleSlide = settings.veloSlide.filter(&quot;.is-active&quot;),\n        animationParams = VeloSlider.setAnimation(midStep, &quot;next&quot;),\n        midStep = false;\n\n      if (!animating &amp;&amp; !visibleSlide.is(&quot;:last-of-type&quot;)) {\n        animating = true;\n\n        visibleSlide\n          .removeClass(&quot;is-active&quot;)\n          .children(settings.veloSlideBg)\n          .velocity(animationParams[1], animationParams[3])\n          .end()\n          .next(settings.veloSlide)\n          .addClass(&quot;is-active&quot;)\n          .children(settings.veloSlideBg)\n          .velocity(animationParams[0], animationParams[3], function () {\n            animating = false;\n          });\n        currentSlide = settings.currentSlide + 1;\n      }\n      VeloSlider.resetScroll();\n    },\n\n    \/**\n     * Reset SCroll\n     *\/\n    resetScroll: function () {\n      delta = 0;\n      VeloSlider.checkNavigation();\n    },\n\n    \/**\n     * Check Nav\n     * Adds \/ hides nav based on first\/last slide\n     * @todo - loop slides, without cloning if possible\n     *\/\n    checkNavigation: function () {\n      \/\/update navigation arrows visibility\n      settings.veloSlide.filter(&quot;.is-active&quot;).is(&quot;:first-of-type&quot;)\n        ? settings.navPrev.addClass(&quot;inactive&quot;)\n        : settings.navPrev.removeClass(&quot;inactive&quot;);\n      settings.veloSlide.filter(&quot;.is-active&quot;).is(&quot;:last-of-type&quot;)\n        ? settings.navNext.addClass(&quot;inactive&quot;)\n        : settings.navNext.removeClass(&quot;inactive&quot;);\n    }\n  };\n})();\n\n\/\/ INIT\nVeloSlider.init();\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":187,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[17],"class_list":["post-186","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\/186","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=186"}],"version-history":[{"count":2,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/186\/revisions"}],"predecessor-version":[{"id":1668,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/186\/revisions\/1668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/187"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}