angular-scroll-animate/example/example.html

An Angular.js directive which allows you to perform any javascript actions (in the controller, or on the element) when an element is scrolled into, or out of, the users viewport, without any other dependencies.

<div>

	<h1>Angular Scroll Animate</h1>

	<style>
		.not-visible {
			visibility: hidden;
	  }

		body {
			font-family: Helvetica Neue, Helvetica, Arial;
		}

		.car {
			/*background-color: #6699ff;*/
			color: #eee;
		}

		.car-container {
			border: 1px solid #999;
			margin:10px;
			padding: 12px;
			border-radius: 5px;
		}

		.car-container:nth-child(odd) {
			background-color: #add8e6;
		}
		.car-container:nth-child(even) {
			background-color: #778899;
		}

		.car h3 {
			color: white;
		}


		.spacer {
			height: 200px;
		}
	</style>


	<label>Select your animation:
	<select ng-model="animation.current" ng-change="changeAnimation()" class="input input--dropdown js--animations">
		<optgroup label="Attention Seekers">
			<option value="bounce">bounce</option>
			<option value="flash">flash</option>
			<option value="pulse">pulse</option>
			<option value="rubberBand">rubberBand</option>
			<option value="shake">shake</option>
			<option value="swing">swing</option>
			<option value="tada">tada</option>
			<option value="wobble">wobble</option>
			<option value="jello">jello</option>
		</optgroup>

		<optgroup label="Bouncing Entrances">
			<option value="bounceIn">bounceIn</option>
			<option value="bounceInDown">bounceInDown</option>
			<option value="bounceInLeft">bounceInLeft</option>
			<option value="bounceInRight">bounceInRight</option>
			<option value="bounceInUp">bounceInUp</option>
		</optgroup>

		<optgroup label="Fading Entrances">
			<option value="fadeIn">fadeIn</option>
			<option value="fadeInDown">fadeInDown</option>
			<option value="fadeInDownBig">fadeInDownBig</option>
			<option value="fadeInLeft">fadeInLeft</option>
			<option value="fadeInLeftBig">fadeInLeftBig</option>
			<option value="fadeInRight">fadeInRight</option>
			<option value="fadeInRightBig">fadeInRightBig</option>
			<option value="fadeInUp">fadeInUp</option>
			<option value="fadeInUpBig">fadeInUpBig</option>
		</optgroup>

		<optgroup label="Flippers">
			<option value="flip">flip</option>
			<option value="flipInX">flipInX</option>
			<option value="flipInY">flipInY</option>
		</optgroup>

		<optgroup label="Lightspeed">
			<option value="lightSpeedIn">lightSpeedIn</option>
		</optgroup>

		<optgroup label="Rotating Entrances">
			<option value="rotateIn">rotateIn</option>
			<option value="rotateInDownLeft">rotateInDownLeft</option>
			<option value="rotateInDownRight">rotateInDownRight</option>
			<option value="rotateInUpLeft">rotateInUpLeft</option>
			<option value="rotateInUpRight">rotateInUpRight</option>
		</optgroup>

		<optgroup label="Sliding Entrances">
			<option value="slideInUp">slideInUp</option>
			<option value="slideInDown">slideInDown</option>
			<option value="slideInLeft">slideInLeft</option>
			<option value="slideInRight">slideInRight</option>

		</optgroup>
		<optgroup label="Zoom Entrances">
			<option value="zoomIn">zoomIn</option>
			<option value="zoomInDown">zoomInDown</option>
			<option value="zoomInLeft">zoomInLeft</option>
			<option value="zoomInRight">zoomInRight</option>
			<option value="zoomInUp">zoomInUp</option>
		</optgroup>

		<optgroup label="Specials">
			<option value="rollIn">rollIn</option>
		</optgroup>
	</select> </label>

	<div class="spacer"></div>

	<div ng-repeat="car in cars" when-visible="animateElementIn" when-not-visible="animateElementOut" class="not-visible car-container">
		<div class="car">
			<h3>{{car.name}}</h3>
			<div>{{car.description}}</div>
		</div>
	</div>

	<div class="spacer"></div>
</div>