{"id":13399951,"url":"https://github.com/ykob/fullscreen-slider","last_synced_at":"2025-03-16T20:31:42.631Z","repository":{"id":78838739,"uuid":"181184293","full_name":"ykob/fullscreen-slider","owner":"ykob","description":"This asset controls sections in a page.   It resizes sections to fullscreen resolution and moves these individually by wheel/touch events.  ","archived":false,"fork":false,"pushed_at":"2019-05-16T06:15:53.000Z","size":10431,"stargazers_count":223,"open_issues_count":1,"forks_count":29,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-11T12:44:34.881Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ykob.github.io/fullscreen-slider/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ykob.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-04-13T14:38:31.000Z","updated_at":"2025-01-28T09:58:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"ed178e28-ba68-4107-a8a1-b16b9b9d44dd","html_url":"https://github.com/ykob/fullscreen-slider","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/ykob%2Ffullscreen-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ykob%2Ffullscreen-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ykob%2Ffullscreen-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ykob%2Ffullscreen-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ykob","download_url":"https://codeload.github.com/ykob/fullscreen-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830922,"owners_count":20354850,"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":[],"created_at":"2024-07-30T19:00:45.544Z","updated_at":"2025-03-16T20:31:39.336Z","avatar_url":"https://github.com/ykob.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# fullscreen-slider\n\n![screenshot](screenshot.gif)\n\nThis asset controls sections in a page.  \nIt resizes sections to fullscreen resolution and moves these individually by wheel/touch events.  \nhttps://ykob.github.io/fullscreen-slider/\n\n## Usage\n\n1. You must install the necessary npm modules.  \nThis class depends on below modules.  \nhttps://www.npmjs.com/package/normalize-wheel\n\n```\nnpm i normalize-wheel --save\n```\n\n2. Import FullscreenSlider class.  \nhttps://github.com/ykob/fullscreen-slider/blob/master/src/js/modules/fullscreen_slider/index.js  \nLike as below.\n\n```\nimport FullscreenSlider from '../modules/fullscreen_slider/';\n```\n\n3. Create an instance and set wrapper element (ex: document) and 2D resolution object to arguments as below.\n\n```\nconst fsSlider = new FullscreenSlider(\n  document,\n  {\n    x: window.innerWidth,\n    y: window.innerHeight\n  }\n);\n```\n\n4. Bind the `resize` event. You should run the `reset` method before running the `resize` method to set the resolution to the section elements correctly. Also, you should set an object that has window resolution to an argument of the \"resize\" method to resize the sections to full-screen size.\n\n```\nwindow.addEventListener('resize', () =\u003e {\n  fsSlider.reset();\n  fsSlider.resize(\n    {\n      x: window.innerWidth,\n      y: window.innerHeight\n    }\n  );\n});\n```\n\n5. Run the `start` method when you want to start the animation.\n\n```\nfsSlider.start();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fykob%2Ffullscreen-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fykob%2Ffullscreen-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fykob%2Ffullscreen-slider/lists"}