Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mate-h/parallax-city
A WordPress plugin for parallax scrolling effect on a city background with security camera.
https://github.com/mate-h/parallax-city
Last synced: 2 days ago
JSON representation
A WordPress plugin for parallax scrolling effect on a city background with security camera.
- Host: GitHub
- URL: https://github.com/mate-h/parallax-city
- Owner: mate-h
- Created: 2020-01-02T13:18:27.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T03:00:05.000Z (almost 2 years ago)
- Last Synced: 2023-03-12T05:26:29.106Z (over 1 year ago)
- Language: HTML
- Homepage: https://parallax-city.now.sh
- Size: 230 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Parallax City
This project demonstrates a dynamic background that changes based on scroll positon, creating a parallax effect on a city background.
#### [Demo](https://parallax-city.now.sh)
## WordPress installation instructions
1. Download repository as ZIP file
2. Open your wordpress admin dashboard available at https://www.yoursite.com/wp-admin
3. Navigate to Plugins
4. Click the "Upload plugin" button at the top header
5. Browse for the ZIP file you downloaded earlier
6. In your page builder framework of choice, or in the buildin WP editor, set your target element's CSS ID to `parallax-city`. This is the selector svelte will use to render the root component. Make sure to clear any styles on the element and that it's full width for the best effect.
7. Enable the plugin and enjoy! 🏙️🌟
## Get started
Install the dependencies...
```bash
cd svelte-app
npm install
```
...then start [Rollup](https://rollupjs.org):
```bash
npm run dev
```
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
## Building and running in production mode
To create an optimised version of the app:
```bash
npm run build
```
You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
## Single-page app mode
By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for _any_ path. You can make it so by editing the `"start"` command in package.json:
```js
"start": "sirv public --single"
```
## Deploying to the web
### With [now](https://zeit.co/now)
Install `now` if you haven't already:
```bash
npm install -g now
```
Then, from within your project folder:
```bash
cd public
now deploy --name my-project
```
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
### With [surge](https://surge.sh/)
Install `surge` if you haven't already:
```bash
npm install -g surge
```
Then, from within your project folder:
```bash
npm run build
surge public my-project.surge.sh
```