{"id":314,"date":"2023-03-07T23:33:25","date_gmt":"2023-03-07T20:33:25","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=314"},"modified":"2023-03-28T23:45:08","modified_gmt":"2023-03-28T20:45:08","slug":"vertikalnyj-slajder","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/314\/","title":{"rendered":"Vertical slider"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"951\" style=\"aspect-ratio: 1827 \/ 951;\" width=\"1827\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-07_21-32-14.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;ws-pages&quot;&gt;\n  &lt;div class=&quot;ws-bgs&quot;&gt;\n    &lt;div class=&quot;ws-bg&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;ws-bg&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;ws-bg&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;ws-bg&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;ws-bg&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;ws-text&quot;&gt;\n    &lt;h2 class=&quot;ws-text__heading&quot;&gt;\n      &lt;span&gt;Page 1&lt;\/span&gt;\n      &lt;span&gt;Drag image parts or just scroll down&lt;\/span&gt;\n    &lt;\/h2&gt;\n    &lt;h2 class=&quot;ws-text__heading&quot;&gt;\n      &lt;span&gt;Page 2&lt;\/span&gt;\n    &lt;\/h2&gt;\n    &lt;h2 class=&quot;ws-text__heading&quot;&gt;\n      &lt;span&gt;Page 3&lt;\/span&gt;\n      &lt;span&gt;Still nothing&lt;\/span&gt;\n    &lt;\/h2&gt;\n    &lt;h2 class=&quot;ws-text__heading&quot;&gt;\n      &lt;span&gt;Page 4&lt;\/span&gt;\n    &lt;\/h2&gt;\n    &lt;h2 class=&quot;ws-text__heading&quot;&gt;\n      &lt;span&gt;Page 5&lt;\/span&gt;\n      &lt;span&gt;The end&lt;\/span&gt;\n    &lt;\/h2&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n\n\n&lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.18.2\/TweenLite.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.18.2\/plugins\/CSSPlugin.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.18.2\/easing\/EasePack.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;}\">*,\n*:before,\n*:after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  overflow: hidden;\n  background: #000;\n}\n\n.ws-pages {\n  overflow: hidden;\n  position: relative;\n  height: 100vh;\n}\n.ws-bgs {\n  position: relative;\n  height: 100%;\n}\n.ws-bg {\n  display: flex;\n  height: 100%;\n  background-size: cover;\n  background-position: center center;\n}\n.ws-pages.s--ready .ws-bg {\n  background: none;\n}\n.ws-bg__part {\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n  cursor: -webkit-grab;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.ws-bg__part-inner {\n  position: absolute;\n  top: 0;\n  width: 100vw;\n  height: 100%;\n  background-size: cover;\n  background-position: center center;\n}\n.ws-bg:nth-child(1) {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-4.jpg);\n}\n.ws-bg:nth-child(1) .ws-bg__part-inner {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-4.jpg);\n}\n.ws-bg:nth-child(2) {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-5.jpg);\n}\n.ws-bg:nth-child(2) .ws-bg__part-inner {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-5.jpg);\n}\n.ws-bg:nth-child(3) {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-6.jpg);\n}\n.ws-bg:nth-child(3) .ws-bg__part-inner {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-6.jpg);\n}\n.ws-bg:nth-child(4) {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-7.jpg);\n}\n.ws-bg:nth-child(4) .ws-bg__part-inner {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-7.jpg);\n}\n.ws-bg:nth-child(5) {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-8.jpg);\n}\n.ws-bg:nth-child(5) .ws-bg__part-inner {\n  background-image: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/onepgscr-8.jpg);\n}\n.ws-text {\n  overflow: hidden;\n  position: absolute;\n  left: 15%;\n  top: 50%;\n  width: 70%;\n  height: 50px;\n  margin-top: -25px;\n  pointer-events: none;\n}\n.ws-text__heading {\n  display: flex;\n  justify-content: space-between;\n  height: 100%;\n  font-size: 30px;\n  line-height: 50px;\n  color: #fff;\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;}\">window.requestAnimFrame = (function() {\n  return window.requestAnimationFrame ||\n    window.webkitRequestAnimationFrame ||\n    window.mozRequestAnimationFrame ||\n    function(callback){\n    window.setTimeout(callback, 1000 \/ 60);\n  };\n})();\n\nfunction rafThrottle(fn) {\n  var busy = false;\n  return function() {\n    if (busy) return;\n    busy = true;\n    fn.apply(this, arguments);\n    requestAnimFrame(function() {\n      busy = false;\n    });\n  };\n};\n\n$(document).ready(function() {\n\n  var $wsPages = $(&quot;.ws-pages&quot;);\n  var $headings = $(&quot;.ws-text__heading&quot;);\n  var bgParts = 24;\n  var staggerVal = 65;\n  var staggerStep = 4;\n  var textH = $(&quot;.ws-text&quot;).height();\n  var winW = $(window).width();\n  var winH = $(window).height();\n  var curPage = 1;\n  var numOfPages = $(&quot;.ws-bg&quot;).length;\n  var changeAT = 0.5;\n  var waveStartDelay = 0.2;\n  var waveStagger = 0.013;\n  var waveBlocked = false;\n  var index = 1;\n  var startY = 0;\n  var deltaY = 0;\n  var headingsY = 0;\n  var $parts;\n\n  function initBgs() {\n    var arr = [];\n    var partW = 100 \/ bgParts;\n\n    for (var i = 1; i &lt;= bgParts; i++) {\n      var $part = $('&lt;div class=&quot;ws-bg__part&quot;&gt;');\n      var $inner = $('&lt;div class=&quot;ws-bg__part-inner&quot;&gt;');\n      var innerLeft = 100 \/ bgParts * (1 - i);\n\n      $inner.css(&quot;left&quot;, innerLeft + &quot;vw&quot;);\n      $part.append($inner);\n      $part.addClass(&quot;ws-bg__part-&quot; + i).width(partW + &quot;%&quot;);\n      arr.push($part);\n    }\n\n    $(&quot;.ws-bg&quot;).append(arr);\n    $wsPages.addClass(&quot;s--ready&quot;);\n    $parts = $(&quot;.ws-bg__part&quot;);\n  };\n\n  initBgs();\n\n  function changePages() {\n    var y = (curPage - 1) * winH * -1;\n    var textY = textH * (curPage - 1) * -1;\n    var leftMax = index - 1;\n    var rightMin = index + 1;\n\n    TweenLite.to(&quot;.ws-bg__part-&quot; + index, changeAT, {y: y});\n\n    for (var i = leftMax; i &gt; 0; i--) {\n      var d = (index - i) * waveStagger;\n      TweenLite.to(&quot;.ws-bg__part-&quot; + i, changeAT - d, {y: y, delay: d});\n    }\n\n    for (var j = rightMin; j &lt;= bgParts; j++) {\n      var d = (j - index) * waveStagger;\n      TweenLite.to(&quot;.ws-bg__part-&quot; + j, changeAT - d, {y: y, delay: d});\n    }\n\n    TweenLite.to($headings, changeAT, {y: textY});\n  };\n\n  function waveChange() {\n    waveBlocked = true;\n    var y = (curPage - 1) * winH * -1;\n    var textY = textH * (curPage - 1) * -1;\n\n    for (var i = 1; i &lt;= bgParts; i++) {\n      var d = (i - 1) * waveStagger + waveStartDelay;\n      TweenLite.to(&quot;.ws-bg__part-&quot; + i, changeAT, {y: y, delay: d});\n    }\n\n    TweenLite.to($headings, changeAT, {y: textY, delay: d});\n\n    var delay = (changeAT + waveStagger * (bgParts - 1)) * 1000;\n    setTimeout(function() {\n      waveBlocked = false;\n    }, delay);\n  };\n\n  function navigateUp() {\n    if (curPage &gt; 1) curPage--;\n  };\n\n  function navigateDown() {\n    if (curPage &lt; numOfPages) curPage++;\n  };\n\n  function navigateWaveUp() {\n    if (curPage === 1) return;\n    curPage--;\n    waveChange();\n  };\n\n  function navigateWaveDown() {\n    if (curPage === numOfPages) return;\n    curPage++;\n    waveChange();\n  };\n\n  function movePart($part, y) {\n    var y = y - (curPage - 1) * winH;\n    var headY = headingsY - (curPage - 1) * textH;\n    TweenLite.to($part, changeAT, {y: y, ease: Back.easeOut.config(4)});\n    TweenLite.to($headings, changeAT, {y: headY});\n  };\n\n  function moveParts(y, index) {\n    var leftMax = index - 1;\n    var rightMin = index + 1;\n    var stagLeft = 0;\n    var stagRight = 0;\n    var stagStepL = 0;\n    var stagStepR = 0;\n    var sign = (y &gt; 0) ? -1 : 1;\n\n    movePart(&quot;.ws-bg__part-&quot; + index, y);\n\n    for (var i = leftMax; i &gt; 0; i--) {\n      var step = index - i;\n      var sVal = staggerVal - stagStepL;\n      stagStepL += (step &lt;= 15) ? staggerStep : 1;\n      if (sVal &lt; 0) sVal = 0;\n      stagLeft += sVal;\n      var nextY = y + stagLeft * sign;\n      if (Math.abs(y) &lt; Math.abs(stagLeft)) nextY = 0;\n      movePart(&quot;.ws-bg__part-&quot; + i, nextY);\n    }\n\n    for (var j = rightMin; j &lt;= bgParts; j++) {\n      var step = j - index;\n      var sVal = staggerVal - stagStepR;\n      stagStepR += (step &lt;= 15) ? staggerStep : 1;\n      if (sVal &lt; 0) sVal = 0;\n      stagRight += sVal;\n      var nextY = y + stagRight * sign;\n      if (Math.abs(y) &lt; Math.abs(stagRight)) nextY = 0;\n      movePart(&quot;.ws-bg__part-&quot; + j, nextY);\n    }\n  };\n\n  var mousemoveHandler = rafThrottle(function(e) {\n    var y = e.pageY;\n    var x = e.pageX;\n    index = Math.ceil(x \/ winW * bgParts);\n\n    deltaY = y - startY;\n    headingsY = textH * deltaY \/ winH;\n    moveParts(deltaY, index);\n  });\n\n  var touchmoveHandler = rafThrottle(function(e) {\n    e.preventDefault();\n    var y = e.originalEvent.touches[0].pageY;\n    var x = e.originalEvent.touches[0].pageX;\n    index = Math.ceil(x \/ winW * bgParts);\n\n    deltaY = y - startY;\n    headingsY = textH * deltaY \/ winH;\n    moveParts(deltaY, index);\n  });\n\n  var swipeEndHandler = function() {\n    $(document).off(&quot;mousemove&quot;, mousemoveHandler);\n    $(document).off(&quot;touchmove&quot;, touchmoveHandler);\n    $(document).off(&quot;mouseup touchend&quot;, swipeEndHandler);\n\n    if (!deltaY) return;\n\n    if (deltaY \/ winH &gt;= 0.5) navigateUp();\n    if (deltaY \/ winH &lt;= -0.5) navigateDown();\n    changePages();\n  };\n\n  $(document).on(&quot;mousedown touchstart&quot;, &quot;.ws-bg__part&quot;, function(e) {\n    startY = e.pageY || e.originalEvent.touches[0].pageY;\n    deltaY = 0;\n\n    $(document).on(&quot;mousemove&quot;, mousemoveHandler);\n    $(document).on(&quot;touchmove&quot;, touchmoveHandler);\n\n    $(document).on(&quot;mouseup touchend&quot;, swipeEndHandler);\n  });\n\n  $(document).on(&quot;mousewheel DOMMouseScroll&quot;, function(e) {\n    if (waveBlocked) return;\n    if (e.originalEvent.wheelDelta &gt; 0 || e.originalEvent.detail &lt; 0) {\n      navigateWaveUp();\n    } else { \n      navigateWaveDown();\n    }\n  });\n\n  $(document).on(&quot;keydown&quot;, function(e) {\n    if (waveBlocked) return;\n    if (e.which === 38) {\n      navigateWaveUp();\n    } else if (e.which === 40) {\n      navigateWaveDown();\n    }\n  });\n\n  $(window).on(&quot;resize&quot;, function() {\n    winW = $(window).width();\n    winH = $(window).height();\n    changePages();\n  });\n\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[27,17],"class_list":["post-314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-gsap","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/314","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=314"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/314\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/317"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}