{"id":3556,"date":"2022-08-22T12:42:45","date_gmt":"2022-08-22T12:42:45","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3556"},"modified":"2023-06-10T11:35:53","modified_gmt":"2023-06-10T11:35:53","slug":"js-tutorial-skewed-one-page-scroll","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-skewed-one-page-scroll\/","title":{"rendered":"JS Tutorial &#8211; Skewed One Page Scroll"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; JS Tutorial &#8211; Skewed One Page Scroll, Just scroll down.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"JS Tutorial - Skewed One Page Scroll\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/GRdVeWK?default-tab=result&amp;theme-id=dark\" height=\"800\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/GRdVeWK\"><br \/>\nJS Tutorial &#8211; Skewed One Page Scroll<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$(document).ready(function() {\r\n\r\n  var curPage = 1;\r\n  var numOfPages = $(\".skw-page\").length;\r\n  var animTime = 1000;\r\n  var scrolling = false;\r\n  var pgPrefix = \".skw-page-\";\r\n\r\n  function pagination() {\r\n    scrolling = true;\r\n\r\n    $(pgPrefix + curPage).removeClass(\"inactive\").addClass(\"active\");\r\n    $(pgPrefix + (curPage - 1)).addClass(\"inactive\");\r\n    $(pgPrefix + (curPage + 1)).removeClass(\"active\");\r\n\r\n    setTimeout(function() {\r\n      scrolling = false;\r\n    }, animTime);\r\n  };\r\n\r\n  function navigateUp() {\r\n    if (curPage === 1) return;\r\n    curPage--;\r\n    pagination();\r\n  };\r\n\r\n  function navigateDown() {\r\n    if (curPage === numOfPages) return;\r\n    curPage++;\r\n    pagination();\r\n  };\r\n\r\n  $(document).on(\"mousewheel DOMMouseScroll\", function(e) {\r\n    if (scrolling) return;\r\n    if (e.originalEvent.wheelDelta &gt; 0 || e.originalEvent.detail &lt; 0) {\r\n      navigateUp();\r\n    } else { \r\n      navigateDown();\r\n    }\r\n  });\r\n\r\n  $(document).on(\"keydown\", function(e) {\r\n    if (scrolling) return;\r\n    if (e.which === 38) {\r\n      navigateUp();\r\n    } else if (e.which === 40) {\r\n      navigateDown();\r\n    }\r\n  });\r\n\r\n});<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; JS Tutorial &#8211; Skewed One Page Scroll, Just scroll <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-skewed-one-page-scroll\/\" title=\"JS Tutorial &#8211; Skewed One Page Scroll\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,12],"tags":[363,264,263,364,365,103,227],"newstopic":[],"class_list":{"0":"post-3556","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-web-development","9":"tag-hover-slider","10":"tag-javascript-tutorial","11":"tag-js-tutorial","12":"tag-one-page-scroll","13":"tag-scroll","14":"tag-web-design","15":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3556"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3556\/revisions"}],"predecessor-version":[{"id":3560,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3556\/revisions\/3560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3557"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3556"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}