{"id":16223629,"url":"https://github.com/nichenqin/wall.js","last_synced_at":"2025-07-28T10:41:24.180Z","repository":{"id":57397052,"uuid":"94994484","full_name":"nichenqin/wall.js","owner":"nichenqin","description":"Fullpage Piling, vanilla javascript, no dependency","archived":false,"fork":false,"pushed_at":"2017-07-25T03:51:43.000Z","size":271,"stargazers_count":27,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-14T20:20:02.591Z","etag":null,"topics":["fullpage","fullscreen","scrolling"],"latest_commit_sha":null,"homepage":"http://nichenqin.com/wall.js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nichenqin.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}},"created_at":"2017-06-21T10:54:06.000Z","updated_at":"2023-06-19T15:01:05.000Z","dependencies_parsed_at":"2022-09-06T18:51:10.758Z","dependency_job_id":null,"html_url":"https://github.com/nichenqin/wall.js","commit_stats":null,"previous_names":["nichenqin1001/wall.js"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/nichenqin/wall.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Fwall.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Fwall.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Fwall.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Fwall.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nichenqin","download_url":"https://codeload.github.com/nichenqin/wall.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Fwall.js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265563116,"owners_count":23788647,"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":["fullpage","fullscreen","scrolling"],"created_at":"2024-10-10T12:19:28.281Z","updated_at":"2025-07-28T10:41:24.145Z","avatar_url":"https://github.com/nichenqin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wall.js\n\n![wall.js](https://raw.githubusercontent.com/nichenqin1001/wall.js/master/asserts/wall.png)\n\n## Demo And Documentation\n\n[Live Demo \u0026 Documentation](http://nichenqin.com/wall.js)\n\n## Installation\n\n```bash\nnpm install wall.js --save\nyarn add wall.js\n```\n\nor\n\n```html\n\u003cscript src=\"https://unpkg.com/wall.js@0.10.1/dist/wall.min.js\"\u003e\u003c/script\u003e\n```\n\n## Get Start\n\n```html\n\u003cbody\u003e\n  \u003cdiv id=\"wall\"\u003e\n    \u003csection\u003e\u003c!--content--\u003e\u003c/section\u003e\n    \u003csection\u003e\u003c!--content--\u003e\u003c/section\u003e\n    \u003csection\u003e\u003c!--content--\u003e\u003c/section\u003e\n    \u003csection\u003e\u003c!--content--\u003e\u003c/section\u003e\n    \u003csection\u003e\u003c!--content--\u003e\u003c/section\u003e\n    \u003csection\u003e\u003c!--content--\u003e\u003c/section\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n\n\u003cscript src=\"path/to/wall.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  var wall = new Wall('#wall');\n\u003c/script\u003e\n```\n\n## API\n\n```javascript\nvar wall = new Wall('#wall');\n\nwall.prevSection(); // go to prev section;\nwall.nextSection(); // go to next section;\nwall.goToSection(1); // go to paticular section, param type is number\n\nwall.prevSlide(); // go to prev slide if slides exists in current section\nwall.nextSlide(); // go to next slide if slides exists in current section\n```\n\n## Custom Navigation\n\n### Add data-wall-section-nav attribute to your own nav element\n\nwall.js will add event listener and toggle active class of the navs.\n\n```html\n\u003c !-- DON'T ADD THE NAV ELEMENT INSIDE THE WRAPPER -- \u003e\n\u003cul class=\"nav\" data-wall-section-nav\u003e\n  \u003cli\u003eFirst\u003c/li\u003e\n  \u003cli\u003eSecond\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv id=\"wall\"\u003e \u003c!-- wrapper --\u003e\n  \u003csection\u003eFirst Section\u003c/section\u003e\n  \u003csection\u003eSecond Section\u003c/section\u003e\n\u003c/div\u003e\n\u003cul class=\"dot\" data-wall-section-nav\u003e\n  \u003cli\u003e\u003c/li\u003e\n  \u003cli\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### style your nav elment in html and css file\n\nHere is an example:\n\n```css\n.dot {\n  position: absolute;\n  top: 50%;\n  right: 50px;\n  transform: translateY(-50%);\n}\n\n.dot\u003eli {\n  width: 16px;\n  height: 16px;\n  margin-bottom: 10px;\n  border: 2px solid #fff;\n  border-radius: 50%;\n  background-color: transparent;\n  box-sizing: border-box;\n  list-style: none;\n  cursor: pointer;\n}\n\n.dot\u003eli.active,\n.dot\u003eli:hover {\n  background-color: #fff;\n}\n```\n\n### custom activc class\n\n```javascript\nvar config = {\n  sectionNavItemActiveClass: 'my-active-class'\n}\n\nvar wall = new Wall('#wall',config);\n```\n\n## Slides\n\n### Add data-wall-slide attribute to your HTMLElement\n\n```html\n\u003cdiv id=\"wall\"\u003e\n  \u003c!--other sections--\u003e\n  \u003csection\u003e\n    \u003cdiv data-wall-slide\u003e\u003c!--slide content--\u003e\u003c/div\u003e \u003c!-- wall.js will create horizontal move slides --\u003e\n    \u003cdiv data-wall-slide\u003e\u003c!--slide content--\u003e\u003c/div\u003e\n  \u003c/section\u003e\n  \u003c!--other sections--\u003e\n\u003c/div\u003e\n```\n\n### add data-wall-slide-arrow attribute to your arrows\n\n```html\n\u003csection\u003e\n  \u003cdiv data-wall-slide\u003e\u003c!--slide content--\u003e\u003c/div\u003e \u003c!-- wall.js will create horizontal move slides --\u003e\n  \u003cdiv data-wall-slide\u003e\u003c!--slide content--\u003e\u003c/div\u003e\n  \u003cdiv data-wall-slide-arrow class=\"prev-slide\"\u003e\u003c/div\u003e\n  \u003cdiv data-wall-slide-arrow class=\"next-slide\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n```\n\nYour should create and style the arrow yourself, wall.js helps arraw show above the slides\n\n## lazyload\n\nwall.js support lazy load images.\n\nJust set the true image source to `data-wall-origin` attribute of the `\u003cimg\u003e` tag.\n\n```javascript\n\u003csection\u003e\n  \u003cimg src=\"./blank.png\" alt=\"awesome\" data-wall-origin=\"./awesome.png\" /\u003e\n\u003c/section\u003e\n```\n\nThe picture will be replaced with the true picture.\n\n## Custom Animation Duration\n\n### Add data-wall-animate-duration attribute to section\n\nYou can change animation duration to all secitons like this:\n\n```javascript\nvar config = {\n  sectionAnimateDuration: 3 // every section now move 3 seconds\n}\n\nvar wall = new Wall('#wall',config);\n```\n\nor just change one of them like this:\n\n```html\n\u003cdiv id=\"wall\"\u003e\n  \u003csection\u003e\u003c!--section content--\u003e\u003c/section\u003e\n  \u003csection\u003e\u003c!--section content--\u003e\u003c/section\u003e\n  \u003csection\u003e\u003c!--section content--\u003e\u003c/section\u003e\n  \u003csection data-wall-animate-duration=3\u003e\u003c!--section content--\u003e\u003c/section\u003e \u003c!--this seciton will move 3 seconds--\u003e\n  \u003csection\u003e\u003c!--section content--\u003e\u003c/section\u003e\n  \u003csection\u003e\u003c!--section content--\u003e\u003c/section\u003e\n\u003c/div\u003e\n```\n\nof cause it works for slides\n\n```html\n\u003cdiv id=\"wall\"\u003e\n  \u003c!--other sections--\u003e\n  \u003csection\u003e\n    \u003c!--other slides--\u003e\n    \u003cdiv data-wall-slide\u003e\u003c!--slide content--\u003e\u003c/div\u003e\n    \u003cdiv data-wall-slide data-wall-animate-duration=3\u003e\u003c!--slide content--\u003e\u003c/div\u003e\n    \u003c!--other slides--\u003e\n  \u003c/section\u003e\n  \u003c!--other sections--\u003e\n\u003c/div\u003e\n```\n\n## Class of Current Section/Slide\n\ncurrent section will be added current class\n\n```html\n\u003csection class=\"section-1\"\u003e\u003c!--content--\u003e\u003c/section\u003e\n\u003csection class=\"section-2\"\u003e\u003c!--content--\u003e\u003c/section\u003e\n\u003csection class=\"section-3\"\u003e\u003c!--content--\u003e\u003c/section\u003e\n\u003csection class=\"section-4\"\u003e\u003c!--content--\u003e\u003c/section\u003e\n\u003csection class=\"section-5 current\"\u003e\u003c!--content--\u003e\u003c/section\u003e\u003c!--current section--\u003e\n```\n\nanimating section will be added animating class\n\n```html\n\u003csection class=\"section-1\"\u003e\u003c!--content--\u003e\u003c/section\u003e\n\u003csection class=\"section-2\"\u003e\u003c!--content--\u003e\u003c/section\u003e\n\u003csection class=\"section-3\"\u003e\u003c!--content--\u003e\u003c/section\u003e\n\u003csection class=\"section-4\"\u003e\u003c!--content--\u003e\u003c/section\u003e\n\u003csection class=\"section-5 animating current\"\u003e\u003c!--content--\u003e\u003c/section\u003e\u003c!--if you animate this section--\u003e\n```\n\nYou can control animation like this:\n\n```css\nh1 {\n  opacity: 0;\n  transition: opacity .3s ease;\n}\n\n.current h1 {\n  opacity: 1;\n}\n```\n\n## Custom Configs\n\noption | default | type | description\n------ | ------- | ---- | -----------\nwrapperZIndex | 1 | `number` | z-index style of wrapper\nsectionAnimateDuration | 1 | `number` | duration of animation\neaseFunction | 'easeIn' | `string` or `function` | ease function of animation\nloopToBottom | false | `boolean` | whether loop from top to bottom\nloopToTop | false | `boolean` | whether loop from  bottom to top\nsectionNavItemActiveClass | 'active' | `string` | active class of custom nav item\ncurrentClass | 'current' | `string` | class of current section or slide\nanimatingClass | 'animating' | `string` | class of current section or slide while animating\n\n## LICENSE\n\nMIT License\n\nCopyright (c) 2017 倪晨钦\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnichenqin%2Fwall.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnichenqin%2Fwall.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnichenqin%2Fwall.js/lists"}