ng-parallax
Version:
An easy way to utilize parllax scrolling in Angular apps.
138 lines (131 loc) • 5.82 kB
HTML
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>ng-parallax directive</title>
<!-- ANGULARJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!-- MODULE -->
<script src="../src/ngParallax.min.js"></script>
<!-- APP -->
<script src="./app.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body style='min-width: 1000px'>
<h1>ng-parallax demo</h1>
<!--------------->
<div class='container' ng-init="myPattern='images/cloud-pattern.jpg'">
<hr>
<h2>Basic Usage:</h2>
<h3>In Controller:</h3>
<code>$scope.myPattern = 'images/cloud-pattern.jpg'</code>
<br><br>
<h3>HTML:</h3>
<code><div ng-parallax pattern="myPattern" speed="0" ></div><br></code>
<p>* speed 10-0 (slowest - fastest)</p>
<br><br>
<hr>
<div class='box'>
<div ng-parallax pattern="myPattern" speed="0" ><center>Speed: 0</center></div>
</div>
<div class='box'>
<div ng-parallax pattern="myPattern" speed="5" ><center>Speed: 5</center></div>
</div>
<div class='box'>
<div ng-parallax pattern="myPattern" speed="3" ><center>Speed: 3</center></div>
</div>
<div class='box'>
<div ng-parallax pattern="myPattern" speed="1" ><center>Speed: 1</center></div>
</div>
</div>
<!--------------->
<!--------------->
<div <div class='container' ng-init="myPattern2='images/rain-pattern.png'">
<hr>
<h2>Reverse:</h2>
<h3>In Controller:</h3>
<code>$scope.myPattern = 'images/rain-pattern.png'</code>
<br><br>
<h3>HTML:</h3>
<code><div ng-parallax pattern="myPattern" speed="1" reverse="true" ></div></code>
<br><br>
<hr>
<div class='box'>
<div ng-parallax pattern="myPattern2" speed="0" ><center>Speed: 0</center></div>
</div>
<div class='box'>
<div ng-parallax pattern="myPattern2" speed="-15" ><center>Speed: -15</center></div>
</div>
<div class='box'>
<div ng-parallax pattern="myPattern2" speed="-10" ><center>Speed: -10</center></div>
</div>
<div class='box'>
<div ng-parallax pattern="myPattern2" speed="-5" ><center>Speed: -5</center></div>
</div>
</div>
<!--------------->
<!--------------->
<div class='container'>
<hr>
<h3>Layered Parallax:</h3>
<br><br>
<h3>HTML:</h3>
<code>
<div style="width: 100%; height: 800px"><br>
<div style='width: 100%; height: 100%; position: absolute; ' ><br>
<div ng-parallax pattern="'images/grey-pattern.png'" speed="0"></div><br>
</div><br>
<div style='width: 50%; height: 50%; position: absolute; '><br>
<div ng-parallax pattern="'images/rain-pattern.png'" speed="15" reverse="true"></div><br>
</div><br>
<div style='width: 25%; height: 25%; position: absolute; '><br>
<div ng-parallax pattern="'images/cloud-pattern.jpg'" speed="0" reverse="true"></div><br>
</div><br>
</div><br>
</code>
<br><br>
<hr>
<hr>
<div style="width: 100%; height: 800px">
<div style='width: 100%; height: 800px; position: absolute; ' >
<div ng-parallax pattern="'images/grey-pattern.png'" speed="0"></div>
</div>
<div style='width: 50%; height: 50%; position: absolute; '>
<div ng-parallax pattern="'images/rain-pattern.png'" speed="15" reverse="true"></div>
</div>
<div style='width: 25%; height: 25%; position: absolute; '>
<div ng-parallax pattern="'images/cloud-pattern.jpg'" speed="0" reverse="true"></div>
</div>
</div>
</div>
<!--------------->
<!--------------->
<div class='container' ng-init="myPattern2='images/rain-pattern.png'">
<hr>
<h3>Notes of Interest:</h3>
<p> - Responsive, fits in any container.</p>
<p> - Can use images without being scoped</p>
<br><br>
<h3>HTML:</h3>
<code><div ng-parallax pattern="'images/grey-pattern.png'" speed="0"></div></code>
<br>
<code><div ng-parallax pattern="'http://lorempixel.com/g/400/600/people/8'" speed="2" reverse="false" ></div></code>
<br><br>
<hr>
<hr>
<div class='large-box'>
<div ng-parallax pattern="'images/grey-pattern.png'" speed="0" reverse="true" ></div>
</div>
<div class='large-box'>
<div ng-parallax pattern="'http://lorempixel.com/g/400/600/people/8'" speed="12" reverse="false" ></div>
</div>
<div class='large-box'>
<div ng-parallax pattern="'http://lorempixel.com/400/1000/abstract/8'" speed="1" reverse="true" ></div>
</div>
<div class='large-box'>
<div ng-parallax pattern="'images/grey-pattern.png'" speed="0" reverse="true" ></div>
</div>
</div>
<!--------------->
</body>
</html>