{"id":21662474,"url":"https://github.com/valnub/framework7-plugin-welcomescreen","last_synced_at":"2025-05-16T14:03:21.190Z","repository":{"id":29863129,"uuid":"33408192","full_name":"valnub/Framework7-Plugin-Welcomescreen","owner":"valnub","description":"A plugin for Framework7 that displays a swipeable welcome screen to guide the user through a tutorial","archived":false,"fork":false,"pushed_at":"2024-12-15T17:20:05.000Z","size":2925,"stargazers_count":148,"open_issues_count":0,"forks_count":62,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-12T06:15:49.443Z","etag":null,"topics":["css","framework7","html","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/valnub.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-04T14:27:10.000Z","updated_at":"2025-01-31T10:20:56.000Z","dependencies_parsed_at":"2025-01-15T01:16:37.771Z","dependency_job_id":"8999d2b1-c426-4e6d-bb27-1152453cda84","html_url":"https://github.com/valnub/Framework7-Plugin-Welcomescreen","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valnub%2FFramework7-Plugin-Welcomescreen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valnub%2FFramework7-Plugin-Welcomescreen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valnub%2FFramework7-Plugin-Welcomescreen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valnub%2FFramework7-Plugin-Welcomescreen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valnub","download_url":"https://codeload.github.com/valnub/Framework7-Plugin-Welcomescreen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525139,"owners_count":21118620,"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":["css","framework7","html","javascript"],"created_at":"2024-11-25T10:16:23.011Z","updated_at":"2025-04-12T06:16:07.337Z","avatar_url":"https://github.com/valnub.png","language":"JavaScript","readme":"# Framework7 Plugin Welcomescreen\n\nThis plugin will show a tutorial screen when starting [Framework7](http://www.framework7.io) apps and websites. (Note: There is also a generic version that does not rely on Framework7 [available](https://github.com/valnub/welcomescreen-mobile))\n\n## Screenshot\n\n\u003ca href=\"https://raw.githubusercontent.com/valnub/Framework7-Plugin-Welcomescreen/master/screens/screen1.jpg\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/valnub/Framework7-Plugin-Welcomescreen/master/screens/screen1.jpg\" alt=\"Framwork7 Welcomescreen Plugin Screenshot\" width=\"250\"\u003e\u003c/a\u003e\n\n## Live demo\n\nYou can find a running demo [here](http://www.timo-ernst.net/misc/f7-plugin-welcomescreen).\n\n## Install\n\n### 1. Add dependency\n\n#### With module bundler (Webpack, Vite...)\n\n```shell\n$ yarn add f7-welcomescreen\n```\n\nIn your main js file do:\n\n```\nimport F7WelcomescreenPlugin from 'f7-welcomescreen';\n```\n\nIn your stylesheet add F7 styles (if not exist yet!). This is when using Webpack:\n\n```\n@import '~f7-welcomescreen/styles.css';\n```\n\nFor Vite\n\n```\n@import 'f7-welcomescreen/styles.css';\n```\n\n#### Alternative: Without bundler (direct linking)\n\n1. Copy files `f7-welcomescreen.min.js` and `f7-welcomescreen.min.css` from `dist` into your project folder.\n2. Reference the files in HTML like this:\n\n```\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"f7-welcomescreen.min.css\"\u003e\u003c/link\u003e\n  \u003cscript src=\"f7-welcomescreen.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n### 3. Define slides\n\n```javascript\nvar welcomescreen_slides = [\n  {\n    id: 'slide0',\n    title: 'Slide 0', // optional\n    picture: '\u003cdiv class=\"tutorialicon\"\u003e♥\u003c/div\u003e',\n    text: 'Welcome to this tutorial. In the next steps we will guide you through a manual that will teach you how to use this app.',\n  },\n  {\n    id: 'slide1',\n    title: 'Slide 1', // optional\n    picture: '\u003cdiv class=\"tutorialicon\"\u003e✲\u003c/div\u003e',\n    text: 'This is slide 2',\n  },\n  {\n    id: 'slide2',\n    title: 'Slide 2', // optional\n    picture: '\u003cdiv class=\"tutorialicon\"\u003e♫\u003c/div\u003e',\n    text: 'This is slide 3',\n  },\n  {\n    id: 'slide3',\n    //title: 'NO TITLE',\n    picture: '\u003cdiv class=\"tutorialicon\"\u003e☆\u003c/div\u003e',\n    text: 'Thanks for reading! Enjoy this app.\u003cbr\u003e\u003cbr\u003e\u003ca id=\"tutorial-close-btn\" href=\"#\"\u003eEnd Tutorial\u003c/a\u003e',\n  },\n];\n```\n\nUsed parameters are:\n\n- `id` Set an id for this slide\n- `picture` Set free html here\n- `text` You _can_ set html here but I recommend using just plain text\n\n### 4. Initialize \u0026 options\n\n#### For Framework7 Core version\n\n```javascript\nFramework7.use(F7WelcomescreenPlugin);\n\n// Define options for welcomescreen plugin\nvar options = {\n  bgcolor: '#0da6ec',\n  fontcolor: '#fff',\n};\n\nvar app = new Framework7({\n  root: '#app', // or what ever your root is\n  name: 'welcomescreen-demo', // choose a name\n  welcomescreen: {\n    // Setup welcomescreen plugin\n    slides: welcomescreen_slides,\n    options: options,\n  },\n});\n```\n\n#### For Framework7 React version\n\napp.js\n\n```javascript\nFramework7.use(F7WelcomescreenPlugin);\n```\n\napp.jsx\n\n```javascript\nvar options = {\n  bgcolor: '#0da6ec',\n  fontcolor: '#fff',\n};\n\nconst f7params = {\n  name: 'welcomescreen-demo',\n  theme: 'auto',\n  store: store,\n  routes: routes,\n  welcomescreen: {\n    slides: welcomescreen_slides,\n    options: options,\n  },\n};\n```\n\n#### For Framework7 Vue version\n\napp.js\n\n```\nFramework7.use(F7WelcomescreenPlugin);\n\nconst app = createApp(App);\nregisterComponents(app);\napp.mount('#app');\n```\n\nIn your component add parameters in `onMounted()` and initilize:\n\n```\nonMounted(() =\u003e {\n  f7ready((f7) =\u003e {\n    f7.welcomescreen.init(welcomescreen_slides, options);\n  });\n});\n```\n\nYou can use same values for welcomescreen_slides and options as with React and Core version above.\n\n#### Available options (if not set, default will be used)\n\n- **bgcolor** Set background color\n- **fontcolor** Set font color\n- **closeButton** (Default: true) Enabled/disable close button\n- **closeButtonText** (Default: 'Skip') Close button text\n- **cssClass** (Default: '') Additional class on container\n- **pagination** (Default: true) Swiper pagination\n- **navigation** (Default: false) Swiper navigation\n- **loop** (Default: false) Swiper loop\n- **template** (Default: String) Pass in a custom Dom7 template to render Welcomescreen\n- **open** (Default: true) Open welcome screen on init\n- **onOpened** (Default: none) Callback function when welcomescreen is opened\n- **onClosed** (Default: none) Callback function when welcomescreen is closed\n- **parallax** (Default: true), Enable parallax\n- **parallaxBackgroundImage** (Default: 'http://lorempixel.com/900/600/nightlife/2/') Parallax default background image\n- **parallaxBackground** (Default **percentage**: '-23%') Parallax default background speed effect\n- **parallaxSlideElements** (Default **number** per element: {title: -100, subtitle: -200, text: -300}) Set speed of each element in parallax mode\n\n### Note:\n\n- **number** - value in px (as for title, subtitle in example above) to move element depending on progress. In this case such element will be moved on ± this value in px depending on slide position (next or previous)\n- **percentage** - (as for \"parallax-bg\") to move element depending on progress and on its size. In this case such element will be moved on ± this percentage of its size (width in horizontal direction, and height in vertical direction) depending on slide position (next or previous). So if element has 400px width and you specified data-swiper-parallax=\"50%\" then it will be moved on ± 200px\n\n## API\n\nThe following methods are available on a welcomescreen instance\n\n```javascript\napp.welcomescreen.open(); // Open the screen\napp.welcomescreen.close(); // Closes it\napp.welcomescreen.next(); // Go to next slide\napp.welcomescreen.previous(); // Go to previous slide\napp.welcomescreen.slideTo(i); // Go to slide with index i\n```\n\n## Example project\n\nSee [demo](https://github.com/valnub/Framework7-Plugin-Welcomescreen/tree/master/demo) directory. The demo has the following scripts:\n\n- `yarn start` Starts a http server and serves content from `demo/build`\n- `yarn build` Creates a new build into the `demo/build` directory\n- `yarn watch` Watches for changes in .js files and runs `yarn build`\n\nI recommend to just run `yarn start` from the demo directory. Then open http://127.0.0.1:8080 in your browser.\n\n## Credits\n\nMade with \u003c3 by www.timo-ernst.net\n\nMy YouTube channel about Framework7: http://www.timoernst.tv\n\nThanks for helping [@nolimits4web](https://twitter.com/nolimits4web)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalnub%2Fframework7-plugin-welcomescreen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalnub%2Fframework7-plugin-welcomescreen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalnub%2Fframework7-plugin-welcomescreen/lists"}