Simple directive for scrolling into the website itself
Clone or download

README.md

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.

Preview

Requirements

  • AngularJS 1.5+
  • jQuery 2.2+ (still)

Installation

NPM

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 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

<link rel="stylesheet" type="text/css" href="[PATH-TO-YOUR-DOWNLOAD-FOLDER]/build/styles.min.css">
<script src="[PATH-TO-YOUR-DOWNLOAD-FOLDER]/build/angular-warp-scroll.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

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

node -v

If you get no result please download and install node.js from https://docs.npmjs.com/getting-started/installing-node

2) Install angular-warp-scroll

npm install angular-warp-scroll

3) Install dependencies jquery and angular

npm install jquery
npm install angular

3) Add all necessary files to your website

Put this lines into <head> of your website.

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-warp-scroll/build/angular-warp-scroll.min.js"></script>

It is also recommended to use the delivered styles, but they are not necessary.

<link rel="stylesheet" href="node_modules/angular-warp-scroll/build/styles.min.css">

4) Initialize the script

Specify the angular app in the <html> tag.

<html ng-app="app">

Load angular-warp-scroll controller in the <body> tag.

<body ng-controller="scrollCtrl">

Documentation

After you have followed all steps above, you are now free to use this module. Take a look at the example.html to see all features.

Features

Dots navigation

<aside>
    <div class="flex flex--center">
        <div class="flex__item">
            <dots status="scrollStatus"></dots>
        </div>
    </div>
</aside>

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.

<div class="slide__wrapper">
    <div class="slide" data-title="First slide">
        <div class="flex flex--center">
            <div>
                <h1>Slide #1</h1>
            </div>
        </div>
    </div>

    <div class="slide" data-title="Second slide">
        <div class="flex flex--center">
            <div>
                <h1>Slide #2</h1>
            </div>
        </div>
    </div>
</div>