This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on One Page Scroll by Pete R.
Demo and documentation here
Full screen, slide based layout with scroll/keyboard event transition.
funkyrobot-angular-slidecroll is an Angular JS component that comprises a set of Angular directives.
Slide transitions are driven by JavaScript events which makes hooking up custom slide controls easy.
To start create a <slidescroll></slidescroll> element within an Angular JS app. This will initialise the slide scroll
layout and binds all the necessary events (keyboard, scroll events).
Within <slidescroll></slidescroll> create <slide></slide> elements and place your slide contents within this.
Finally in your Angular app's module definition, specify frSlidescroll as a dependency.
And that's it!
Easily manage this component with Bower by:
bower install net-funkyrobot/funkyrobot-angular-slidescroll
This downloads the all the necessary files to bower_components/funkyrobot-angular-slidescroll.
(see demos/simple_example for a complete example)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Funkyrobot Angular Slidescroll UI</title>
<!-- Angular slidescroll required resources -->
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-slidescroll.js"></script>
<link rel="stylesheet" type="text/css" href="angular-slidescroll.css" />
<!-- Demo related resources -->
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body ng-app="demoApp">
<slidescroll>
<slide>
<h2>Slide #1</h2>
<p>This will be the first slide, navigate slides by scrolling/arrow keys.</p>
</slide>
<slide>
<h2>Slide #2</h2>
<p>The second slide.</p>
</slide>
</slidescroll>
</body>
</html>angular.module('demoApp', ['frSlidescroll']);