{"id":15008619,"url":"https://github.com/guccisekspir/opscroll_web","last_synced_at":"2025-04-09T16:07:25.087Z","repository":{"id":45862928,"uuid":"407156810","full_name":"guccisekspir/OPScroll_web","owner":"guccisekspir","description":"One Page Scroll  package for Flutter Web","archived":false,"fork":false,"pushed_at":"2022-07-01T10:58:02.000Z","size":1852,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T16:06:59.616Z","etag":null,"topics":["animation","dart","flutter","flutter-ui","flutterweb","flutterwebapp"],"latest_commit_sha":null,"homepage":"","language":"Dart","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/guccisekspir.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":"2021-09-16T12:30:26.000Z","updated_at":"2023-09-19T01:02:25.000Z","dependencies_parsed_at":"2022-09-24T06:01:43.669Z","dependency_job_id":null,"html_url":"https://github.com/guccisekspir/OPScroll_web","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/guccisekspir%2FOPScroll_web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guccisekspir%2FOPScroll_web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guccisekspir%2FOPScroll_web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guccisekspir%2FOPScroll_web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guccisekspir","download_url":"https://codeload.github.com/guccisekspir/OPScroll_web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065287,"owners_count":21041871,"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","dart","flutter","flutter-ui","flutterweb","flutterwebapp"],"created_at":"2024-09-24T19:19:42.424Z","updated_at":"2025-04-09T16:07:25.060Z","avatar_url":"https://github.com/guccisekspir.png","language":"Dart","funding_links":["https://www.buymeacoffee.com/shekspir"],"categories":[],"sub_categories":[],"readme":"# OPscroll_web\n\n\n\u003cp align=\"left\" width=\"100%\"\u003e\n    \u003cimg width=\"100%\" src=\"https://media.giphy.com/media/UjyBgiG2NjM4nYghBh/giphy.gif?cid=790b761177a01e756ce8a2f4e90dc103b29ddc59d2eb0581\u0026rid=giphy.gif\u0026ct=g\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eOPScroll\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eA simple and easy to use library that creates OnePage sites for Flutter Web Developers! Make a beautiful and smooth landing pages with OPScroll with in minutes. Try out our \u003ca href=\"https://opscrolll.web.app/\"\u003eWeb Demo App\u003c/a\u003e.\u003c/p\u003e\u003cbr\u003e\n\n[![name](https://www.buymeacoffee.com/assets/img/guidelines/download-assets-2.svg)](https://www.buymeacoffee.com/shekspir)\n\n# Table of contents\n\n\n- [Installing](#installing)\n- [Usage](#usage)\n- [Up Coming](#up-coming)\n- [Scrolling Options](#scrolling-options)\n- [Scrolling Animations](#scrolling-animations)\n  - [Fading Scrolling Animation](fading-scrolling-animation)\n  - [Circle Scrolling Animation](circle-scrolling-animation)\n  - [Drop Scrolling Animation](drop-scrolling-animation)\n    \n\n\n# Installing\n\n### 1. Depend on it\n\nAdd this to your package's `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  opscroll_web: ^0.0.2\n```\n\n### 2. Install it\n\nYou can install packages from the command line:\n\nwith `pub`:\n\n```\n$ pub get\n```\n\nwith `Flutter`:\n\n```\n$ flutter pub get\n```\n\n### 3. Import it\n\nNow in your `Dart` code, you can use:\n\n```dart\nimport 'package:opscroll_web/opscroll_web.dart';\n```\n\n# Usage\n\n`OPScroll` is a _Stateful Widget_ that produces OnePage scroll mechanicsm for your\nFlutter Web Projects.\nInclude it in your `build` method like:\n\n```dart\nOpscrollWeb({\n  onePageChildren:[],\n  pageController:PageController(),\n  scrollCurve : Curves.easeIn,\n  scrollSpeed : const Duration(milliseconds: 900),\n  floatingButtonBackgroundColor :Colors.white,\n  floatingButtonSplashColor : Colors.white,\n  isFloatingButtonActive : false,\n  isTouchScrollingActive : false,\n  scrollingAnimationOptions: ScrollingAnimationOptions.Default,\n  scrollDirection = Axis.vertical,\n})\n```\n\n# Scrolling Options\n\nYou can allow to scrolling by tapping.Just give the true value to `isTouchScrollingActive`\n\n```dart\nisTouchScrollingActive=true,\n```\n\nYou can allow to scrolling by Floating Action Button.Just give the true value to `isFloatingButtonActive`\nAlso you can change background \u0026 splash colors.\n\n```dart\nisTouchScrollingActive=true, //Optional\nfloatingButtonBackgroundColor :Colors.white, //Optional\nfloatingButtonSplashColor : Colors.white, //Optional\n```\n\n# Scrolling Animations\n\nThere are 4 scrolling options for OPScroll. \n\n```dart\nenum ScrollingAnimationOptions { Fading, Drop, Circle, Default }\n```\nYou can only choice 1 scrolling animation options.\n\n---\n\n## Fading Scrolling Animation\n\n\u003cimg src=\"https://media4.giphy.com/media/LCx7dhjuWyTTSLm563/giphy.gif?cid=790b7611b5a1edd4ba7e478e5db108a2c75c637903a476d1\u0026rid=giphy.gif\u0026ct=g\" align = \"center\" height = \"300px\"\u003e\n\n ```dart\n OpscrollWeb(\n    isFloatingButtonActive: true,\n    isTouchScrollingActive: true,\n    pageController: pageController,\n    scrollingAnimationOptions: ScrollingAnimationOptions.Fading,\n    scrollSpeed: const Duration(milliseconds: 900,\n    onePageChildren:[]),\n```\n---\n\n## Circle Scrolling Animation\n\n\u003cimg src=\"https://media0.giphy.com/media/xhY9fvl0vApRDNvwxe/giphy.gif?cid=790b7611cb6f537d7375c7d11c12242fcffd867b7e44ac18\u0026rid=giphy.gif\u0026ct=g\" align = \"center\" height = \"300px\"\u003e\n\n ```dart\n OpscrollWeb(\n    isFloatingButtonActive: true,\n    isTouchScrollingActive: true,\n    pageController: pageController,\n    scrollingAnimationOptions: ScrollingAnimationOptions.Circle,\n    scrollSpeed: const Duration(milliseconds: 600,\n    onePageChildren:[]),\n```\n---\n\n## Drop Scrolling Animation\n\n\u003cimg src=\"https://media0.giphy.com/media/SRCY7kZ4v2pQGJ0Ifs/giphy.gif?cid=790b761198a615ed546125053ffceb6a261717ad2e4e99ef\u0026rid=giphy.gif\u0026ct=g\" align = \"center\" height = \"300px\"\u003e\n\n ```dart\n OpscrollWeb(\n    isFloatingButtonActive: true,\n    isTouchScrollingActive: true,\n    pageController: pageController,\n    scrollingAnimationOptions: ScrollingAnimationOptions.Drop,\n    scrollSpeed: const Duration(milliseconds: 600,\n    onePageChildren:[]),\n```\n\n \n\n# Up Coming\n\n- [:white_check_mark:] Fade Scroll Effect\n- [:white_check_mark:] Drop Scroll Effect\n- [:hourglass_flowing_sand:] New Scroll Effects\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguccisekspir%2Fopscroll_web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguccisekspir%2Fopscroll_web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguccisekspir%2Fopscroll_web/lists"}