{"id":18354979,"url":"https://github.com/alexeipanov/jumpyscroll","last_synced_at":"2025-08-03T19:35:48.453Z","repository":{"id":132040208,"uuid":"83148514","full_name":"alexeipanov/jumpyScroll","owner":"alexeipanov","description":"Browser scroll animation plugin","archived":false,"fork":false,"pushed_at":"2024-08-12T11:17:53.000Z","size":1561,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T16:51:00.952Z","etag":null,"topics":["animation","css-animations","custom-scroll","scroll","scroll-events","scrolling"],"latest_commit_sha":null,"homepage":"http://jumpyscroll.redlime.pw/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexeipanov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-25T17:19:53.000Z","updated_at":"2024-08-12T11:17:56.000Z","dependencies_parsed_at":"2024-12-23T21:23:18.556Z","dependency_job_id":"bb8c1dce-a60b-4741-9669-83846a0840c6","html_url":"https://github.com/alexeipanov/jumpyScroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexeipanov%2FjumpyScroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexeipanov%2FjumpyScroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexeipanov%2FjumpyScroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexeipanov%2FjumpyScroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexeipanov","download_url":"https://codeload.github.com/alexeipanov/jumpyScroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248141149,"owners_count":21054402,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css-animations","custom-scroll","scroll","scroll-events","scrolling"],"created_at":"2024-11-05T22:05:35.253Z","updated_at":"2025-04-10T01:36:23.901Z","avatar_url":"https://github.com/alexeipanov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jumpyScroll javascript plugin\nquick document scroll with animation\n-----------------------------------\n\n## Features\n\n-   scroll with touch navigation, keyboard, mouse wheel, scrollbar, hash navigation, with buttons to next and previous sections, and dot buttons for any section;\n-   animated scroll effect - more 80 animation effects included (5 basic css animations, 75 advanced animations with [Animate.css](http://daneden.github.io/animate.css/), and custom animation example);\n-   CSS animation-driven (hardware accelerated);\n-   customizable animations;\n-   customizable UI - buttons, dots, messages;\n-   custom events;\n-   well documented;\n-   pure javascript - no jQuery required;\n\n##  Demo\n[Options](http://jumpyscroll.redlime.pw/demos/demo/)\n\n[Animations](http://jumpyscroll.redlime.pw/demos/animation/)\n\n[Events](http://jumpyscroll.redlime.pw/demos/events/)\n\n## Requirements\n-   (optional) [Animate.css](http://daneden.github.io/animate.css/)\n\n## Installation\n\n### Include CSS\n\n```\u003clink rel=\"stylesheet\" href=\"jumpyscroll.css\"\u003e```\n\n### Include JS\n\n```\u003cscript src=\"jumpyscroll.min.js\"\u003e\u003c/script\u003e```\n\n### Set HTML sections\n```    \n\u003cbody\u003e\n    ...\n    \u003csection\u003e\n        page one\n    \u003csection\u003e\n    \u003csection\u003e\n        page two\n    \u003c/section\u003e\n    \u003csection\u003e\n        page ..\n    \u003c/section\u003e\n    ...\n\u003c/body\u003e\n```\n\n### Call the plugin\n```    \n$(document).ready(function(){\n    window.jumpyscroll();\n});\n```\n\n## Options\n\n### pageElement\n\nHtml elements selector to be scroll\n\ndefault value: ```section```\n\n-----------------------------------\n\n### animation\n\nAnimation that should be applied to the *pageElement* after scroll.\nAvailable values: 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out'\nIf [animate.css](http://daneden.github.io/animate.css/) is used, additional animations from this library are avaliable\n\ndefault value: ```ease```\n\nExample:\n\n**JS**\n```    \n$(document).ready(function() {\n  window.jumpyScroll({\n    animation: 'jello'\n  });\n});\n```\nCustom animation example:\n\n**CSS**\n```     \n@-webkit-keyframes ufo {\n  from {\n    transform: scale3d(0, 0, 0) translate3d(500px, -500px, 0px);\n  }\n}\n\n@keyframes ufo {\n  from {\n    transform: scale3d(0, 0, 0) translate3d(500px, -500px, 0px);\n  }\n}\n\n.ufo {\n  -webkit-animation-name: ufo;\n  animation-name: ufo;\n  -webkit-animation-timing-function: cubic-bezier(1,.4,.3,1);\n  animation-timing-function: cubic-bezier(1,.4,.3,1);\n}\n```\n**JS**\n```    \n$(document).ready(function() {\n  window.jumpyScroll({\n    animation: 'ufo',\n  });\n});\n```\n---------------------------------\n\n### speed\n\nAnimation speed, milliseconds\n\ndefault value: ```500```\n\n---------------------------------\n\n### touch\n\nEnable touch swipes on touch-devices\n\ndefault value: ```true```\n\n---------------------------------\n\n### touchLimit\n\nLength in pixel the user needs to swipe for jump to the next (previous) *pageElement*\n\ndefault value: ```5```\n\n---------------------------------\n\n### keys\n\n\nEnable keyboard navigation (arrow up / down, Page Up / Page Down, space)\n\ndefault value: ```true```\n\n---------------------------------\n\n### nav\n\nDisplay buttons for next and previous action\n\ndefault value: ```true```\n\n---------------------------------\n\n### nextLabel\n\nText or HTML code for the next button\n\ndefault value: none\n\n-------------------------------------\n\n### prevLabel\n\nText or HTML code for the previous button\n\ndefault value: none\n\n-------------------------------------\n\n### dots\n\nDot markers for quick navigation to every *pageElement*\n\ndefault value: ```true```\n\n-------------------------------------\n\n### dotLabel\n\nText or HTML code for dot marker\n\ndefault value: none\n\n**CSS**\n```\n.jumpyscroll.nav .prev {\n    background-image: none;\n    display: flex;\n}\n\n.jumpyscroll.nav .next {\n    background-image: none;\n    display: flex;\n}\n\n.jumpyscroll.nav .next i, .jumpyscroll.nav .prev i {\n    margin: auto;\n}\n\n.jumpyscroll .dot {\n    cursor: pointer;\n    background-image: none;\n    opacity: 0.5;\n}\n\n.jumpyscroll .dot.active {\n   opacity: 1;\n}\n```\n\n**JS**\n```\n$(document).ready(function() {\n    window.jumpyScroll({\n        prevLabel: '\u003ci class=\"fa fa-chevron-up\"\u003e\u003c/i\u003e',\n        nextLabel: '\u003ci class=\"fa fa-chevron-down\"\u003e\u003c/i\u003e',\n        dotLabel: '\u003ci class=\"fa fa-circle\"\u003e\u003c/i\u003e',\n    });\n});\n```\n\n**CSS**\n```\n.jumpyscroll .dots {\n    counter-reset: dn;\n}\n\n.jumpyscroll .dot {\n    width: 2em;\n    height: 2em;\n    background-image: none;\n    background-color: white;\n}\n\n.jumpyscroll .dots div {\n    margin: auto;\n}\n\n.jumpyscroll .dot div:before {\n    content: counter(dn);\n    counter-increment: dn;\n    color: black;\n    font-weight: 900;\n}\n```\n**JS**\n```\n$(document).ready(function() {\n        window.jumpyScroll({\n        dotLabel: '\u003cdiv\u003e\u003c/div\u003e'\n    });\n});\n```\n-------------------------------------\n\n### info\n\nDisplay info panel with current *pageElement* number and custom messages\n\ndefault value: ```true```\n\n-------------------------------------\n\n### infoText\n\nInfo panel text pattern\n\ndefault value: ```Page ${pageNo} from ${pageCount}```\n\n-------------------------------------\n\n### onBeforeScroll\n\ncustom function to call before scroll\nparameters: index - zero-based *pageElement* index on which will be jumped\n\ndefault value: ```function(index) {}```\n\nexample:\n```\nfunction(index) {\n    var animations = [\n        'bounce',\n        'flash',\n        'pulse',\n        'shake',\n        'jello',\n        'bounceIn',\n        'fadeIn'\n    ];\n\n    var rand = Math.floor(Math.random() * animations.length);\n    jumpyScroll.settings.animation = animations[rand];\n}\n```\n-------------------------------------\n\n### onAfterScroll\n\ncustom function to call after scroll\nparameters: index - zero-based *pageElement* index on which will be jumped\n\ndefault value: ```function(index) {}```\n\nexample:\n```\nfunction(index) {\n    switch (index) {\n        case 2:\n        jumpyScroll.settings.infoText = 'This is \u003cstrong\u003ethird\u003c/strong\u003e page!';\n        break;\n        default:\n        jumpyScroll.settings.infoText = 'Page ${pageNo} from ${pageCount}';\n        break;\n    }\n}\n```\n-------------------------------------\n\n## Styles\n\nAs an example, plugin adds some elements to page (depend by options):\n```\n\u003cdiv class=\"jumpyscroll nav\"\u003e\n    \u003cdiv class=\"prev\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"next\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"dots\"\u003e\n        \u003cdiv class=\"dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"dot active\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"dot\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"jumpyscroll info\"\u003e\n    \u003cspan\u003ePage 2 from 3\u003c/span\u003e\n\u003c/div\u003e\n```\nWith these classes, you may configure it as needed. This classes declared in jumpyscroll.css\n\n### navWrapper class\n\nWrapper class for nav buttons and dots\n\ndefault value: ```.jumpyscroll .nav```\n\n-------------------------------------\n\n### prev class\n\nPrev button class\n\ndefault value: ```.prev```\n\n-------------------------------------\n\n### next class\n\nNext button class\n\ndefault value: ```.next```\n\n-------------------------------------\n\n### dots wrapper class\n\nWrapper class for dots navigation\n\ndefault value: ```.dots```\n\n-------------------------------------\n\n### dot class\n\nDot button class\n\ndefault value: ```.dot```\n\n-------------------------------------\n\n### active dot class\n\nActive dot button class\n\ndefault value: ```.active```\n\n-------------------------------------\n\ninfo wrapper class\n\nWrapper class for info panel\n\ndefault value: ```.jumpyscroll .info```\n\n-------------------------------------\n\n## Methods\n\n### jumpyScroll.next()\n\nJump to next *pageElement*\n\nparameters: none\n\nexample:\n```\n$('a.nextbutton').on('click', function(event) {\n    event.preventDefault();\n    window.jumpyScroll.next();\n});\n```\n-------------------------------------\n\n### jumpyScroll.prev()\n\nJump to previous *pageElement*\n\nparameters: none\n\nexample:\n```\n$('a.prevbutton').on('click', function(event) {\n    event.preventDefault();\n    window.jumpyScroll.prev();\n});\n```\n-------------------------------------\n\n### jumpyScroll.toIndex()\n\nJump to *pageElement* by its index (zero-based)\n\nparameters: index\n\nexample - jump to the third *pageElement*:\n```\n$('a.tosomesection').on('click', function(event) {\n    event.preventDefault();\n    window.jumpyScroll.toIndex(2);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexeipanov%2Fjumpyscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexeipanov%2Fjumpyscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexeipanov%2Fjumpyscroll/lists"}