Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nextlevelshit/angular-warp-scroll
Simple directive for scrolling into the website itself
https://github.com/nextlevelshit/angular-warp-scroll
angular gui navigation scrolling slide warp
Last synced: about 2 months ago
JSON representation
Simple directive for scrolling into the website itself
- Host: GitHub
- URL: https://github.com/nextlevelshit/angular-warp-scroll
- Owner: nextlevelshit
- License: gpl-3.0
- Created: 2016-03-04T10:47:53.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-07T10:25:54.000Z (almost 8 years ago)
- Last Synced: 2024-10-08T02:50:32.377Z (3 months ago)
- Topics: angular, gui, navigation, scrolling, slide, warp
- Language: CSS
- Homepage: http://www.dailysh.it
- Size: 5.24 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Warp Scroll
UI to zoom into your website instead of scrolling up and down.
> *Very early and heavily under development.* If you are not using AngularJS, have a look at [jquery-warp-scroll](https://github.com/nextlevelshit/jquery-warp-scroll).
# Requirements
- AngularJS 1.5+
- jQuery 2.2+ (still)
# Installation
[](https://nodei.co/npm/angular-warp-scroll/)
You have two ways to get this module running. Choose this one you feel most comfortable with.
## Installation without Package Manager
### 1) Download
Download `angular-scroll-watch` from [https://github.com/nextlevelshit/angular-warp-scroll/archive/master.zip](https://github.com/nextlevelshit/angular-warp-scroll/archive/master.zip) and unzip.
### 2) Solve dependencies
Include `jQuery` and `AngularJS` from CDN or download the main script files to your folder.
### 3) ADd files to your website
```html
```
Please do not forget to specify the folder to the downloaded files. Replace `[PATH-TO-YOUR-DOWNLOAD-FOLDER]` with your path to the downloaded files.
## Installation with npm
### 1) Check if you got node.js already running
```sh
node -v
```
If you get no result please download and install `node.js` from [https://docs.npmjs.com/getting-started/installing-node](https://docs.npmjs.com/getting-started/installing-node)
### 2) Install `angular-warp-scroll`
```sh
npm install angular-warp-scroll
```
### 3) Install dependencies `jquery` and `angular`
```sh
npm install jquery
npm install angular
```
### 3) Add all necessary files to your website
Put this lines into `` of your website.
```html
```
It is also recommended to use the delivered styles, but they are not necessary.
```html
```
### 4) Initialize the script
Specify the angular app in the `` tag.
```html
```
Load `angular-warp-scroll` controller in the `` tag.
```html
```
# Documentation
After you have followed all steps above, you are now free to use this module. Take a look at the [example.html](https://github.com/nextlevelshit/angular-warp-scroll/blob/master/example.html) to see all features.
## Features
### Dots navigation
```html
```
The navigation is rendered automatically from the amount of slides, which are declared by `class="slide"`.
Adding the attribute `data-title` specifies the displayed navigation point.
### Adding slides
Add element with class `slide` to a wrapper.
```html
```