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.
- AngularJS 1.5+
- jQuery 2.2+ (still)
You have two ways to get this module running. Choose this one you feel most comfortable with.
Download angular-scroll-watch from https://github.com/nextlevelshit/angular-warp-scroll/archive/master.zip and unzip.
Include jQuery and AngularJS from CDN or download the main script files to your folder.
<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.
node -vIf you get no result please download and install node.js from https://docs.npmjs.com/getting-started/installing-node
npm install angular-warp-scrollnpm install jquery
npm install angularPut 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">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">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.
<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.
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>